Getting Started with Lock Episode 2: Using Customization Options

Hi, this is Kassandra with Auth0. In the first episode of our new Getting Started with Lock screencast, we talked about how to implement Lock. Today, we'll be talking about customizing Lock with the various options in our Lock library.

But first, I'd like to introduce viewers to the Lock Playground. This is a tool Auth0 has that allows users to test the options out on Lock without having to implement it! The code on the left affects the window on the right in real time. A documented list of all of the options are available in our docs.

Here's a snapshot of the options we'll be looking at today:

lock.show({
    connections: ['Username-Password-Authentication', 'Facebook'],
    dictionary: 'en',
    icon: 'https://mycdn.com/myImage.png',
    closable: true,
    socialBigButtons: true,
    focusInput: true,
    usernameStyle: 'email',
    gravatar: true,
    disableSignupAction: false,
    disableResetAction: false
});

First, we'll talk about the

connections

option: this option allows us to select a subset of our configured login providers to show to a user. This is handy if you have configured a login type, but do not want it to be an open option to potential users. This is an array of the connections you'd like to show.

Next is

dictionary

: you can convert the dialogue to a different language by using its language code (e.g. 'es' for Spanish).

The

icon

option accepts a URL and allows you to change the logo at the top of the dialog to an image of your choosing. Recommended size is 85x85px.

closable

, when set to

true

, allows users to close the Lock dialog, and can be set to false to prevent users from dismissing your login screen.

You can change the presentation of the social provider buttons using the

socialBigbuttons

option: this defaults to

false

if the username and password dialog is shown, and

true

otherwise. However, you can change it to suit your needs.

focusInput

places focus on the username field in the Lock dialog, when set to

true

. This can be especially handy in situations where your login dialog is mandatory or overlays the screen-- however, it's best set to

false

in optional or embedded contexts. (It's set to false in the playground so that our cursor stays with the code.)

The

usernameStyle

option is handy if you'd rather use usernames instead of emails to identify themselves. By default, the prompt in username is set to 'Email', but by setting

usernameStyle

to

username

, the prompt will change to 'Username'.

The

gravatar

options, which defaults to

true

, watches the email entered in the Email field, and, if it matches a gravatar account, will replace the logo at the top of the dialog with the user's gravatar.

When you are showing your username and password login option, you will see a 'Sign Up' tab and a 'forgot your password?' link on the Lock dialog. You can disable these by setting

disableSignupAction

and

disableResetAction

to

true

.

In our next episode, we'll talk about the differences between Lock's two modes: popover and redirect.

Thanks for reading!