Angular 1.x Customizing Lock

Sample Project

Download this sample project configured with your Auth0 API Keys.

Using Lock is easy, but you may want to customize your login UI. There are several options available for this.

Lock Options

Some UI customization can be done via the options parameter when initializing a lockProvider.

Theme Options

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

// app.js

(function () {

  'use strict';

  angular
    .module('app', ['auth0.lock', 'angular-jwt', 'ui.router'])
    .config(config);

  function config(lockProvider) {

    lockProvider.init({
      clientID: 'YOUR_CLIENT_ID',
      domain: 'YOUR_AUTH0_DOMAIN',
      options: {
        theme: {
          logo: 'https://auth0.com/lib/homepage/img/logo-tmz.svg',
          primaryColor: "#b81b1c"
        }
      }
    });
  }

})();

Note: See the theming options documentation for more detail.

Language Dictionary Specification

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

// app.js

(function () {

  'use strict';

  angular
    .module('app', ['auth0.lock', 'angular-jwt', 'ui.router'])
    .config(config);

  function config(lockProvider) {

    lockProvider.init({
      clientID: 'YOUR_CLIENT_ID',
      domain: 'YOUR_AUTH0_DOMAIN',
      options: {
        languageDictionary: {
          title: "Log me in"
        }
      }
    });
  }

})();

Note: See the Language Dictionary Specification for more information.

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

Custom lock

Use Auth0 for FREECreate free Account