Node.js Customizing Lock

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • NodeJS 4.3 or superior
  • Express 4.11
Show requirements

Using the Lock widget is easy, but it might be necessary to customize the UI for it. There are several options available to do so.

Lock Options

Some UI customization can be done via the options parameter when creating a Lock instance. These options can be found in the full documentation.

Theme options

Theme properties, such as a different logo or primary color, can be set by adding a theme property with custom values when initializing the Lock widget. For more information, see: Theming Options.

var lock = new Auth0Lock(clientId, domain, {
  theme: {
    logo: 'https://example.com/assets/logo.png',
    primaryColor: 'green'
  }
});

Language Dictionary Specification

You can also customize the text that Lock will display with the languageDictionary option parameter. For more information, see: Language Dictionary Specification.

var lock = new Auth0Lock(clientId, domain, {
  languageDictionary: {
    title: "My Company"
  }
});

Results

This is how Lock will appear using a custom logo, color, and title:

Custom lock

Further Reading

For more information, read read the full documentation on Lock customization options.

Use Auth0 for FREECreate free Account