Angular authentication (and authorization) based on Django REST Framework tokens


Authenticate AngularJS app with Django (REST framework) backend using Token Based Authentication written in Coffee Script.



At the time there was no module like this available - so we've created one.
We love simplicity! We've put much effort in making this module as slim and easy to use as possible.

Core Features

Angular-DRF-Auth is based on Token Authentication in Django REST Framework with the following features:

  • simple front-end template with a log-in form
  • redirection to the log-in form if unlogged user tries to enter an application
  • authorisation rights based on assigned roles
  • defining if particular webpage should require authentication (or authorization)
  • Angular UI-Router support
  • hide/display selected elements using hasPermission and hasPermissionToObject directives depending on granted permissions

Use scenario

1) A user wants to enter restricted page.

2) Angular-DRF-Auth checks if there is cookie 'token' for that site, if not it redirects to /#/login at this site.
/#/login url is configured to be managed by LoginCtrl which is a part of AngularAuth library.

3) LoginCtrl posts user and password to backend's url - /api-token-auth that is managed by Django REST Framework.
If username and password are correct, api-token-auth returns the token in the response.

4) Token is stored as a cookie and common authentication http header is set to Token and the token value.

5) Next there is another backend call to /check-auth which is any url managed by Django REST Framework which returns user in the response.

6) The user is set to angular $rootScope to session object.
If the token cookie exists, angular auth calls /check-auth to get the user and set it to the scope, it happens always when the page is refreshed.

7) Angular auth provides the directive has-permission-to-object which can be used to show/hide page elements based on permissions of the user groups.

Basic usage

<div has-permission-to-object="write_project" user="user" object="project"/>

User is an object which is returned by /check-auth url, project is an example name which can be anything you want to check user access on it - It has to have 'visibility' property which is the table of the object with permission property:

project.visibility = [{permission: 1}, {permission: 2}]

That means that user has to have at least one of the group permission with id=1 or id=2 to have an access to the project object.

Has-permission-to-object directive deals also well with the angular-chosen select components and is able to enable/disable them. The directive can also 'negate' the permission check, it can be done with '!' sign, f.e.

<div has-permission-to-object="!write_project" user="user" object="project"/>

That means that this div will be displayed only for users that don't have write_project group permission.

Webapp configuration using angular ui router
.config(function ($stateProvider, $urlRouterProvider) {
    // redirect to project list on /
    $urlRouterProvider.when('', '/check');

    // define states
        .state('check', {
            url: '/check',
        .state('login', {
            url: '/login',
            templateUrl: 'common/templates/login.html',
            controller: 'LoginCtrl',
            resolve: {
Backend configuration that uses Django REST Framework
url(r'^api-token-auth/', 'rest_framework.authtoken.views.obtain_auth_token'),
url(r'^check-auth/', CheckAuthView.as_view()),

class CheckAuthView(generics.views.APIView):
    def get(self, request, *args, **kwargs):
        return Response(UserWithFullGroupsSerializer(request.user).data)
click to subscribe
hire us

Let’s talk about Mobile Apps

We’d love to design, develop and release them for you.

Highest DevOps Standards

Our team wield the right skills to make things work.

Angular magic in the making

Most flexible development technology for stunnig results.

Web Apps cooked the right way

The ultimate combination of code, design and user experience.

Django REST Framework

TEONITE develops, supports and donates open source projects.