Client-side Single Sign-On (Single-Page Apps)
To log a user in silently (that is, without displaying the Lock screen) the following conditions need to be met:
- 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
- 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.
- 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
signinfunction of the auth0.js Library, or by passing the
connectionquery string parameter when calling the
/authorizeendpoint of the Authentication API
The SSO scenario
In our SSO scenario, let's say we have 3 applications
- App 1: app1.com (Single-Page App)
- App 2: app2.com (Single-Page App)
- App 3: app3.com (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.
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
If the user logged out from app1.com, then we want to clean up the token on app2.com (and app3.com). 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.