Migrate SPAs using Lock 10+ to Centralized Login

This document explains how to migrate Single Page Applications using Lock to centralized login. For other migration scenarios see Migrating from Embedded to Centralized Login.

When you use Lock, your code does basically this:

  1. Initialize Lock:
var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    auth: {
      redirectUrl: 'https://YOUR_APP/callback',
      responseType: 'token id_token',
      audience: 'https://' + 'YOUR_AUTH0_DOMAIN' + '/userinfo',
      params: {
        scope: 'openid'
      }
    }
});
  1. Set the session and update the UI in the authenticated event:
lock.on('authenticated', function (authResult) {
    if (authResult && authResult.accessToken && authResult.idToken) {
      setSession(authResult); // set the local session
    }
    displayButtons(); // refresh the UI to indicated a ‘logged-in’ state.
});
  1. Handle errors in the authorization_error event:
// Handle authorization errors
lock.on('authorization_error', function (err) {
    console.log(err);
    alert('Error: ' + err.error + '. Check the console for further details.');
    displayButtons();
});
  1. Show Lock when a login is required:
function login() {
    lock.show();
}

To use centralized login, you need to use auth0.js to perform the same tasks:

  1. Initialize auth0.js, using the same parameters as when initializing Lock:
var webAuth = new auth0.WebAuth({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientID: 'YOUR_CLIENT_ID',
  responseType: 'token id_token',
  audience: 'https://' + YOUR_AUTH0_DOMAIN + '/userinfo',
  scope: 'openid',
  redirectUri: 'https://YOUR_APP/callback'
});
  1. Create a handleAuthentication function that processes successful and failed authentication attempts calling parseHash:
function handleAuthentication() {
   webAuth.parseHash(function(err, authResult) {
     if (authResult && authResult.accessToken && authResult.idToken) {
       setSession(authResult);
     } else if (err) {
        console.log(err);
      alert(
        'Error: ' + err.error + '. Check the console for further details.'
      );
    }
    displayButtons();
  });
}
  1. Invoke the handleAuthentication() function on page load so it tries to parse the hash if it's present.

  2. Redirect to the /authorize endpoint when you need to log the user in your app.

function login() {
    webAuth.authorize();
}
  1. Review if you are using any legacy authentication flow in your application, and adjust your code accordingly.

You can find complete examples of implementing centralized login in Single Page Applications for different technologies in our Quickstarts.

Customizing the Centralized Login Page

When you integrate centralized login in your application, you redirect the user to the /authorize endpoint of your Auth0 tenant. If Auth0 needs to authenticate the user, it will show the default login page.

You can enable a custom Hosted Login Page by navigating to Hosted Pages and enabling the Customize Login Page toggle.

Hosted Login Page

Customize Lock in the Hosted Login Page

The default login page for your tenant is a template that will use Lock to provide your users with an attractive interface and smooth authentication process. You can look over that template and use it as a starting point if you choose to customize it in any way. The default template uses Lock v10, which is safe to use in the Hosted Login Page.

If you want to change any of Lock's configurable options, you can do so using the Hosted Pages editor interface. These options can alter the behavior of Lock itself, or the look and feel of the widget using the theming options. See the configuration documentation for details on how to customize Lock.

When you're done making changes to the code, click Save to persist the changes.

Hosted Login Page

Was this article helpful?