By Ravi

Implementing Authentication in Angular Applications

By Ravi

Authentication and authorization are important pieces on almost every serious application. Single Page Applications (SPAs) are no exception. The application may not expose all of its data and functionality to just any user. Users may have to authenticate themselves to see certain portions of the application, or to perform certain action on the application. To identify the user in the application, we need get the user logged in.

There is a difference in the way user management is implemented in traditional server-driven applications and Single Page Applications. The only way in which an SPA can interact with its server components is through AJAX. This is true even for logging in and logging out.

The server responsible for identifying the user has to expose an authentication endpoint. The SPA will send the credentials entered by the user to this endpoint to for verification. In a typical token based authentication system, the service may respond with an access token or with an object containing the name and role of the logged in user after validating the credentials. The client has to use this access token in all secured API requests made to the server.

As the access token will be used multiple times, it is better to store it on the client side. In Angular, we can store the value in a service or a value as they are singleton objects on the client side. But, if the user refreshes the page, the value in the service or value would be lost. In such case, it is better to store the token using one of the persistence mechanisms offered by the browser; preferably sessionStorage, as it is cleared once the browser is closed.

Implementing Login

Let’s have a look at some code now. Assume that we have all server side logic implemented and the service exposes a REST endpoint at /api/login to check login credentials and return an access token. Let’s write a simple service that performs the login action by hitting the authentication endpoint. We will add more functionality to this service later:

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $"/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
    }, function(error) {

    return deferred.promise;

  return {
    login: login

In actual code, you may want to re-factor the statement storing data to sessionStorage into a separate service, as this service gets multiple responsibilities if we do this. I am leaving it in the same service to keep the demo simple. This service can be consumed by a controller that handles the login functionality for the application.

Securing Routes

We may have a set of secured routes in the application. If a user is not logged in and attempts to enter one of those routes, the user should be directed to the login page. This can be achieved using the resolve block in the routing options. The following snippet gives an idea on the implementation:

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });

The resolve block can contain multiple blocks of statements that have to return promise objects on completion. Just to clarify, the name auth defined above is not defined by the framework; I defined it. You can change the name to anything based on the use case.

There can be multiple reasons to pass or reject the route. Based on the scenario, you can pass an object while resolving/rejecting the promise. We haven’t implemented the getLoggedInUser() method yet in the service. It is a simple method that returns the loggedInUser object from the service.

app.factory("authenticationSvc", function() {
  var userInfo;

  function getUserInfo() {
    return userInfo;

The objects sent via the promise in the above snippet are broadcasted via $rootScope. If the route is resolved, the event $routeChangeSuccess is broadcast. However, if the route is failed, the event $routeChangeError is broadcast. We can listen to the $routeChangeError event and redirect the user to the login page. As the event is at $rootScope level, it is better to attach handlers to the event in a run block.["$rootScope", "$location", function($rootScope, $location) {
  $rootScope.$on("$routeChangeSuccess", function(userInfo) {

  $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
    if (eventObj.authenticated === false) {

Handling Page Refresh

When a user hits refresh on a page, the service loses its state. We have to get the data from the browser’s session storage and assign it to the variable loggedInUser. As a factory is invoked only once, we can set this variable in an initialization function, as shown below.

function init() {
  if ($window.sessionStorage["userInfo"]) {
    userInfo = JSON.parse($window.sessionStorage["userInfo"]);


Logging Out

When a user logs out of the application, the corresponding API has to be invoked with the access token included in the request headers. Once the user is logged out, we should clear the data in sessionStorage as well. The following example contains the logout function that has to be added to the authentication service.

function logout() {
  var deferred = $q.defer();

    method: "POST",
    url: logoutUrl,
    headers: {
      "access_token": userInfo.accessToken
  }).then(function(result) {
    $window.sessionStorage["userInfo"] = null;
    userInfo = null;
  }, function(error) {

  return deferred.promise;


The approach for implementing authentication in Single Page Applications is quite different from that of traditional web applications. As the majority of the work is carried out on the client side, the state of the user also has to be stored somewhere in the client. It is important to remember that the state should be maintained and validated on the server as well, as a hacker can potentially steal the data stored on the client system.

The source code from this article is available for download on GitHub.

  • Mike

    Can you just use ‘return $….).then(function(result) {…; return userInfo; })’ instead of creating deferred object and then resolving/rejecting it manually? What is the benefit?

  • Maruf Siddiqui

    What happens if you open the site/app in a new tab. Will that work? It says here that `Opening a page in a new tab or window will cause a new session to be initiated.`

  • Ravi Kiran

    Mike, Sorry for catching late. You will not be able to catch the return value if you return the raw object. Because, $ runs asynchronously and we can’t say when it is going to end. The deferred object gets notified when the async execution is complete and it is capable of handling success/failure cases of the execution.

  • Ravi Kiran

    Maruf, Good point. Session storage is not shared across different instances even on the same browser. So, if you open a new tab, it asks for logging in. Local storage is shared, but local storage requires manual clean up on closing the last tab of the site.

    • Zoran

      nice code and it worked for me.

      for new tabs/windows it made sense to leave the code using session storage. but if user checked “remember me” than the user info was saved to local storage instead.

  • Fredrik, Thanks, I got the point. You mean, we can return promise of $http and have simple return statements returning objects inside success/failure callbacks. That sounds like a good approach. Using deferred object is just more explicit way.

  • Arvind Kumar

    If we implement the Remember me implement vai local storage then when logout then what happen and also when user already login and also use remember me checked then logout after that he want again login that time require to again fill the form the login page or bypass the login page? how to implement that functionality??

  • Anthony Wu

    I have a little concern with session hijacking, what if I open up Chrome’s dev tools and directly insert a new key called “userInfo”? Would it be better if we could do another backend verification on init() also? (instead of checking session storage directly. )

    • Anthony, Yes, you can do that too. Even in the current solution though the user is directed to second route, he can’t perform any action in the next page as all HTTP requests would be secured and token is checked in each of the requests.

  • MD

    Great article, thanks! One small detail for other readers who follow this tutorial: after you update authenticationSvc and add the getUserInfo() function, be sure to also update this:
    return {
    login: login
    to this:
    return {
    login: login,
    getUserInfo: getUserInfo
    Otherwise you’ll get error messages in your chrome developer/javascript console.

  • Kwabena Adu

    Thanks Ravi,
    What is your approach to clearing all data in service objects after the user logs out?

  • Kwabena,
    In the sample, I set the object that stores user info to null. You can also make the page refresh after logging out to reset state of the JS objects, but you have to clear the value stored in session storage.

  • Eran

    Hi, thanks for the article. Great Work!

  • Corsaro

    i m new to use this code, i try the autentication code but when i open with tool chrome see all the info user and pwd, where need to go this part for no see the info? thx

    • Don’t store password in browser storage. I didn’t store password in the demo.
      Just store user id and any data about the user that you would require in the subsequent API calls.

  • Mayank Sharma

    Hello Ravi, I am very new on Angularjs. Firstly, I want to make small app like on which i can login with hard coded username & password.I made it but i am doing like this:- var cname=$;var cpwd=$scope.password;
    $ = function() { if(cname!=”username” || cpwd!=”password”) {alert(“Please type valid username and password”);}
    else{window.location= ‘home.jsp’;}

    window.location is not suitable to do.I want to use it by route,but i dont understand how to use exactly,i tried but did not get result.Can you please help me by giving simple logic in controller file.

  • Jinith Joseph

    Hi Ravi, that was a great article. I have the similar king of set up in my project. You have detailed how we can authenticate and store a token generated from the server. Could you also give a brief description on how we can use this authentication token in all further POST calls to the server ? Do we use them in the headers ? What are the best practices in implementing that ?

    • Hi Jinith,
      Check the last code snippet in the article, it shows how you send the token to server using headers. But, it is not the only way. You have to send the token the way your server expects it. Till now, I saw headers in most of the examples on Node.js and ASP.NET, so header seems to be a good option.

      • Jinith Joseph

        Hi, Ravi thanks for the response. I was trying to attach the authentication headers for all the outgoing calls if they exists like :[‘$rootScope’, ‘$injector’, function ($rootScope, $injector) {
        $injector.get(“$http”).defaults.transformRequest = function (data, headersGetter) {
        if ($rootScope.oauth != null) {
        headersGetter()[‘AuthorizationToken’] = $rootScope.oauth.accessToken;
        headersGetter()[‘UserId’] = $rootScope.oauth.userName;
        if (data) {
        return angular.toJson(data);

        But on my WCF Web Service end, in Global.ascx I have few code to enable CORS :

        protected void Application_BeginRequest(object sender, EventArgs e)
        HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Origin”, “*”);
        if (HttpContext.Current.Request.HttpMethod == “OPTIONS”)
        HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS”);

        HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Headers”, “Content-Type, Accept”);
        HttpContext.Current.Response.AddHeader(“Access-Control-Max-Age”, “1728000”);

        When the headers are attached to the POST / GET calls this is rejecting the requests from client. CORS code works fine when there are no headers attached ( for my first call for login from the HTML 5 client ). Do you have any idea about this behaviour and how I can enable the requests with headers to go through ?

  • Mayank,

    You shouldn’t use window in your code, as it makes the controller hard to test. You may use $window instead, you can inject it into the controller and use it. Otherwise, you can also use $location to navigate to a different page.

    • Mayank Sharma

      Ya Ravi, I know window.location is not good approach and I tries directly $location.path(“testpage”) but it was not redirecting.Basically, my aim is to firstly authenticate through hard coded value of name & password and then only it should redirect.In javascript i know but in this i was not getting.So please help me out,i tried with ui route also but its redirecting not authenticating.

  • Hi Ravi, where do you add the init function? in your app.js?

    • It is added inside the authenticationSvc service. We are making this service responsible for holding the user’s information.

  • vijay kumar

    Hi Ravi,

    Great article, it’s working fine but i have doubt, when i refreshing the page session is expired. How to resolve the issue.

    Vijay ch.

    • Vijay,

      I am using sessionStorage to save the JWT and fetching it on every refresh to avoid accidental session expired notices. You may have missed some code to communicate with the sessionStorage and that may be causing expiry of session on refresh.

      • vijay kumar

        Thanks for your reply. In your code where app.js file included.

        • It is in the home folder. You have to run the app using the command “node app”, and make sure to have Node.js installed on your system.

      • majd hwas

        Hi Ravi ,really big thanks for this helpful tutorial, i have implementd all features but still tohandle the refresh of the page not clear, help me please.

  • What’s the point of “getUserInfo” ?
    thanks for the article

    • It returns the user info. The user info is read from session storage and stored in a variable when the application starts.

      • But what’s the point of this compared to directly giving the userInfo variable of the service? The userInfo is read from session storage *only* in the init, then the sessionStorage and userInfo are two distincts variables.

        • The value is stored to avoid accessing session storage everytime. If you want to compare directly with session storage, you can do that.

          • That’s not my point. Why do you have a getUserInfo method to get the userInfo ? Why not directly getting userInfo from this service? Are the watch good with getting the property through a method (getter/setter) ?

          • If you expose the userInfo object directly and if someone sets the value to something, then your code won’t work as expected. I wrote the getter method to avoid setting a value to the object. An alternate to this is, defining a get only property on the service object using Object.defineProperty.

            I hope that answers your question.

  • sree mohan

    how can i do this from controller?i am using local storage if user id is null route should be redirect to login page

  • Shivam

    Really helpful article sir. Thanks for sharing this with us. I have one query. Now, that I know how to handle page refreshes, I want to know how to handle “open in different tab” or “duplicate tab”. As of now, I redirect to login page. Any method(s)? For example, is there a way to remember page, or do i need to remember the login ids and re-fire all getData() requests? I have no clue. Help is requested. :)

    • Tummas Joensen

      You can store the access token with ngStorage. It will then be available in other tabs

      • Jayakumar Jayaraman

        What is access token ? How to generate ? And how to use it please ?

  • Nilesh

    Hi Ravi , Just want to check with you.. that is it necessary to install express , underscore to run this application.

    • Had you implemented it with codeigniter?

      • Nilesh

        No, Vanesh, I am using cordova with angular js , jquery and html5 .. where i am planning to use this .

  • I donloaded this code from github. Is app.js necessary to include or use in yourcase?

  • Subrahmanyam Baratam

    How to run this application on Node js, there is no grunt file in the project.

  • Rajendra Pandey

    Hi, I am new in angularjs and trying to create user authentication with angularjs and php since a week, but i am not got success in it. please help me what is folder and file structure of above code. or any link were i get sample code…

  • Michael Lukatchik

    Nice Article, Ravi! It helped me successfully implement authentication in my app!

  • $rootScope.$on(‘$routeChangeSuccess’, function(userInfo) {

    i see ti many features, but how i can get the access to object for example in view?

    • Jayakumar Jayaraman

      You can use $scope or $rootScope to access the objects in the view (pages).
      You may have to set the userInfo in the scope to access in the view

  • Lucas Tettamanti

    Something to mention, ‘auth’ (in this case) cannot be injected in a directive controller. Great article!

    • alain

      yes. i have this problem. did you know you to do it ? thanks

  • Ken

    This is such a great article! it helped me a lot. I do have one confusion. Where is the auth provider coming from? It’s currently in the homecontroller

  • pp

    great post. can you explain me why run init() function inside the authenticationSvc service? I can not understand this

    • Jayakumar Jayaraman

      init() is just a function used to initialise the userInfo data from $window.sessionStorage[“userInfo”] on browser refresh.

  • Jayakumar Jayaraman

    Very useful article…. can you please explain what is this access_token used for ?

    • access_token sent in the header of the $http request is used by the server to determine if the user is authenticated.

  • Vinod

    Hi My Name is Vinod i have the above code Authentication Services Login
    and Logout so, am new to Angular JS. am try in to do in my project is ::
    After Login the User then the login menu should hide and logout button
    should be display and session services should use angular js. AM use
    things :::::: HTML,CSS,BOOTSTRAP,jQuery,AJAX,Simple Angular JS and
    PHP. I hope you will help Thank You

  • Blowsie

    No need for the promises you can just return $http as it is already a promise

  • Shardul Singh

    Hey Ravi , great article for beginner like me helped me allot. One Small favor. Let say User logged in successfully and tries to open “/login” again. Since he/she already logged in, Only login page should not be displayed and redirected to let say “/” until he/she logged out. how do you write RESOLVE on routes.

  • alain

    very nice article. i set it up in my app but now i need to inject “auth” in a directive ( header ) to make it accessible in all the website. how to do this please ?

Get the latest in JavaScript, once a week, for free.