Client-side Single Sign-On (Single-Page Apps)


This document covers an outdated version of the Auth0 authentication pipeline. We recommend you use the current version. For more on the latest authentication pipeline refer to Introducing OIDC Conformant Authentication.

To log a user in silently (that is, without displaying the Lock screen) the following conditions need to be met:

  1. The Application needs to be configured to Use Auth0 instead of the IdP to do Single Sign-on in the Applications section of the Auth0 Management Dashboard
  2. A Single Sign-on (SSO) cookie must exist for the tenant's domain. In other words the user must have signed in previously, and the SSO cookie which was saved is still valid.
  3. When calling the Auth0 authentication endpoint, the connection name is passed along for which the user must be signed in. This connection name is the same as the one specified in the SSO cookie. You can pass the connection name along either as a parameter when calling the signin function of the auth0.js Library, or by passing the connection query string parameter when calling the /authorize endpoint of the Authentication API

The SSO scenario

In our SSO scenario, let's say we have 3 applications

  • App 1: (Single-Page App)
  • App 2: (Single-Page App)
  • App 3: (Regular Web app)

If a user logs in to any of these applications, and then subsequently navigates from this application to any of the other applications, we would want the user to be logged in automatically.

In this document we will be looking specifically how to achieve this in a Single-Page (JavaScript) Application

If a users logs in to any of the applications and then subsequently tries to log in to any of the other applications, you can check to see whether an SSO session is active for that user by making use of the getSSOData function in the auth0.js library.

This function will return an ssoData object which will indicate whether an active SSO session exist. The ssoData object will contain the fields as per the following example:

Passing the Connection Name when logging the user in

You can then use this information to call the signin function to log the user in. When you call the signin function you pass along the name of the connection used in the active SSO session as the connection parameter. Auth0 will determine that an SSO cookie is saved for that connection, and will log the user directly without displaying the Lock user interface.

Full SSO Sample Code

Below is an expanded code sample of how you can implement this in a SPA application using jQuery to either show or hide the Login button or user information depending on whether a user is logged in or not.

The full code sample for both the SPA applications as well as the normal web application can be found in this github repository

Single Logout

If the user logged out from, then we want to clean up the token on (and Read more about Single Logout.

To do that, you have to check every X amount of time whether the SSO session is still alive in Auth0. If it is not, then remove the token from Local Storage for the application. This will ensure that the user's local session is cleared.