Lock 10 for Web

You're looking at the documentation for the easiest way of securing your website and mobile apps!

Lock is an embeddable login form, which is configurable to your needs and ready for use on mobile devices. It's easier than ever to add social identity providers to Lock, as well, allowing your users to login seamlessly using whichever providers make sense for your application. Check out one of the pages listed below to delve into details about Lock usage, if you know what you are looking for, or continue down this page for a basic installation and usage guide!

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.

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

Implementing Lock

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

// 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;
    }

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

Showing Lock

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

Displaying the User's Profile

// Verify that there's a token in localStorage
var token = localStorage.getItem('accessToken');
if (token) {
  showLoggedIn();
}

// Display the user's profile
function showLoggedIn() {
  var profile = JSON.parse(localStorage.getItem('profile'));
  document.getElementById('nick').textContent = profile.nickname;
}
 <h2>Welcome <span id="nick" class="nickname"></span></h2>

This example demonstrates using Lock 10 with a Single Page Application (SPA). To learn how Lock can be modified to provide frictionless authentication for any app, see the API Reference and the Configuration Options Reference. For details specifically about customizing the look and feel of Lock in your app, please take a look at the UI Customization page.

Start Using Lock

For more information on using Lock see the documentation.

<script src="https://cdn.auth0.com/js/lock/10.16/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.16/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>

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.