auth0-lock

Auth0 Lock

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

The Auth0 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)

Install

From npm:

npm install auth0-lock

From bower:

bower install auth0-lock

Or our CDN:

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

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

<!-- Latest patch release -->
<script src="http://cdn.auth0.com/js/lock-6.0.0.min.js"></script>

Usage

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

API

Auth0Lock(clientID, domain[, options])

Initialize Auth0Lock with a clientID and the account's domain.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

lock.show();

Note: For a full detail on the initialization configuration check the wiki article.

.show(options[, callback])

Open the widget on signin mode with signup and reset button actions if enabled for the configured/default account connection.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// normal display
lock.show(options);

Note: Check the Auth0Lock customization article for more examples and options index.

.showSignin(options[, callback])

Open the widget on signin mode, but withouht the bottom signup nor reset button actions. This method is useful when your site has custom signup and reset links at a different form.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// normal display
lock.showSignin(options);

Note: Check the Auth0Lock customization article for more examples and options.

.showSignup(options[, callback])

Open the widget on signup mode, but withouht the cancel button action to go back to signin. This method is useful when your site has custom signin and reset links at a different form.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// normal display
lock.showSignup(options);

Note: Check the Auth0Lock customization article for more examples and options.

.showReset(options[, callback])

Open the widget on reset mode, but withouht the bottom cancel button action to go back to signin. This method is useful when your site has custom signin and signup links at a different form.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// normal display
lock.showReset(options);

Note: Check the Auth0Lock customization article for more examples and options.

.hide([callback])

Close the widget and invoke callback when removed from DOM.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// normal display
lock.show(options);

// trigger hide when esc key pressed
document.addEventListener('keypress', function(e) {
  // hide if esc
  lock.hide();
}, false);

.logout([query])

Log out loggedin user with optional query parameters for the GET request.

var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');

// Call logout with query parameters
lock.logout({ ref: window.location.href });

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:9999/ 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.

Resources

• UI customization for the Auth0Lock.
• Error customization notes.
• Single Page Applications (SPA) notes.
• I18n notes.
• Events notes.
• Development notes.
• Release process notes.
• Legacy auth0-widget< v6.0.0 repository and docs.
• Auth0 Lock Playground