auth0-lock
Advanced tools
Auth0 is an authentication broker that supports both social and enterprise identity providers, including Active Directory, LDAP, Google Apps, and Salesforce.
From CDN
<!-- Latest patch release (recommended for production) -->
<script src="https://cdn.auth0.com/js/lock/11.23.1/lock.min.js"></script>
From npm
npm install auth0-lock
Then you can import Auth0Lock or Auth0LockPasswordless like this:
import Auth0Lock from 'auth0-lock';
// OR
import { Auth0Lock } from 'auth0-lock';
import { Auth0LockPasswordless } from 'auth0-lock';
After installing the auth0-lock module, you'll need to bundle it up along with all of its dependencies. See examples for browserify and webpack.
It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users. You can find instructions for building your app for production with different module bundlers here.
If you are targeting mobile audiences, we recommended that you add:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Lock uses Cross-Origin Authentication, make sure you understand the considerations you need to take into account by reading the Cross-Origin Authentication documentation.
Initializes a new instance of Auth0Lock configured with your application clientID and your account's domain at Auth0. You can find this information in your application settings.
var clientId = "YOUR_AUTH0_APP_CLIENTID";
var domain = "YOUR_DOMAIN_AT.auth0.com";
var lock = new Auth0Lock(clientId, domain);
var accessToken = null;
var profile = null;
lock.on("authenticated", function(authResult) {
lock.getUserInfo(authResult.accessToken, function(error, profileResult) {
if (error) {
// Handle error
return;
}
accessToken = authResult.accessToken;
profile = profileResult;
// Update DOM
});
});
Initializes a new instance of Auth0LockPasswordless configured with your application clientID and your account's domain at Auth0. You can find this information in your application settings.
If both SMS and email passwordless connections are enabled in the dashboard, Lock will pick email by default. If you want to conditionally pick email or SMS, use the allowedConnections option, for example: allowedConnections: ['sms'].
For more information, read our passwordless docs.
var clientId = "YOUR_AUTH0_APP_CLIENTID";
var domain = "YOUR_DOMAIN_AT.auth0.com";
var lock = new Auth0LockPasswordless(clientId, domain);
var accessToken = null;
var profile = null;
lock.on("authenticated", function(authResult) {
lock.getUserInfo(authResult.accessToken, function(error, profileResult) {
if (error) {
// Handle error
return;
}
accessToken = authResult.accessToken;
profile = profileResult;
// Update DOM
});
});
Once the user has logged in and you are in possession of an access token, you can obtain the profile with getUserInfo.
lock.getUserInfo(accessToken, function(error, profile) {
if (!error) {
alert("hello " + profile.name);
}
});
Lock will emit events during its lifecycle.
show: emitted when Lock is shown. Has no arguments.hide: emitted when Lock is hidden. Has no arguments.unrecoverable_error: emitted when there is an unrecoverable error, for instance when no connection is available. Has the error as the only argument.authenticated: emitted after a successful authentication. Has the authentication result as the only argument.authorization_error: emitted when authorization fails. Has the error as the only argument.hash_parsed: every time a new Auth0Lock object is initialized in redirect mode (the default), it will attempt to parse the hash part of the URL looking for the result of a login attempt. This is a low-level event for advanced use cases and authenticated and authorization_error should be preferred when possible. After that, this event will be emitted with null if it couldn't find anything in the hash. It will be emitted with the same argument as the authenticated event after a successful login or with the same argument as authorization_error if something went wrong. This event won't be emitted in popup mode because there is no need to parse the URL's hash part.forgot_password ready: emitted when the "Forgot password" screen is shown.forgot_password submit: emitted when the user clicks on the submit button of the "Forgot password" screen.signin submit: emitted when the user clicks on the submit button of the "Login" screen.signup submit: emitted when the user clicks on the submit button of the "Sign up" screen.signup success: emitted when the user successfully signs up.signup error: emitted when signup fails. Has the error as an argument.federated login: emitted when the user clicks on a social connection button. Has the connection name and the strategy as arguments.sso login: emitted when the user clicks on an enterprise SSO connection button. Has the lock ID, connection object, and field name as arguments.Displays the widget, allowing you to override some options.
allowedConnections, auth.params, allowLogin, allowSignUp, allowForgotPassword, initialScreen, rememberLastLogin, flashMessage and languageDictionary. See below for the details. Keep in mind that auth.params will be fully replaced and not merged.// without options
lock.show();
// will override the allowedConnections option passed to the constructor, if any
lock.show({allowedConnections: ["twitter", "facebook"]})
// will override the entire auth.params object passed to the constructor, if any
lock.show({auth: {params: {state: 'auth_state'}}})
If you set the auth.autoParseHash option to false, you'll need to call this method to complete the authentication flow. This method is useful when you're using a client-side router that uses a # to handle URLs (angular2 with useHash or react-router with hashHistory).
null.lock.resumeAuth(hash, function(error, authResult) {
if (error) {
alert("Could not parse hash");
}
console.log(authResult.accessToken);
});
Logs out the user.
lock.logout({ returnTo: 'https://myapp.com/bye-bye' });
The checkSession method allows you to acquire a new token from Auth0 for a user who is already authenticated against the universal login page for your domain. The method accepts any valid OAuth2 parameters that would normally be sent to authorize. In order to use this method, you have to enable Web Origins for your application. For more information, see Using checkSession to acquire new tokens.
lock.checkSession({}, function (error, authResult) {
if (error || !authResult) {
lock.show();
} else {
// user has an active session, so we can use the accessToken directly.
lock.getUserInfo(authResult.accessToken, function (error, profile) {
console.log(error, profile);
});
}
});
The appearance of the widget and the mechanics of authentication can be customized with an options object which has one or more of the following properties. Each method that opens the dialog can take an options object as its first argument.
closable it won't be closed even if this option is set to true. Defaults to false.false when a container option is provided or the Lock is being rendered on a mobile device. Otherwise, it defaults to true.null will disable the functionality. To fetch avatar from other provider see below.id of the HTML element where the Lock will be rendered. This makes the Lock appear inline instead of in a modal window."en". Supported languages are:
de: Germanen: Englishes: Spanishit: Italiannb: Norwegian bokmålpt-BR: Brazilian Portugueseru: Russianzh: Chineseja: Japanese{}. See below Language Dictionary Specification for the details.container option is provided its value is always false, otherwise it defaults to true.window.open is accepted. Defaults to {}.initialScreen option is set to "login" (the default). Defaults to true.error or success flash message when Lock is shown.
error or success.<input autocomplete />). Defaults to false.true.false.true is required for password manager support and to avoid many cases of adverse behavior. Defaults to false.Theme options are grouped in the theme property of the options object.
var options = {
theme: {
labeledSubmitButton: false,
logo: "https://example.com/assets/logo.png",
primaryColor: "green",
authButtons: {
connectionName: {
displayName: "...",
primaryColor: "...",
foregroundColor: "...",
icon: "https://.../logo.png"
}
}
}
};
true. When set to false an icon will be shown. The labels can be customized through the languageDictionary.logo to ensure all colors go well together with the logo's color palette. Defaults to "#ea5323"."#eb5424"."#FFFFFF"."https://site.com/logo.png".Authentication options are grouped in the auth property of the options object. The default scope used by Lock is openid profile email.
var options = {
auth: {
params: {
param1: "value1",
scope: "openid profile email"
},
autoParseHash: true,
redirect: true,
redirectUrl: "some url",
responseMode: "form_post",
responseType: "token",
sso: true,
connectionScopes: {
connectionName: [ 'scope1', 'scope2' ]
}
}
};
{}.true, Lock will parse the window.location.hash string when instantiated. If set to false, you'll have to manually resume authentication using the resumeAuth method.true, the default, redirect mode will be used. Otherwise, popup mode is chosen. See below for more details."" (no redirect URL)."form_post" if you want the code or the token to be transmitted via an HTTP POST request to the redirectUrl instead of being included in its query or fragment parts. Otherwise, it should be omitted."token" for Single Page Applications, and "code" otherwise. Also, "id_token" is supported for the first case. Defaults to "code" when redirectUrl is provided, and to "token" otherwise.[].false the widget won't display the login screen. This is useful if you want to use the widget just for signups (the login and sign up tabs in the sign up screen will be hidden) or to reset passwords (the back button in the forgot password screen will be hidden). In such cases you may also need to specify the initialScreen, allowForgotPassword and allowSignUp options. It defaults to true.false hides the "Don't remember your password?" link in the login screen, making the forgot password screen unreachable. Defaults to true. Keep in mind that if you are using a database connection with a custom database which doesn't have a change password script the forgot password screen won't be available.false hides the login and sign up tabs in the login screen, making the sign up screen unreachable. Defaults to true. Keep in mind that if the database connection has sign ups disabled or you are using a custom database which doesn't have a create script, then the sign up screen won't be available."login", "signUp", and "forgotPassword". If this option is left unspecified, the widget will pick the first screen that is available from the previous list. If you set initialScreen to "forgotPassword" we recommend that you set allowLogin to "false", otherwise a back button will be shown in the forgot password screen and it might not be clear to the user where that back button will take them.true.true displays the languageDictionary.signUpTerms string. Defaults to true.true displays a checkbox input along with the terms and conditions that must be checked before signing up. The terms and conditions can be specified via the languageDictionary option, see the example below. Defaults to false.{prefill: {email: "someone@auth0.com", username: "someone"}}. When omitted no initial value will be provided.requires_username flag set, otherwise it will be ignored. Possible values are "username" and "email" and by default both username and email are allowed.defaultDatabaseConnection is provided the database connection will be used and this option will be ignored.var options = {
container: "myContainer",
closable: false,
languageDictionary: {
signUpTerms: "I agree to the <a href='/terms' target='_new'>terms of service</a> and <a href='/privacy' target='_new'>privacy policy</a>.",
title: "My Company",
},
autofocus: false
};
Auth0LockPasswordless with an email connection, you can use this option to pick between sending a code or a magic link to authenticate the user. Available values for email connections are code and link. Defaults to code. SMS passwordless connections will always use code.domain has the format *.auth0.com. Otherwise, it uses the provided domain.https://cdn.auth0.com.true.username, context, and callback as parameters. The callback expects an object like: {type: 'database', name: 'connection name'}. This only works for database connections. Keep in mind that this resolver will run in the form's onSubmit event, so keep it simple and fast. This is a beta feature. If you find a bug, please open a GitHub issue.var options = {
connectionResolver: function (username, context, cb) {
var domain = username.includes('@') && username.split('@')[1];
if (domain) {
// If the username is test@auth0.com, the connection used will be the `auth0.com` connection.
// Make sure you have a database connection with the name `auth0.com`.
cb({ type: 'database', name: domain });
} else {
// Use the default approach to figure it out the connection
cb(null);
}
}
}
A language dictionary is an object that allows you to customize every piece of text the Lock needs to display. For instance, the following code will change the title displayed in the header and the placeholder for the email field.
var options = {
languageDictionary: {
emailInputPlaceholder: "Please enter your email",
title: "My Company"
},
};
Extra input fields can be added to the sign up screen with the additionalSignUpFields option. Every input must have a name and a placeholder, and an icon URL can also be provided. Also, the initial value can be provided with the prefill option, which can be a string with the value or a function that obtains it. Other options depend on the type of the field, which is defined via the type option and defaults to "text".
Additional sign up fields are rendered below the default fields in the order they are provided.
A validator function can also be provided.
var options = {
additionalSignUpFields: [{
name: "address",
placeholder: "enter your address",
// The following properties are optional
ariaLabel: "Address",
icon: "https://example.com/assests/address_icon.png",
prefill: "street 123",
validator: function(address) {
return {
valid: address.length >= 10,
hint: "Must have 10 or more chars" // optional
};
}
}]
};
If you don't provide a validator function a default validator is applied, which requires the text field to contain some value (be non-empty). You can make a field optional by using a validator that always return true:
var options = {
additionalSignUpFields: [{
name: "address",
placeholder: "enter your address (optional)",
validator: function() {return true;}
}]
};
If you want to save the value of the attribute in the root of your profile, use storage: 'root'. Only a subset of values can be stored this way. The list of attributes that can be added to your root profile is here. By default, every additional sign up field is stored inside the user_metadata object.
var options = {
additionalSignUpFields: [{
name: "name",
storage: "root"
}]
};
To specify a select field type: "select" needs to be provided along with the options property.
var options = {
additionalSignUpFields: [{
type: "select",
name: "location",
placeholder: "choose your location",
options: [
{value: "us", label: "United States"},
{value: "fr", label: "France"},
{value: "ar", label: "Argentina"}
],
// The following properties are optional
ariaLabel: "Location",
icon: "https://example.com/assests/location_icon.png",
prefill: "us"
}]
}
The options and the prefill value can be provided through a function.
var options = {
additionalSignUpFields: [{
type: "select",
name: "location",
placeholder: "choose your location",
options: function(cb) {
// obtain options, in case of error you call cb with the error in the
// first arg instead of null
cb(null, options);
},
ariaLabel: "Location",
icon: "https://example.com/assests/location_icon.png",
prefill: function(cb) {
// obtain prefill, in case of error you call cb with the error in the
// first arg instead of null
cb(null, prefill);
}
}]
}
To specify a checkbox field use: type: "checkbox"
The prefill value can determine the default state of the checkbox and it is required.
var options = {
additionalSignUpFields: [{
type: "checkbox",
name: "newsletter",
prefill: "true",
placeholder: "I hereby agree that I want to receive marketing emails from your company",
// placeholderHTML - is an optional field and overrides the value of placeholder
placeholderHTML: "<b>I hereby agree that I want to receive marketing emails from your company</b>",
// ariaLabel - is an optional field
ariaLabel: "Activate Newsletter"
}]
}
To specify a hidden field use: type: "hidden". Both the value and name properties are required.
var options = {
additionalSignUpFields: [{
type: "hidden",
name: "signup_code",
value: "foobar123"
}]
}
Lock can show avatars fetched from anywhere. A custom avatar provider can be specified with the avatar option by passing an object with the keys url and displayName. Both properties are functions that take an email and a callback function.
var options = {
avatar: {
url: function(email, cb) {
// obtain URL for email, in case of error you call cb with the error in
// the first arg instead of null
cb(null, url);
},
displayName: function(email, cb) {
// obtain displayName for email, in case of error you call cb with the
// error in the first arg instead of null
cb(null, displayName);
}
}
};
A popup window can be displayed instead of redirecting the user to a social provider website. While this has the advantage of preserving page state, it has some issues. Often times users have popup blockers that prevent the login page from even displaying. There are also known issues with mobile browsers. For example, in recent versions of Chrome on iOS, the login popup does not close properly after login. For these reasons, we encourage developers to avoid this mode, even with Single Page Apps.
If you decide to use popup mode you can activate it by passing the option auth: {redirect: false} when constructing Auth0Lock.
var clientId = "YOUR_AUTH0_APP_CLIENTID";
var domain = "YOUR_DOMAIN_AT.auth0.com";
var options = {
auth: {
redirect: false
}
};
var lock = new Auth0Lock(clientId, domain, options);
lock.show();
More information can be found in Auth0's documentation.
We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 10. We currently use zuul along with Saucelabs to run integration tests on each push.
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.
This project is licensed under the MIT license. See the LICENSE file for more info.
FAQs
Auth0 Lock
The npm package auth0-lock receives a total of 12,609 weekly downloads. As such, auth0-lock popularity was classified as popular.
We found that auth0-lock demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 47 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.