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.

Answer 1

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']);

Answer 2

$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.

Answer 3

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.