auth0/lock

Auth0's signin solution

⚠️ Lock is built using React 18 from v12 onwards. Getting issues? Please submit a bug report.

⚠️ From v12 onwards, we no longer publish to Bower.

Documentation

• Docs Site - explore our Docs site and learn more about Auth0.

Getting Started

Browser Compatibility

We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 11.

Installation

Install Lock into your project using npm:

npm install auth0-lock

From CDN

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

Configure Auth0

Create a Single Page Application in the Auth0 Dashboard.

If you're using an existing application, verify that you have configured the following settings in your Single Page Application:

• Click on the "Settings" tab of your application's page.
• Scroll down and click on the "Show Advanced Settings" link.
• Under "Advanced Settings", click on the "OAuth" tab.
• Ensure that "JsonWebToken Signature Algorithm" is set to RS256 and that "OIDC Conformant" is enabled. Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:

• Allowed Callback URLs: http://localhost:3000
• Allowed Logout URLs: http://localhost:3000
• Allowed Web Origins: http://localhost:3000

These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback (see below). Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.

Configure the SDK

Create either an Auth0Lock or Auth0LockPasswordless instance, depending on your use case:

Auth0Lock

import { Auth0Lock } from 'auth0-lock';

const lock = new Auth0Lock('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');

Auth0LockPasswordless

import { Auth0LockPasswordless } from 'auth0-lock';

const lock = new Auth0LockPasswordless('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');

Logging In

Configure a listener for the authenticated event to retrieve an access token and call show to display the Lock widget.

<button id="login">Click to Login</button>

lock.on('authenticated', function (authResult) {
  lock.getUserInfo(authResult.accessToken, function (error, profileResult) {
    if (error) {
      // Handle error
      return;
    }

    accessToken = authResult.accessToken;
    profile = profileResult;

    // Update DOM
  });
});

// Show the widget when the login button is clicked
document.getElementById('login').addEventListener('click', () => {
  lock.show()
});.

For other comprehensive examples and documentation on the configuration options, see the EXAMPLES.md document.

Feedback

Contributing

We appreciate feedback and contribution to this repo! Before you get started, please see the following:

• Auth0's general contribution guidelines
• Auth0's code of conduct guidelines
• This repo's contribution guide

Raise an issue

⚠️ Note: We are no longer supporting requests for new features. Only requests for bug fixes or security patches will be considered.

To provide feedback or report a bug, please raise an issue on our issue tracker.

Vulnerability Reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

What is Auth0?

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

This project is licensed under the MIT license. See the LICENSE file for more info.

lock's Issues

Improve SPA wiki documentation

https://github.com/auth0/lock/wiki/Single-Page-Applications

@pose we should add the alternatives with redirect, like the customer who required to set state instead of opening in popup mode.

I'm might be too sleepy and wrong about this 👯

But either way documentation about the topic should be improved and you are THE guy for this.

cc @mgonto

---

EDIT:

@mgonto created this document https://github.com/auth0/lock/wiki/Types-Of-Applications

Which is quite complete as an explanation.

We should only add code examples.

And make links smaller cc @mgonto

If first argument of show is a function, makes option be null and callback be first param

Sometimes you don't want to set any option but you do want to set a callback. For those cases, we could make that if first param is a function, it's a callback not an option.

On HRD take input email and use the first part as suggested username

Auth0 Widget/Lock redundant home realm discovery

When an app only has a single enterprise connection, it should show a button to redirect the user to the login page rather than to ask them for their email address, since there is no need for it to discover the home realm.

Improve UI customization wiki documentation

https://github.com/auth0/lock/wiki/UI-Customization

@gravityonmars anything could be better than that.

Also a few screenshots might be awesome! 💃

Add livereload to grunt

Add livereload to grunt build example so it refreshes each time a change is made.

Add warning when using connection instead of connections

If we have the following code:

widget.show({
  focusInput: false,
  connection: 'Initial-Connection',
  popup: true
}, function (err, profile, token) {
  alert(err);
});

What should happen? A warning should displayed because connection field does not exist as a lock option. The warning should say that what the user must type is connections.

What happens instead? The parameter is silently ignored and you may think that the connection parameter works but it does not.

Move extraParams from the main options object

to options.extraParams as its on docs (or was, or should be...)

• test it fails when wrongly passed #2
• document all allowed extra parameters #3 @mgonto
• move extra parameters array to it's own file/module under options-manager

If no `callbackURL` is provided, we should default to `responseType: token`

When we use responseType: code it means that we usually want to get the code in the server and then from that get the accessToken to get info from the user.

When we don't set a callbackURL, it will default to location.href which usually will be the same page, not a callback. That will happen mostly in SPAs. Therefore, I think that if callbackURL isn't provided, we should default to responseType: token

Should not make multiple calls to client config if 1 is in process

Implement password strength

• add i18n messages to widget
• widget design ready?
• tried on ie9
• tried on ie10 (thx @rolodato)
• tried on ie11 (thx @rolodato)
• tried on iOS
• tried on Android
• end documentation with widget screenshots (auth0/docs#185)
• add reusable components to style guide (if any)
• test cases
  • signup
  • change password

Inspiration (how it should look like)

• 
• 

Add user gravatar image when user types email

• login ready
  • Add transition (fade-in)
  • Border radius round (like blog)
  • if no picture, do show the previous icon
  • add new parameter to show: gravatar by default it will be true.
  • signup
• design ready
  • tried on ie9
  • tried on ie10*
  • tried on iOS
  • tried on Android Chrome
• documented?
  • added to lock docs
• described test cases
• tried test cases
  • icon: URL
  • icon: false
  • if enterpise connection it should not work
  • if ad connection it should not work
  • if db connection it should not work
  • should work on signup

[*] Animations not working (See #45)

Improve build speed for development settings

• See if prefix-css (the grunt custom task we use to add a0- to the css classes) can be replaced with a faster alternative (what about https://www.npmjs.org/package/prefix-css-node ?)
• Cache steps or results on grunt process?
• Creating library bundle for browserify, so it only goes through the Auth0 files (and not resolving dependencies' requires).
• Configure watch parameter in browserify.

rememberLastLogin: false should not make SSO Request for login

Right?
/cc @jfromaniello @woloski @pose @siacomuzzi

Tests are not testing

We are using expect.js for our tests. Many of our tests are using the following type of assertion:

expect(foo).to.exist;
expect(foo).to.not.exist;

But if you take a closer look at expect.js repo, I cannot find a single mention of the keyword exist (I suspect exist could be part of chai assertion framework) . Lots of tests are passing without asserting the required behavior.

When clicking `Last login with` I'm getting a `widfet is undefined` Typo

https://cloudup.com/cPsK4E3th_K

Gravatar image not being displayed on HRD mode

Document all supported authParams

https://github.com/auth0/lock/wiki/Sending-authentication-parameters#supported-parameters

cc @mgonto @siacomuzzi

Add real tests

Update CSS for submit inputs when focus

When tab focus you can't notice.

Show gravatar picture on "last time you signed in with"

Do lock.showSignin. Log into an email associated with a gravatar picture. Then logout and the last time you signed in with message should appear when doing lock.showSignin.

What should happen? Gravatar picture should be displayed when last time you signed in with message is displayed.
What happens instead? No Gravatar picture is displayed at all.

Fix gravatar tests for IE10/11

Timing out...

handle require_username

When the connection has requires_username: true, lock should work as follows:

1. Sign in: Ask for "Username or email" + "password". TWO FIELDS.
2. Sign up: Ask for "Username" + "Email" + "password". THREE FIELDS.
3. Password reset: Ask for "Username or email" + "password". TWO FIELDS.

The regex we will use to validate usernames is /^[a-zA-Z0-9_]{1,15}$/

Move _findConnectionByDomain to somewhere else

Currently, it's located in index.js. OptionsManager is an option but I'm not convinced.

PhoneGap "last time you signed in with" is broken

It always goes back to the same state. For example:

Logging in for the first time:

Going back to showing the widget again:

After trying to log in, it goes back to the same spot but inside a web view:

To reproduce, you can use this in app.js:

function showWidget(e) {
  e.preventDefault();
  widget.signin({ popup: true} , null, function(err, profile, token) {
    if (err) {
      // Error callback
      console.log("There was an error");
      alert("There was an error logging in");
    } else {
      // Success calback

      // Save the JWT token.
      localStorage.setItem('userToken', token);

      // Save the profile
      userProfile = profile;

      $('.login-box').hide();
      $('.logged-in-box').show();
      $('.nickname').text(profile.nickname);
      $('.nickname').text(profile.name);
      $('.avatar').attr('src', profile.picture);
    }
  });
}

$('.btn-login').click(showWidget);

$('#back').click(showWidget);

You also need to add a Back button in index.html:

<input type="button" value="Back" id="back" />

When popup: true => responseType: token should be default

Use the following snippet:

var widget = new Auth0Lock(cid, domain);

widget.show({
  popup: true,
}, function (err, profile, token) {
  alert(err);
});

What should happen? When using the widget and clicking in a social connection popup must be shown. When closing the popup err should be printed (responseType: token is set implicitly).

What happens instead? As responseType: code is the default the callback is not being executed.

Widget + Phonegap does not look good (Android)

This is how the widget inside phonegap looks on Samsung Galaxy S3:

Last used by should take into account active IdPs

I've previously logged in with Github so the following is shown. However, I just deactivated that service, so it shouldn't be shown at all as "Last signed in"

With emails 30 characters long or more input goes out of control!

Gravatar animation fixes: Part II

• Animation support on IE
• Check if there is an animation cancel so we don't need the fallback timer.

Complete documentation on Readme.md and wiki

Validate Options parameters strictly

As shown in this issue: #18 it may be a good idea to perform validations on options parameters in order to avoid typos and Lock not working as expected.

As @jfromaniello suggests:

I like an exception thrown, this will help also when depreciating an option, etc. Instead of silently failing.

Json schema will be the way to go,

Restore TOC order in Lock Wiki

Gravatar animation fixes

• move 500 to a constant and align it to the .animation.fast's animation-duration.
• Add a _.debounce to onemailinput handler.
  • signin
  • signup
• Make the change of logo only when succeeding loading the image (probably, preload it somewhere else) when {icon: 'http://....'} This has been solved by the _.dobounce
• ~~ When erasing the whole email in some cases the picture converts to a square.~~ Cannot reproduce, but fixed some related bug.

Add a build check that asserts that options match documented options

Add to grunt cdn send warnings of source code options that don't match documented options in wiki. On that way, we can keep documentation updated.

Create unit test for gravatar appearing

Listing two ad/enterprise connections should display email for HRD

Use the following snippet:

widget.show({
  focusInput: false,
  closable: false,
  connections: ['adconn', 'adconn2'],
  responseType: 'token',
  callbackURL: 'http://localhost:3000'
});

What should happen? An email and password lock should be displayed where user can enter their emails. Then deciding on the email domain that the user has input, it should display the HRD mode.

What happens instead? The following screenshot:

Remove from repo generated css files

(translated from chat conversation, please correct if wrong)

---

We must make sure that npm/browserify still works:

There is a transform https://github.com/auth0/lock/blob/master/package.json#L65 . The css should be present in the generated tgz when doing npm publish. A way to deal with that would be having .gitignore y .npmignore, ignoring it on git pero but not in npm.

Deprecate Auth0 Widget

Once Auth0 Lock is finally officially released:

• Add deprecation notice to Auth0 Widget (latest release).
• Add to Auth0 Widget README a link to Auth0 Lock migration docs.
• Deprecate auth0-widget.js npm
• Deprecate auth0-widget.js bower

HRD Support for AD Connectors

WIP

The user story will be:

1. User writes their email.
2. While the user press enter or clicks on signin, we search throughout the connections if there is one of them registered with the email suffix and its type is AD Connector (for instance, @mydomain.com).
3. lock launches new mode (adldap) (or shall we re-use signin mode @cristiandouce ?)
4. This new state has username instead of email and it can write the password there. The new screen has not forgotten email or signup. Only a cancel button to go to the previous state.
5. When they enter the credentials and clicks on access it should use the selected ad/ldap connection sending username and password. There should not be a redirect as it happens today. It should work as a DB connection.

---

• Try with an enterprise connection.
• Implement escape key to leave HRD. No escape for now.
• What happens if my domain is really large?
  • #25
  • add to tittle field of the access button the full domain name.
  • add overflow and text-overflow (for ellipsis)
• Implement new UI (as shown in #lock)
• show top label when there is only one ad connection. This is error prone as the connection may have multiple domain aliases. Not doing for now.
• Code Cleanup

---

tasks

• widget login ready?
• documented?
• updated widget docs
  • [1]
• updated auth0-configuration No lock yet.
• updated auth0-vagrant No lock yet.
• Contacted people who wanted that feature

Migration Guide

Create a migration guide form Auth0 Widget.

Topics to include:

• Changes in the initialization.
• Changes in show parameters.
• Changes in events.

---

It can be found here: https://github.com/auth0/lock/wiki/Migration-Guide

• Get work reviewed by @cristiandouce

Webpack

I tried to load this using webpack but I did not very very far due to not knowing what loaders it would require...
Any advice?

Handle request errors and timeouts gracefully

When any of these requests fail or time out, Lock will never finish loading and no error message is shown:

• https://TENANT.auth0.com/user/ssodata?ldaps=1&client_id=CLIENT_ID&cbx=__auth0jp0
• https://s3.amazonaws.com/assets.auth0.com/client/CLIENT_ID.js?t1411149795204

This situation should be handled and appropriate error messages should be shown.

email placeholder text doesn't display on IE11

Please notify: [email protected]

Update ticket:
https://auth0.groovehq.com/groove_client/mailboxes/5383/filters/56251/tickets/2596749

Add JSHint validation to the build process

Show alert if no callbackURL is defined and a callback is set

Right now, we show the World Domination message when the callback is missing and the user is trying a Social IdP. However, if the user tries to do a regular Username/Password Auth, a CORS error is thrown.

We should parse the s3 information to see if theres a callbackURL. If there's not and no callback is set to handle the success of the login, then we should show a message sayingPlease add currentURL as a CallbackURL on your application settings`.

Thanks!

If connections: [] then Lock is rendered weird

Resend confirmation emails when attempting to re-register an unconfirmed user

Confirmation emails should be resent (or at least prompted) when users try to register a preexisting account with an unconfirmed email, only when email verification is turned on for that application.

Move ImageView out of HeaderView

Provide hooks for validation before submit

Useful to validate some signup conditions for example: https://ask.auth0.com/t/prevent-the-creation-of-a-user-in-a-rule/115