This document explains how to migrate Web Applications using Lock to universal login. For other migration scenarios see Migrating from Embedded to Universal Login.

When you use Lock v9 in a Web Application, your code does basically this:

  1. Initialize Lock:
var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');
  1. Show Lock specifying responseType: code when a login is required:
function login() {
    lock.show({
     auth: {
      redirectUrl: 'https://YOUR_APP/callback',
      responseType: 'code',
      params: {
        scope: 'openid profile email' 
      }
    }
  });
}
  1. In the web server, handle the callback, usually using a platform-specific OAuth library. This is what you would do in Node & Passport.
router.get('/callback',
  passport.authenticate('auth0', { failureRedirect: '/failure' }),
  function(req, res) {
    res.redirect(req.session.returnTo || '/user');
  });

Convert your Code to use Universal Login

In web applications, you don't need any client-side code to integrate universal login. Your application should perform these steps:

  1. When the application needs to authenticate, navigate to a /login route in your website. If you were using plain HTML to code the web views, it would be:
<a href="/login">Log In</a>
  1. Create a server-side route to handle /login that redirects to Auth0's /authorize endpoint. You can usually do that with a platform-specific OAuth library. The example below is for Node.js and Passport.
router.get('/login', passport.authenticate('auth0', {
  clientID: 'YOUR_CLIENT_ID',
  domain:  'YOUR_AUTH0_DOMAIN' ,
  redirectUri: https://YOUR_APP/callback,
  responseType: 'code',
  scope: 'openid profile email'}),
  function(req, res) {
    res.redirect("/");
});

After authentication is done, it will redirect to the /callback url as in the Lock-based implementation.

  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 universal login in web applications for different technologies in our Quickstarts.

Customizing the Login Page

When you integrate universal 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 customize the login page in your Dashboard under Hosted Pages, by enabling the Customize Login Page toggle.

Login Page

Customize Lock in the Login Page

The default login page for universal login with 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.

If you want to change any of Lock's configurable options, you can do so using the editor Dashboard under Hosted Pages. 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.

Login Page

Was this article helpful?