Reset Password Template

[dev.ontel.sokolov]

Hi there!
Please, give your advice, how I could totally customize the styles of the reset-password form, which is opening
via the reset-password email link?

[sgo]

Heya @dev.ontel.sokolov!

You can customise the HTML for the password reset page by following the steps here: Customize Password Reset Page

[dev.ontel.sokolov]

Is it possible to customize css styles of your built in widget?
I mean text fields, button, etc ?

[sgo]

You can customise some of the CSS styles, but there are limitations with the Auth0ChangePassword widget. Below are in the default HTML template for the password reset page.

 <style type="text/css">
    body,html{
      padding:0;
      margin:0;
    }
    .table{
      display:table;
      position:absolute;
      height:100%;
      width:100%;
      {% unless tenant.colors.page_background %}
        background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0));
      {% endunless %}
      background-color: {{tenant.colors.page_background | default: '#e8ebef'}};
    }
    .cell{
      display:table-cell;
      vertical-align:middle;
    }
    .content{
      padding:25px 0;
      margin-left:auto;
      margin-right:auto;
      width:280px;
    }
  </style>

And there are the theme options of icon and primaryColor available too.

There is an unofficial example on this public repo here showing how to provide a more custom UI, however I must warn you that the /lo/reset endpoint used there doesn’t have customer-facing support and it’s not affected by our SLAs. This means that its interface could potentially change without notice, breaking the functionality of your custom page, so it is ‘use at your own risk’ I’m afraid.

If there are particular customisations you would like to see supported, please let our product team know by leaving a note here: Auth0: Secure access for everyone. But not just anyone. - this helps our Product team prioritise new features.