Angular 1.x Single Sign-On

Sample Project

Download this sample project configured with your Auth0 API Keys.

Single sign-on (SSO) makes it possible for a user to log into one client and then automatically be logged into other clients, regardless of the platform, technology, or domain the user is using. It works by means of a central authentication service, which Auth0 provides, which means you can easily implement SSO in your Angular apps.

How to Implement Single Sign-On with Auth0

To enable SSO for one of your clients (recall that each client is independent of one another), navigate to the clients section of the Auth0 Management Dashboard. Click on Settings for the client you would like to enable SSO for.

Near the bottom of the Settings page, toggle Use Auth0 instead of the IdP to do Single Sign On.

You can also set the client's SSO flag using the Auth0 Management API.

Once you have set the SSO flag in Auth0, you must add logic to your client to check the user's SSO status. This logic can be implemented either client-side (using JavaScript) or server-side.

Length of SSO Sessions

If the SSO flag is set for a client, Auth0 will maintain an SSO session for any user authenticating via that client. If the user remains active, the session will last no more than 7 days, but if not, the session will terminate after 3 days. To be considered active, the user must access the client that created the session within the given timeframe.

What is Single Log Out?

Single Logout is the process where you terminate the session of each application or service where the user is logged in. There may be up to three different layers of sessions for a user with SSO.

  • A session from an Identity Provider such as Google, Facebook or an enterprise SAML Identity Provider
  • A session from Auth0 if the above SSO flag is turned on
  • A session maintained by an application

See the Logout URL docs for information on terminating the first two sessions listed above.

Client-Side SSO

It may be the case that you'd like to enable SSO in two or more Angular 1.x applications. In this flow, the user would log into one of them (app1.com) and then try to access the second one (app2.com).

To use SSO in your Angular apps, you will first need to have angular-auth0 installed and loaded.

bower install --save angular-auth0

And then add the auth0.auth0 module and configure the angularAuth0Provider provider:

// app.js

(function () {

  'use strict';

  angular
    .module('app', ['auth0.auth0', 'auth0.lock', 'angular-jwt', 'ui.router'])
    .config(config);

  function config(angularAuth0Provider) {

    // Initialization for the angular-auth0 library
    angularAuth0Provider.init({
      clientID: 'YOUR_CLIENT_ID',
      domain: 'YOUR_AUTH0_DOMAIN'
    });
	
  }

})();

To determine whether the user has a valid SSO session in Auth0, a check needs to be made by sending a request to Auth0 with the getSSOData method from auth0.js. If there is SSO data present (meaning the user has an SSO session), then the user can be logged in by calling signin.

// components/auth/auth.service.js

(function () {

  'use strict';

  angular
    .module('app')
    .service('authService', authService);

  function authService($rootScope, angularAuth0, authManager, jwtHelper) {

    function checkAuthOnRefresh() {
      var token = localStorage.getItem('id_token');
      if (token) {
        if (!jwtHelper.isTokenExpired(token)) {
          if (!$rootScope.isAuthenticated) {
            authManager.authenticate();
          }
        }
      } else {
        angularAuth0.getSSOData(function (err, data) {
          if (!err && data.sso) {
            angularAuth0.signin({
              scope: 'openid name picture',
              responseType: 'token'
            });
          }
        });
      }
    }
  }

})();

To guarantee that the callback for Lock's authenticated event is called before auth checking has started, wrap the authService.checkAuthOnRefresh method with $timeout in app.run.js:

// app.run.js

(function () {

  'use strict';

  angular
    .module('app')
    .run(run);

  function run($timeout, authService) {
	
    $timeout(authService.checkAuthOnRefresh);
   
  }

})();

With SSO enabled in both applications, the user can log into one of them and then be automatically logged into the other.

Log Out from Auth0

To log the user out of their SSO session completely, call logout from auth0.js. You may optionally pass a returnTo key so that the user is taken back to the app once logout is complete. Your logout domain needs to be whitelisted in your application settings. Be sure to pass the client ID for the appropriate application as a client_id key in the logout method.

Note that you will also likely need to call the existing logout method from the authService that was created in the earlier steps so that the user's token and profile are removed from local storage for the app being used.

// components/home/home.controller.js

(function () {

  'use strict';

  angular
    .module('app')
    .controller('HomeController', HomeController);

  function HomeController(authService, angularAuth0) {

    vm.logoutFromAuth0 = function() {
      angularAuth0.logout({ 
        returnTo: 'http://localhost:3000/',
        client_id: YOUR_CLIENT_ID 
      });
      authService.logout();
    }

  }

}());
Previous Tutorial
11. Customizing Lock
Next Tutorial
13. Passwordless
Use Auth0 for FREECreate free Account