Customize Auth0 login screen

masakudamatsu commented 1 year ago

Importance

When the first-time user clicks the signup button, they see this:

When the subscribed user clicks the login button, they see this:

This is a terrible UX. We need to customise its UI.

NOTE: We've managed to redirect logged-out users to our own Login page (#323 )

Background

We have to use "New Universal Login". Otherwise, it's not possible (or at least super-complicated to implement) to take the user directly to the signup page. (See https://community.auth0.com/t/creating-separate-login-and-sign-up/91428)

Then, how to custom the login form appears to differ substantially between "New" and "Classic" Universal Login.

Method 1

Go to Dashboard > Branding > Universal Login. And click "Customise Your Login".

We can customise (1) color scheme, (2) font (by setting woff/woff2 font file URL), (3) borders, (4) Logo (including positioning and size) and text alignment (5) background (color or image)

Method 2: not working for New Universal Login

Alternatively, it seems we can directly manipulate HTML/CSS: follow instructions here

No, if we do, the New Universal Login will automatically get removed.

Method 3

Customise all the text by Text Customization API calls:

var axios = require("axios").default;

var options = {
  method: 'PUT',
  url: 'https://YOUR_DOMAIN/api/v2/prompts/login/custom-text/en',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer MGMT_API_ACCESS_TOKEN'
  },
  data: {login: {description: 'Login to ACME\'s Website'}}
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

See: https://auth0.com/docs/customize/universal-login-pages/customize-login-text-prompts

Method 4

If the Custom Domain is used (#340 ), we can customise with Liquid template language:

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body></html>

See: https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates

masakudamatsu commented 1 year ago

Examples: ChatGPT uses Auth0:

masakudamatsu commented 1 year ago

It turns out that the customizing login/signup screens has become easier.

Logo

https://manage.auth0.com/dashboard/jp/my-ideal-map/universal-login/customizations/widget (Branding > Universal Login > Custmization Options > Widget)

URL has to be specified (Image file upload is not possible)
position (left / center / right) and height (in px) can be adjusted

Fonts

https://manage.auth0.com/dashboard/jp/my-ideal-map/universal-login/customizations/fonts (Branding > Universal Login > Customization Options > Fonts)

URL for woff/woff2 font file
Text size

Background

https://manage.auth0.com/dashboard/jp/my-ideal-map/universal-login/customizations/page_background (Branding > Universal Login > Customization Options > Page background)

Specify color code
or URL of the background image (starting https:// and 2000px wide or more)

Text customization

https://manage.auth0.com/dashboard/jp/my-ideal-map/custom_text (Branding > Universal Login > Advanced Options > Custom Text)

masakudamatsu commented 1 year ago

We have customized the font color as follows: Screenshot 2023-05-31 at 14 37 52 Screenshot 2023-05-31 at 14 38 04

masakudamatsu / mima