Show Password Icon Is Not Visible on the Classic Login With Lock Template

Knowledge Articles
1

Overview

This article provides steps to resolve an issue where the icon that allows users to view their password while typing is not visible when using the Classic Login Lock template.

Applies To

  • Auth0 Universal Login
  • Classic Login Experience
  • Lock Template

Cause

The “show password” icon is not enabled by default in the Lock template configuration.

Solution

The allowShowPassword parameter must be set to true in the Lock template to display the “show password” icon.

  1. Go to the Auth0 Dashboard > Branding > Universal Login > Manage Classic Login.
  2. Select the Login tab.
  3. In the Customize Login Page section, ensure Default Templates is set to Lock.
  4. In the HTML editor, locate the lock object definition and add the allowShowPassword: true, parameter. For more information, see the documentation on Lock configuration options.
// Available Lock configuration options: https://auth0.com/docs/libraries/lock/lock-configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowShowPassword: true, // added here the new papameter
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      theme: {
        //logo:           'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false
    });
  1. Select SAVE CHANGES.