CODEWITHSUNDEEP
node.jsangularjs
runtimeZero
runtimeZero

Reputation: 28116

Performing simple authentication in Angular and Node

I have been struggling with performing simple authentication in my angular node application. I am well aware that there are ready to use angular-express yeoman kits out there. But I want to understand this fuly and hence the attempt.

What I have been able to do so far is create a login form which connects to node server. It sens login name and password and receives a response back.

Where I am stuck is how to convert this simple interaction into a authentication process.

My Directory structure is as below

--ParentDirectory/
   -client/
     --css/
     --lib/   /*all angular and jquery library files*/
     --src/  /* All other angular modules, directives etc */

     --app.js
     --index.html  /* default page associated with app.js

     --login.js   /*module login is independent of app.js module */
     --login.html
  -server/
    --server.js /*restify code sits here */

app.js is where the main app resides. So far it looks like :

angular.module('app',['']);

angular.module('app').controller('mainCtrl',function($scope){
  $scope.hello = "Hello World";
});

Now First things first.. when a user visits my website i.e index.html page.. they will end up in this app and I would like for them to be re-directed to login.html page if they are not authenticated. Any clues on how to achieve that ?

Moving on..

Login.html simply asks for a username and password (not showing the code here to keep things compact)

Login.js looks like this:

angular.module('loginApp',['common.webservice'])
.controller('loginCtrl',['$scope','WSLogin','$location','$window','Authen',function($scope,WSLogin,$location,$window,Authen){
  $scope.message;

  $scope.submit = function(){

    var temp = {logonID: $scope.username,password: $scope.password};

    WSLogin.save(temp,function(result){
      Authen.isLogged = true;
      $window.sessionStorage.token = result.token;
      $scope.message = result.token;
      $location.path("/main");
    },function(err){
      $scope.message = "Authentication failed. Pls retry";
    });

 };

  $scope.logout = function(){

    if (AuthenticationService.isLogged){
      Authen.isLogged = false;
      delete $window.sessionStorage.token;
      $location.path("/");
    }

  }

}])

.factory('Authen', function() {
  var auth = { isLogged :false };

  return auth;
});

WSLogin is a resource that connects to the node serve on the path user/authenticate. This webservice is working fine so far. [not showing the code here to keep things compact]

The server.js file looks like this:

var restify = require('restify');
var server = restify.createServer({
  log: log,
  name: 'demo'
});


server.listen(12345, function(){
  console.log('%s listening at %s', server.name,server.url);
});


server.post('/user/authenticate',function(req,res,next){

    if (!(req.params.logonID === "test" && req.params.password === "test")) {
       res.send(401, 'Wrong user or password');
       return;
    }

    var profile = {
      first_name: 'John',
      last_name: 'Doe',
      email: '[email protected]',
      id: 123
    };

    // we are sending the profile inside the token
   res.json({token:profile);

  });

How can I patch things up so that this somewhat resembles a authentication system. I have picked up tips from various blogs, sites etc.. but no luck implementing them.

Upvotes: 0

Views: 208

Answers (1)

dylants
dylants

Reputation: 23400

I understand you want to know how things are built, but I highly recommend picking up Passport to use on the Node/server side for authentication. With that said, in your implementation of login, it might be easier to include a cookie with the token in the response, rather than returning the token in the response. The code can then return a 200 (or 201) response code to indicate the login was successful, but by moving the token to a cookie, the client code doesn't have to deal with sending the token on future requests -- it's sent automatically in a cookie.

Moving on to your client side questions, keep in mind that you would enable security to protect resources on the server side. Anything you put in your client side JavaScript code can be read by anyone. So in the end these APIs that return protected data are the ones that need to be protected. Again, Passport provides an easy way to protect an API, but you could validate that each API request contains this token (or cookie) prior to providing the data.

In the case that the request is not authorized (it doesn't contain the token, or the token is invalid), you can return a 401 (Unauthorized) response. In the client side code, you can check for this and automatically route the user to the Login page.

Using Angular, one pattern to accomplish this is to use httpProvider Interceptors which allow you to hook into each HTTP request. You could check for a responseError with a status of 401, and route them to the Login page.

Upvotes: 2

Related Questions