How to store user session in AngularJS?

Question

I have just started using AngularJS and I'm trying to store user session on my AngularApp.

First step to submit username and password works. After that, I store the username retrieved from the service in the $rootScope. The next page can display the username stored.

But after a refresh, the $rootScope is empty.

I'm trying to do an authentication system as simple as possible.

myApp.controller('loginController', ['$scope', '$rootScope', '$location', 'AuthService', '$route',
  function ($scope, $rootScope, $location, AuthService, $route) {

      $scope.login = function (credentials) {
        AuthService.login(credentials).then(function (response) {
          if(response.data == "0"){
            alert("Identifiant ou mot de passe incorrect");
          }
          else {
            // response.data is the JSON below 
            $rootScope.credentials = response.data;           
            $location.path("/");
          }
        });
      };

}]);

AuthService.login() makes a $http request.

JSON

 {user_id: 1, user_name: "u1", user_display_name: "Steffi"}

HTML :

 <div>Welcome {{ credentials.user_display_name }}!</div>

I tried a lot of tutorials, but I can't make session work. I already used UserApp but it's not ok to me. I would like to create my own simple authentication.

Possible duplicate of stackoverflow.com/questions/23640476/… — Ishan Chatterjee
– Ishan Chatterjee, Commented May 15, 2014 at 15:34

Community · Accepted Answer · 2020-06-20 09:12:55Z

13

You can use

ngStorage

An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.

Differences with Other Implementations

No Getter 'n' Setter Bullshit - Right from AngularJS homepage: "Unlike other frameworks, there is no need to [...] wrap the model in accessors methods. Just plain old JavaScript here." Now you can enjoy the same benefit while achieving data persistence with Web Storage.

sessionStorage - We got this often-overlooked buddy covered.

Cleanly-Authored Code - Written in the Angular Way, well-structured with testability in mind.

No Cookie Fallback - With Web Storage being readily available in all the browsers AngularJS officially supports, such fallback is largely redundant.

A sample example is shown below

Working Demo

var eS = angular.module('exampleStore', ['localStorage']);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 15, 2014 at 15:48

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

caub Over a year ago

I think it's more vulnerable to XSS

simeg · Accepted Answer · 2016-10-25 12:13:53Z

9

$rootScope will always reset when the page refreshes, since it's a single-page app.

You need to use something that persists client-side, such as a cookie or sessionStorage (as they both have an expiration time). Take a look at the documentation for $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore

Remember, sensitive session information should be encrypted.

edited Oct 25, 2016 at 12:13

simeg

1,8792 gold badges27 silver badges34 bronze badges

answered May 15, 2014 at 15:38

Andrew Church

1,39111 silver badges13 bronze badges

3 Comments

Steffi Over a year ago

Can I use $cookieStore for an authentication system ?

Steffi Over a year ago

I think $cookieStore can make it work. Thanks Andrew.

Andrew Church Over a year ago

Yes I have used $cookieStore in the past.

Bram E Pramono · Accepted Answer · 2014-05-15 15:50:00Z

5

You need to create an api on your server to collect current user. This api must return the same user object as the one you have after you logged in.

For every $route.path you want to secure inside $routeProvider, call this api in the controller using ng-init. If the api returns an object, add the object to your $rootScope, otherwise, force user to the login page.

answered May 15, 2014 at 15:50

Bram E Pramono

1353 bronze badges

Collectives™ on Stack Overflow

How to store user session in AngularJS?

3 Answers 3

ngStorage

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related