How to handle authentication in Angular JS application

I am not sure about your backend, but this is how I would do it

• Create a separate login page (dedicated url not angular sub view ormodal dialog).
• If the user is not authenticated redirect to this loginpage. This is done by server redirects. This page may or may not useangular framework, as it just involves sending a user\password toserver.
• Make a POST (not AJAX request) from the login page, and verify on server.
• On the server set the auth cookie. (Different frameworks do it differently. ASP.Net sets form authentication cookie.)
• Once the user is authenticated redirect user to the actual angular app and load all its components.

This saves any code require to manage authentication on client side in Angular. If the user lands on this page he is authenticated and has the cookie.

Also default browser behavior is to send all cookies associated with a domain with each request, so you don't have to worry if angular is sending some cookie or not.

I use the http-auth-interceptor. http://ngmodules.org/modules/http-auth-interceptor

In my backend (asp.net mvc) I build a simple Authentication Service and return an http error 401 if the user is not authenticated. Then I handle the error with a login-view in the SPA site.

The ideas put forth by the previous answers will work, but I think they're overkill. You don't need anything this complex.

how I can add the cookie information while doing the next REST call

Turn on withCredentials by default inside $httpProvider like so:

app.config(['$httpProvider', function($httpProvider) {    $httpProvider.defaults.withCredentials = true;}]);

Then remove the wildcard (if you had one) from the CORS-related headers, and set allow-credentials, on the server side. In my case, using Python + Flask + Flask-Restful, it's super easy and looks like this:

import Flaskfrom flask_restful import Apiapp = Flask(__name__)api = Api(app)api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)]

Now cookies will be set and returned automatically and transparently by the browser. See these threads for more info:

• $http response Set-Cookie not accessible
• Angularjs $http does not seem to understand "Set-Cookie" in the response

when user will navigate throughout the application after log in I do want to check each time isAuthenticaed true or false

As suggested above, have the server return 401 if the auth session expires or is deleted, and use $httpInterceptor in Angular to catch this like so:

app.config(function($httpProvider) {    var interceptor =        function($q, $rootScope) {            return {                'response': function(response) {                    return response;                 },                'responseError': function(rejection) {                    if (rejection.status==401) {                        // Modify this part to suit your needs.                        // In my case I broadcast a message which is                        // picked up elsewhere to show the login screen.                        if (!rejection.config.url.endsWith('/login'))                        {                            $rootScope.$broadcast('auth:loginRequired');                        }                    }                    return $q.reject(rejection)                 }            }        };    $httpProvider.interceptors.push(interceptor);});