User Authentication in Django Rest Framework + Angular.js web app

I'm working on a webapp where users can login to see their online wine cellar.

I've got the Django REST models setup, as well as the front-end design in Angular but I'm having trouble putting the pieces together and my main issue is for user authentication.

I've read many posts on here and various tutorials but I can't seem to find a step by step method to implement authentication:

  • What kind of auth should be used (Token, Session, Other?)
  • How is authentication managed on the server side (is it a view? a method in the UserModel or UserManager?)
  • I have a custom User model (using email as username). Can I use the generic Django login method or do I need to create my own?
  • How is the authentication process managed between the server and client side?

From what I understand Angular makes a POST request on a url where DRF verifies that username and password match and returns a token or other auth proof.

I feel like I'm close but I need a more general view of how this works to put the pieces together.

Thanks in advance

I imagine there are a lot of ways to do this, let me explain what I do, hopefully it is helpful. This is going to be a long post. I would love to hear how others do this, or better ways of implementing the same approach. You can also check out my seed project on Github, Angular-Django-Seed.

I use token authentication with Witold Szczerba's http-auth-interceptor. The beauty of his approach is that whenever a request is sent from your site without proper credentials, you are redirected to the login screen, but your request is queued to be re-fired on login complete.

Here is a login directive used with the login form. It posts to Django's auth token endpoint, sets a cookie with the response token, sets the default header with the token so all requests will be authenticated, and fires the http-auth-interceptor login event.

    .directive('login', function ($http, $cookieStore, authService) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {

        elem.bind('submit', function () {
          var user_data = {
                "username": scope.username,
                "password": scope.password,
          };

          $http.post(constants.serverAddress + "api-token-auth", user_data, {"Authorization": ""})
              .success(function(response) {
                  $cookieStore.put('djangotoken', response.token);
                  $http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
                  authService.loginConfirmed();
              });
        });
      }
    }

})

I use the module .run method to set check for the cookie when a user comes to the site, if they have the cookie set I set the default authorization.

    .run(function($rootScope) {
      $rootScope.$broadcast('event:initial-auth');
    })

Here is my interceptor directive that handles the authService broadcasts. If login is required, I hide everything and show the login form. Otherwise hide the login form and show everything else.

    .directive('authApplication', function ($cookieStore, $http) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {

              var login = elem.find('#login-holder');
              var main = elem.find('#main');

              scope.$on('event:auth-loginRequired', function () {
                main.hide();
                login.slideDown('fast');
              });

              scope.$on('event:auth-loginConfirmed', function () {
                main.show();
                login.slideUp('fast');
              });

              scope.$on('event:initial-auth', function () {
                 if ($cookieStore.get('djangotoken')) {
                   $http.defaults.headers.common['Authorization'] = 'Token ' + $cookieStore.get('djangotoken');
                 }
                 else {
                   login.slideDown('fast');
                   main.hide();
                 }
              });
            }
         }
      })

To use it all my html was basically like this.

    <body auth-application>
      <div id="login-holder">
        ... login form
      </div>

      <div id="main">
        ... ng-view, or the bulk of your html
      </div>

From: stackoverflow.com/q/20498317

Back to homepage or read more recommendations: