Angular 2 Customizing Lock

Seed Project

Download a sample project. You will need to login for the sample to be preconfigured.

System Requirements
  • Angular 2.0.1

Using Lock is easy, but you may want to customize your login UI. For that, there are several customization options available.

Lock Options

Some UI customization can be done via the options parameter when creating a Lock instance.

Theme Options

You can set custom theme properties, such as a different logo or primary color, by adding a theme property with custom values:

// auth.service.ts

lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_NAMESPACE', {
  theme: {
    logo: "test-icon.png",
    primaryColor: "#b81b1c"

NOTE: For more information, see: Theming options.

Language Dictionary Specification

You can also customize the text that Lock will display with the languageDictionary option parameter:

// auth.service.ts

lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_NAMESPACE', {
  languageDictionary: {
    title: "My Company"

NOTE: For more information, see: Language Dictionary Specification.


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

Custom lock

Try Auth0 for FREECreate free Account