Versionv10

This document covers a deprecated version of Lock. We recommend that you migrate to Lock v11 as soon as possible.

Custom sign up fields

You can add input fields to the sign up form with the new option additionalSignUpFields.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    additionalSignUpFields: [{
      name: "address",                              // required
      placeholder: "enter your address",            // required
      icon: "https://example.com/address_icon.png", // optional
      prefill: "street 123",                        // optional
      validator: function(value) {                  // optional
        // only accept addresses with more than 10 chars
        return value.length > 10;
      }
    }] // more fields could be specified
  });

If the possible values for the field are predefined, you can add a field with the "select" type.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    additionalSignUpFields: [{
      type: "select",                                       // required
      name: "location",                                     // required
      placeholder: "choose your location",                  // required
      options: [                                            // required
        {value: "us", label: "United States"},
        {value: "fr", label: "France"},
        {value: "ar", label: "Argentina"}
      ],
      prefill: "us",                                        // optional
      icon: "https://example.com/assests/location_icon.png" // optional
    }]
  },
  function(error, result) {
    // handle auth
});

The options and prefill properties can also be functions, which is useful when you need to make a request to obtain their values.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    additionalSignUpFields: [{
      type: "select",                                       // required
      name: "location",                                     // required
      placeholder: "choose your location",                  // required
      options: function(cb) {                               // required
        // obtain options, in case of error you call cb with the error in the
        // first arg instead of null
        cb(null, options);
      },
      prefill: function(cb) {                               // optional
        // obtain prefill, in case of error you call cb with the error in the
        // first arg instead of null
        cb(null, prefill);
      },
      icon: "https://example.com/assests/location_icon.png" // optional
    }]
  },
  function(error, result) {
    // handle auth
});

Custom avatar provider

By default, Gravatar is used to fetch the user avatar and display name, but you can obtain them from anywhere with the avatar option.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    avatar: {
      url: function(email, cb) {
        // Obtain the avatar url for the email input by the user, Lock
        // will preload the image it before displaying it.
        // Note that in case of an error you call cb with the error in
        // the first arg instead of `null`.
        var url = obtainAvatarUrl(email);
        cb(null, url);
      },
      displayName: function(email, cb) {
        // Obtain the display name for the email input by the user.
        // Note that in case of an error you call cb with the error in
        // the first arg instead of `null`.
        var displayName = obtainDisplayName(email);
        cb(null, displayName);
      }
    }
  }
);

If you don't want to display an avatar pass null.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    avatar: null
  }
);

Prefilled fields

It is now possible to fill the user's email and/or username input if you know them beforehand with the prefill option.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    prefill: {
      email: "someone@example.com",
      username: "someone"
    }
  }
);

Authentication options

Authentication options have been grouped in their own namespace.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    auth: {
      params: {name: "value"},
      redirect: true,
      redirectUrl: window.location.href
      responseType: "token",
      sso: true
    }
  }
);

Initial screen

You may now choose the screen that will be first displayed when Lock is shown with the initialScreen option. The following are valid values:

  • login (default);
  • forgotPassword;
  • signUp;
var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    initialScreen: "signUp" // "login" or "forgotPassword"
  }
);

Theme options

Theme options have been grouped in their own namespace.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    theme: {
      logo: "https://example.com/icon.png",
      primaryColor: "#ec4889"
    }
  }
);

Sign up Terms and Conditions

You can ask the user to accept the terms and conditions by clicking a checkbox input before signing up with the mustAcceptTerms option.

var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  {
    languageDictionary: {
      signUpTerms: "I agree to the <a href='/terms' target='_new'>terms of service</a> and <a href='/privacy' target='_new'>privacy policy</a>."
    },
    mustAcceptTerms: true
  }
);
Was this article helpful?