Auth0 Full customization guide - AngelaMeow/Design-wiki GitHub Wiki

To fully customize the Login according to your design, I have created some styles that override the default Auth0 theme and provides more flexibility. And this is what comes up next.

Once the tenant is created on Auth0 and everything is ready to use. Go to the Auth0 portal and follow these steps:

  1. Go to Hosted Pages is one of the options on the sidebar when you enter to your Auth0 tenant (see figure 1).

Hosted Pages Section on Sidebar

Figure 1 - Hosted Pages Section on Sidebar.

  1. Turn on the Customize login switch. By default the switch will be off, So make sure to click it, when it's on the background turns green (see figure 2). Once the switch is on the HTML editor will be enabled to edit (see figure 3). So continue with the next step.

Customize login switch

Figure 2 - Switch On.

Default Template - HTML editor

Figure 3 - Make sure you're in the HTML tab. The Preview tab will allow you to see your styles applied to the login page.

  1. Open a <style> tag inside the <head> of the HTML and paste the styles that we're providing you here:
    /* Font family */
    .auth0-lock.auth0-lock {
      font-family: 'Font-family-name', sans-serif !important;
    }

    /* Page background */
    .auth0-lock.auth0-lock .auth0-lock-overlay {
      background: #FFFFFF!important;
    }

    /* Logo size */
    .auth0-lock.auth0-lock .auth0-lock-header-logo {
      height: auto!important;
      width: 100%!important;
    }

    /* Login widget */
    .content, .auth0-lock.auth0-lock .auth0-lock-widget {
      width: 360px!important;
    }
    .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-widget {
      box-shadow: none!important;
      border: 1px solid #DDDDDD!important;
    }

    /* Login button */
    .auth0-lock.auth0-lock .auth0-lock-submit {
      padding: 10px!important;
      width: 100%!important;
      border-radius: none!important;
      margin: auto!important;
      height: 40px!important;
    }

    /* Messages - (Error & Success shared styles) */
    .auth0-lock.auth0-lock .auth0-global-message {
      width: 100%!important;
      margin: 20px auto!important;
      text-transform: none!important;
      font-size: inherit!important;
      padding: 8px!important;
    }

    /* Error message */
    .auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-error {
      background: mistyrose!important;
      border: 1px solid darksalmon!important;
      color: darkred!important;
    }

    /* Success message */
    .auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-success {
      background: honeydew!important;
      border: 1px solid mediumaquamarine!important;
      color: seagreen!important;
    }

    /* Auth0 Powered by - Button */
    .auth0-lock.auth0-lock .auth0-lock-badge-bottom {
      background: rgba(0,0,0,0.5)!important;
    }

Important: These styles are just a base. Feel free to edit and/or add more properties to match your UI. Each selector is labeled with a comment so you can know in advance what are you editing.

  1. Save your changes by clicking the Save button. Switch between the HTML and Preview tabs to see how your changes look in the HTML rendered.
  1. Add a favicon if necessary. If you're using a custom favicon on your project. Remember to include it on the Auth0 Hosted pages too. Just add a <link> with the favicon specifications on the HTML <head>.
  1. Repeat all of these steps for the Password Reset Page.
⚠️ **GitHub.com Fallback** ⚠️