Client-side SSO (Single Page Apps)

Let's say you have three applications:

  • App 1: (single page app)
  • App 2: (single page app)
  • App 3: (regular web app)

You can see an example of a SPA configured to use SSO in this github repository

The user logs in on and tries to access Since is a Single Page App you need to have some code like the following to do SSO. This code should be on every SPA you have (In this case App1 and App2).:

<script type="text/javascript">
  // hide the page in case there is an SSO session (to avoid flickering) = 'none';

  // instantiate Lock
  var lock = new Auth0Lock(''YOUR_CLIENT_ID', ''YOUR_AUTH0_DOMAIN');
  var auth0 = new Auth0({
    domain: ''YOUR_AUTH0_DOMAIN',
    clientID: ''YOUR_CLIENT_ID',
    callbackOnLocationHash: true

  // Handle authenticated event to store id_token in localStorage
  lock.on("authenticated", function (authResult) {
    isAuthCallback = true;

    lock.getProfile(authResult.idToken, function (error, profile) {
      if (error) {
        // Handle error

      localStorage.setItem('userToken', authResult.idToken);

      goToHomepage(authResult.state, authResult.idToken);

  var isAuthCallback = false;

  // Get the user token if we've saved it in localStorage before
  var idToken = localStorage.getItem('userToken');
  if (idToken) {
    // This would go to a different route like
    // window.location.href = '#home';
    // But in this case, we just hide and show things
    goToHomepage(getQueryParameter('targetUrl'), idToken);
  } else {
    // user is not logged, check whether there is an SSO session or not
    auth0.getSSOData(function (err, data) {
      if (!isAuthCallback && !err && data.sso) {
        // there is! redirect to Auth0 for SSO
          scope: 'openid name picture',
          params: {
            state: getQueryParameter('targetUrl')
      } else {
        // regular login = 'inline';

  // Showing Login
  $('.btn-login').click(function (e) {
      auth: {
        params: {
          scope: 'openid name picture'


<!-- Regular login -->
  <button onclick="">Login</button>

If the single sign on happens against (a regular web app), then you have to redirect to Read more about this on Single Sign On with Regular Web Apps.

Single Logout

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

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 storage for the app.

setInterval(function() {
  // if the token is not in local storage, there is nothing to check (i.e. the user is already logged out)
  if (!localStorage.getItem('userToken')) return;

  auth0.getSSOData(function (err, data) {
    // if there is still a session, do nothing
    if (err || (data && data.sso)) return;

    // if we get here, it means there is no session on Auth0,
    // then remove the token and redirect to #login
    window.location.href = '#login'

}, 5000)