JavaScript Login

Sample Project

Download this sample project configured with your Auth0 API Keys.

If you have an existing application, follow the steps below.

Before Starting

Please remember that for security purposes, you have to register the URL of your app in the Application Settings section as the callbackURL.

Right now, that callback is set to the following:

https://YOUR_APP/callback

1. Add the Auth0 Scripts and set the Viewport

Add the code below to the index.html file to include the Lock widget library and set the viewport:

<!-- index.html -->
<head>

  <!-- Auth0 lock script -->
  <script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>

  <!-- Setting the right viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

2. Configure Lock

Configure Lock with your client ID and domain:

To discover all the available options for Auth0Lock, see the Lock customization documentation.

// app.js

var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');

3. Implement the Login

To implement the login, call the .show() method of Auth0's lock instance when a user clicks the login button.

// app.js

var btn_login = document.getElementById('btn-login');

btn_login.addEventListener('click', function() {
  lock.show();
});
<!-- index.html -->

<button type="submit" id="btn-login">Sign In</button>

After authentication, Auth0 will redirect the user back to your application with an identifying token. This token is used to retrieve the user's profile from Auth0 and to call your backend APIs.

In this example, the id_token is stored in localStorage to keep the user authenticated after each page refresh:

// app.js

lock.on("authenticated", function(authResult) {
  lock.getProfile(authResult.idToken, function(error, profile) {
    if (error) {
      // Handle error
      return;
    }
    localStorage.setItem('id_token', authResult.idToken);
    // Display user information
    show_profile_info(profile);
  });
});

4. Retrieve the User Profile and Display User Information

Use the id_token to retrieve the user profile and display the user's nickname:

// app.js

var retrieve_profile = function() {
  var id_token = localStorage.getItem('id_token');
  if (id_token) {
    lock.getProfile(id_token, function (err, profile) {
      if (err) {
        return alert('There was an error getting the profile: ' + err.message);
      }
      // Display user information
      show_profile_info(profile);
    });
  }
};

var show_profile_info = function(profile) {
  var avatar = document.getElementById('avatar');
  document.getElementById('nickname').textContent = profile.nickname;
  btn_login.style.display = "none";
  avatar.src = profile.picture;
  avatar.style.display = "block";
  btn_logout.style.display = "block";
};

// ...
retrieve_profile();
<!-- index.html -->

<img alt="avatar" id="avatar" style="display:none;">
<p>Welcome <span id="nickname"></span></p>

To discover all of the available properties of a user's profile, see Auth0 Normalized User Profile. Note that the properties available depend on the social provider used.

5. Log out

In this implementation, a logout involves simply deleting the saved token from localStorage and redirecting the user to the home page:

// app.js

var logout = function() {
  localStorage.removeItem('id_token');
  window.location.href = "/";
};

Persisting Application State

Lock uses redirect mode by default, meaning that a full page refresh will occur when users go through the authentication process in your application. This can be undesirable in single page apps, especially if the application contains state that should be displayed to the user again after they authenticate. For example, it may be the case that your users can initiate authentication from an arbitrary route within your single page app and you may want to return them to that location (along with any relevant state) after authentication is complete.

The recommended solution for this is to persist any necessary application state in local storage or a cookie before the user logs in or signs up. With this data, you can provide some custom post-authentication logic in the listener for the authenticated event to allow the user to pick up from where they left off.

In cases where storing application state is not possible, Lock's popup mode can be used. Please note that popup mode is not recommended. Known bugs in certain browsers prevent popup mode from functioning as expected under some circumstances.

Previous Tutorial
1. Introduction
Next Tutorial
3. Custom Login
Use Auth0 for FREECreate free Account