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.

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)

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="http://cdn.auth0.com/js/lock-7.min.js"></script>

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

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

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"
  }
}

webpack

If you are using webpack, you will need to install loaders ($ npm install --save brfs ejsify json-loader packageify transform-loader) and then use them in your webpack.config.js file:

loaders: [{
  test: /node_modules\/auth0-lock\/.*\.js$/,
  loaders: [
    'transform-loader/cacheable?brfs',
    'transform-loader/cacheable?packageify'
  ]
}, {
  test: /node_modules\/auth0-lock\/.*\.ejs$/,
  loader: 'transform-loader/cacheable?ejsify'
}, {
  test: /\.json$/,
  loader: 'json-loader'
}]

Documentation

You can find the full documentation for Lock on the Auth0 docs site.

• Complete API
• UI customization
• Single Page Applications implementation notes.
• Regular Web Applications implementing notes.
• Overlay vs Embedded mode
• Popup vs Redirect mode notes. What are the authentication modes?.
• Error customization notes.
• I18n notes.
• Events notes.
• Development notes.
• Release process notes.
• Auth0Lock playground
• Using Refresh Tokens
• Legacy Auth0Widget Migration guide to Auth0Lock

Demos

The support/development-demo 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 run demo from the root of this project.

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

Examples

The examples directory has some implementation samples you can find useful:

• Lock & Webpack sample

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.

Contributing

To run the tests:

Run grunt dev and point your browser to http://localhost:9999/test_harness.html to run the test suite.

Run grunt phantom if you have PhantomJS installed.

Run grunt integration (or npm test) if you have SauceLabs account. You will need a SAUCE_ACCESS_KEY and SAUCE_USERNAME env variables.

To publish a new version use:

  # release new version
  $ ./bin/version {patch,minor,major}

  # update remote repository
  $ git push origin master

  # and let Auth0's CI worry about the rest

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.