Lock Version 10

This document uses the latest version of Lock (version 10). If you are still using version 9, check out the Lock 9 to Lock 10 migration guide, or the Lock 9 Documentation.

Popup Mode

The Default: Redirect Mode

If after you click on the IdP button (Facebook for example), the web app you built gets redirected to Facebook, it means you're using Redirect Mode. Redirect Mode is the default with Lock 10, and is the recommended mode for almost all use cases. Once you successfully login to Facebook, Facebook will redirect you back to your app (through Auth0).

Using Popup Mode

If after you click on the IdP button (Facebook for example), a popup (new tab or window) is opened, it means you're using Popup Mode. In that popup, you'll see that Facebook page is displayed. Once you successfully login to Facebook, the popup will be closed and your WebApp will recognize that the user has been authenticated. The WebApp has never been redirected to any other page.

Popup Mode

There is a known bug that prevents popup mode from functioning properly in Android or Firefox on iOS, and in Internet Explorer under certain circumstances. As such we recommend either only using redirect mode or detecting these special cases and selectively enabling redirect mode. See more info here.

Widget Popup

Implementing Lock with Popup Mode is again a simple change of an option from its default.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    auth: { 
      redirect: false 
    }
  }
);

lock.on("authenticated", function(authResult) {
  lock.getProfile(authResult.idToken, function(error, profile) {
    if (error) {
      // Handle error
      return;
    }

    localStorage.setItem('token', authResult.idToken);
    localStorage.setItem('profile', JSON.stringify(profile));
  });
});

Database connections and popup mode

Some Auth0 features such as MFA and SSO between multiple applications depend on users being redirected to Auth0 to set a cookie on 'YOUR_AUTH0_DOMAIN'. When using popup mode, a popup window will be displayed in order to set this cookie and display MFA prompts if necessary; this popup window will be blank if users are not prompted for MFA, which might not be a desirable UX. The reason for this is that cross-origin requests sent from your application to Auth0 are not be able to set cookies.

If you do not want to display a popup window and do not need MFA or SSO between multiple applications, you can set sso: false when using Lock or auth0.js. For example:

var options = {
  auth: {
    sso: false
  }
}

Redirect mode is recommended whenever possible to avoid potential browser compatibility issues.

Lock: Table of Contents