Hosted Login Page

Auth0 shows a login page whenever something (or someone) triggers an authentication request, such as calling the /authorize endpoint (OIDC/OAuth) or sending a SAML login request.

You can customize this login page to suit your needs. You can change its colors, display fewer/more fields, and so on.

If the authentication request includes a Connection that uses an external identity provider, the hosted login page may not display. Instead, Auth0 directs the user to the identity provider's login page.

Enable Hosted Login Page

In the Auth0 Dashboard, you can enable a custom Hosted Login Page by navigating to Hosted Pages and enabling the Customize Login Page toggle.

Hosted Login Page

Customize Lock in the Hosted Login Page

The basic login page for your Client will use Lock to provide your users with an attractive interface and smooth authentication process.

If you want to change any of Lock's configurable options, you can do so using the Hosted Pages. When you're done, click Save to persist your changes.

All changes to Lock's appearance and/or behavior using this page applies to all users shown this login page, regardless of Client or Connection.

The config Object

The config object contains the set of configuration values that adjusts the hosted login page's behavior at runtime. Many of the values in config pass from your app to your hosted login page.

You can examine the contents of the config object using the following:

// Decode configuration options
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

The Authorize Endpoint

The following examples demonstrating changes to the config object assume that you call the authorize endpoint and the Hosted Lock page via Auth0.js v8.

Please note that you must pass the parsed config object to the authorize endpoint.

Customize Text Displayed in Lock on a Hosted Login Page

The config object contains a property called dict which can be used to set the text displayed in the Lock widget. It is similar to Lock's languageDictionary property.

To pass custom values to your languageDictionary property, call theauthorize endpoint and include the lang parameter.

webAuth.authorize({
  lang: {
    signin: {
      title: "Log in to Awesomeness"
    }
  }
});

Lock's Default Title

By default, the Lock widget's title is set to be the Client Name (e.g. "Default App"). You can override this by providing a value to the config.dict.signin.title property as shown below.

You can also customize the languageDictionary definition on the Hosted Login Page and rearrange your lang/dict object.

You can define your languageDictionary object for use in Lock on the Hosted Login Page as follows:

languageDictionary = {
  title: config.dict.signin.title
};

Check the English Language Dictionary Specification for more information about values you can define here.

Pass in Redirect URI

You can pass the redirect_uri option to authorize, and access it within the Hosted Login Page editor by referring to config.callbackURL.

You can pass a value for redirect_uri to the authorize endpoint and access it in the Hosted Login Page editor using config.callbackURL.

Make sure that you've added any redirect URLs you're using to the Allowed Redirect URLs field on the Client's settings page.

webAuth.authorize({
  redirect_uri: "http://example.com/foo"
});

Pass in Custom Parameters

You can pass custom parameters by adding them to the URL you use to call the authorize endpoint. This allows you to make further customizations to your Hosted Login page. The only restriction on the parameters you pass is that they cannot share names with any of the standard authorize parameters.

For example, suppose you wanted to add a login hint to your page:

webAuth.authorize({
  login_hint: "Here is a cool hint"
});

You can access that value of login_hint using config.extraParams.login_hint.

Use Auth0.js in the Hosted Login Page

Within the Hosted Login page, you can use the the Auth0.js library, instead of Lock, to perform authentication using a custom UI. You can also use Auth0.js in addition to Lock, for authentication or user management tasks.

Read more about either of them in their documentation (linked above) or see the Using Auth0.js in the Hosted Login Page documentation for examples of implementing Auth0.js in the Hosted Login page.