Lock 10 for Web

Lock is an embeddable login form, configurable to your needs and ready for use on web apps. It enables you to easily add social identity providers to Lock, allowing your users to login seamlessly using any provider they want.

Lock is also available for use within Auth0's Hosted Login Page, which is the simplest and most secure method by which to authenticate users for your applications.

Lock 10 Installation

You can install Lock 10 via several methods. Select any of the following installation sources that best suit your environment and application.

Installation Sources

Install via npm:

npm install auth0-lock

Install via bower:

bower install auth0-lock

Include via our CDN (Replace .x and .y with the latest minor and patch release numbers from the Lock Github repository):

<!-- Latest minor release -->
<script src="https://cdn.auth0.com/js/lock/10.x/lock.min.js"></script>

<!-- Latest patch release (recommended for production) -->
<script src="https://cdn.auth0.com/js/lock/10.x.y/lock.min.js"></script>

It is recommended that production applications use a specific patch version, or at the very least a specific minor version. Regardless of the method by which Lock is included, the recommendation is that the version should be locked down and only manually updated, to ensure that those updates do not adversely affect your implementation. Check the GitHub repository for a current list of releases.

Mobile

If you are targeting mobile audiences, Auth0 recommends that you add the following meta tag to your application's head:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Bundling Dependencies

If you are using browserify or webpack to build your project and bundle its dependencies, after installing the auth0-lock module, you will need to bundle it with all its dependencies. Examples are available for Browserify and webpack.

Usage

1. Initializing Lock

First, you'll need to initialize a new Auth0Lock object, and provide it with your Auth0 client ID (the unique client ID for each Auth0 client app, which you can get from the management dashboard) and your Auth0 domain (i.e. jeffstest.auth0.com).

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN'
);

2. Authenticating and Getting User Info

Next, listen using the on method for the authenticated event. When the event occurs, use the accessToken which was received to call the getUserInfo method and acquire the user's profile information (as needed). You can also save the token or profile to localStorage for later use.

// Listening for the authenticated event
lock.on("authenticated", function(authResult) {
  // Use the token in authResult to getUserInfo() and save it to localStorage
  lock.getUserInfo(authResult.accessToken, function(error, profile) {
    if (error) {
      // Handle error
      return;
    }

    document.getElementById('nick').textContent = profile.nickname;

    localStorage.setItem('accessToken', authResult.accessToken);
    localStorage.setItem('profile', JSON.stringify(profile));
  });
});

You can then manipulate page content and display profile information to the user (for example, displaying their name in a welcome message).

 <h2>Welcome <span id="nick" class="nickname"></span></h2>

Note that if you are storing the user profile, you will want to JSON.stringify the profile object and then, when using it later, JSON.parse it, because it will need to be stored in localStorage as a string rather than a JSON object.

3. Showing Lock

Here you're showing the Lock widget after the user clicks a login button; you can just as easily show Lock automatically when arriving at a page by just using lock.show(); on page load.

This will show the Lock widget, and paired with the above, you're now ready to handle logins!

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});

Browser Compatibility

Browser compatibility is ensured for Chrome, Safari, Firefox and IE >= 10. Auth0 currently uses zuul along with Saucelabs to run integration tests on each push.

More Examples

The below widget displays brief examples of implementing Auth0 in several ways: Lock as a modal "popup" widget, Lock embedded inline in a div, Lock Passwordless, a custom UI with Auth0.js, and a simple link using the API.

<script src="https://cdn.auth0.com/js/lock/10.20/lock.min.js"></script>
<script>
  var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    auth: {
      redirectUrl: 'https://YOUR_APP/callback',
      responseType: 'code',
      params: {
        scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
      }
    }
  });
</script>
<button onclick="lock.show();">Login</button>
<div id="root" style="width: 320px; margin: 40px auto; padding: 10px; border-style: dashed; border-width: 1px; box-sizing: border-box;">
    embedded area
</div>
<script src="https://cdn.auth0.com/js/lock/10.20/lock.min.js"></script>
<script>
  var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    container: 'root',
    auth: {
      redirectUrl: 'https://YOUR_APP/callback',
      responseType: 'code',
      params: {
        scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
      }
    }
  });
  lock.show();
</script>
<script src="https://cdn.auth0.com/js/lock-passwordless-2.2.min.js"></script>
<script>
  var lock = new Auth0LockPasswordless('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');
  function open() {
    lock.sms({
      callbackURL: 'https://YOUR_APP/callback',
      authParams: {
        scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
      }
    });
  }
</script>
<button onclick="window.open();">SMS</button>
<script src="https://cdn.auth0.com/js/lock-passwordless-2.2.min.js"></script>
<script>
  var lock = new Auth0LockPasswordless('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');
  function open() {
    lock.emailcode({
      callbackURL: 'https://YOUR_APP/callback',
      authParams: {
        scope: 'openid email'  // Learn about scopes: https://auth0.com/docs/scopes
      }
    });
  }
</script>
<button onclick="window.open();">Email Code</button>
<button class="signin-google">Sign in with Google (redirect)</button><br>
<button class="signin-google-popup">Sign in with Google (popup)</button><br>
<br><p>--- or ---</p>
<label>Email</label><input type="text" id="email"><br>
<label>Password</label><input type="password" id="password"><br>
<button class="signin-db">Sign in with Email/Password</button>

<script src="https://cdn.auth0.com/js/auth0/8.7/auth0.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
  var webAuth = new auth0.WebAuth({
    domain:         'YOUR_AUTH0_DOMAIN',
    clientID:       'YOUR_CLIENT_ID',
    redirectUri:    'https://YOUR_APP/callback'
  });
  // sign-in with social provider with plain redirect
  $('.signin-google').on('click', function() {
    webAuth.authorize({
      connection: 'google-oauth2' // use connection identifier
    });
  });
  // sign-in with social provider using a popup (window.open)
  $('.signin-google-popup').on('click', function() {
    webAuth.popup.authorize({
      connection: 'google-oauth2'
    });
  });

  $('.signin-db').on('click', function() {
    webAuth.redirect.loginWithCredentials({
      connection: 'Username-Password-Authentication',
      username: 'testuser',
      password: 'testpass',
      scope: 'openid'
    });
  });
  // Parse the authentication result
  webAuth.parseHash((err, authResult) => {
    if (authResult) {
      // Save the tokens from the authResult in local storage or a cookie
      localStorage.setItem('access_token', authResult.accessToken);
      localStorage.setItem('id_token', authResult.idToken);
    } else if (err) {
      // Handle errors
      console.log(err);
    }
  });
</script>

Next Steps

This document has shown how to use Lock 10 within a Single Page Application (SPA). Take a look at the following resources to see how Lock can be used with other kinds of web apps, or how it can be customized for your needs: