Using Lock With auth0.js

By nature, Lock and the Auth0.js SDK are different things. Lock provides a UI that is customizable (to an extent) with behavior that is customizable (to an extent). It is an easily deployed, easily used interface for Auth0 authentication in custom applications. It is also easily used within the Auth0 Hosted Login Page.

For simple uses, Lock is all that is necessary. However, while using Lock, if more customization is required in an application than Lock allows, functionality from the Auth0.js SDK can be used alongside Lock to meet those needs. An example might be using Lock to handle signups and logins, while using auth0.js to manage users (read and update user metadata, link user accounts together, and similar tasks).

Including auth0.js

If you are using the Auth0 CDN, you can also include the auth0.js script in the same manner:

<script src="https://cdn.auth0.com/js/auth0/8.10.1/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.20/lock.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-7.6.1.min.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.20/lock.min.js"></script>

If you installed Lock from npm, you should include auth0-js in your project dependencies and import it to pin the particular auth0-js version you're using. Before instantiating the Auth0 object, you will need to require auth0-js:

var auth0 = require('auth0-js');

Then, to use auth0.js, simply instantiate a new object:

var webAuth = new auth0.WebAuth({
  domain:       'YOUR_AUTH0_DOMAIN',
  clientID:     'YOUR_CLIENT_ID'
});
var auth0 = new Auth0({
  domain:       'YOUR_AUTH0_DOMAIN',
  clientID:     'YOUR_CLIENT_ID',
  callbackURL:  '{YOUR APP URL}',
  responseType: 'token'
});

If you need further detail about usage, check out the Auth0.js v8 Reference.