Lock 9 for Web

This document covers an outdated version of Lock. We recommend you to upgrade to v10.

Lock Image

Auth0 is an authentication broker that supports social identity providers as well as enterprise identity providers such as Active Directory, LDAP, Google Apps, Salesforce.

Lock makes it easy to integrate SSO in your app. You won't have to worry about:

  • Having a professional looking login dialog that displays well on any resolution and device.
  • Finding the right icons for popular social providers.
  • Remembering what was the identity provider the user chose the last time.
  • Solving the home realm discovery challenge with enterprise users (i.e.: asking the enterprise user the email, and redirecting to the right enterprise identity provider).
  • Implementing a standard sign in protocol (OpenID Connect / OAuth2 Login)

Lock Sign Up

You can try it out yourself online at our Auth0 Lock playground.

Install

From npm:

npm install auth0-lock

From bower:

bower install auth0-lock

Or our CDN:

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

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

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

Replace .x and .y with the latest minor and patch release numbers from the Lock Github repository.

If you are targeting mobile audiences, it's recommended that you add:

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

Browserify

If you are using browserify to build your project, you will need to add the following transformations required by Auth0 Lock:

{
  "devDependencies": {
    "brfs": "0.0.8",
    "ejsify": "0.1.0",
    "packageify": "^0.2.0"
  }
}

Initialization

Auth0Lock v9 can be initialized with just a clientID and domain, or it can also take a third parameter, an options object.

// Initialize with clientID and domain
var lock = new Auth0Lock(clientID, domain);

// Or, initialize with options
var lock = new Auth0Lock(clientID, domain, options);

Parameters

The possible parameters are detailed below.

  • clientID {String}: Your application clientID in Auth0.
  • domain {String}: Your Auth0 domain. Usually <account>.auth0.com.
  • options {Object}:
    • cdn {String}: Use as CDN base url. Defaults to domain if it doesn't equal *.auth0.com.
    • assetsUrl {String}: Use as assets base url. Defaults to domain if it doesn't equal *.auth0.com.
    • useCordovaSocialPlugins {boolean}: When Lock is used in a Cordova/Phonegap application, it will try authenticating with social connections using a native plugin. The only plugin supported is phonegap-facebook-plugin but more will come soon.

Usage

You can use Auth0Lock with Popup mode or Redirect mode. To learn more about these modes, you can read the Authentication Modes page. There are different ways of implementing them according to your application needs. To see what kind of settings you should be using you can check the Types of Applications article.

// Initialize Auth0Lock with your `clientID` and `domain`
var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// and deploy it
var login = document.querySelector('a#login')

login.onclick = function (e) {
  e.preventDefault();
  lock.show(function onLogin(err, profile, id_token) {
    if (err) {
      // There was an error logging the user in
      return alert(err.message);
    }

    // User is logged in
  });
};

This is just one example of how Auth0Lock could work with a Single Page Application (SPA). Read the Single Page Applications and the Regular Web Applications articles for a full explanation on how to implement those scenarios with Auth0 Lock and when to use each.

Examples

The example directory has a ready-to-go app. In order to run it you need node installed.

Then execute npm i to install dependencies (only once) and npm example from the root of this project.

Finally, point your browser at http://localhost:3000/ and play around.

Browser Compatibility

We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 9. We currently use zuul along with Saucelabs to run integration tests on each push.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Resources