Security business menu
Security business
HOME
To be elected
cause
Service
Handling Manufacturer
Examples/reports/
Blog/Glossary
Seminar/
video on demand
Event/Seminar
video on demand

Okta

Octa

Introduction

Auth0 New Universal Login has two screen customization methods. This page introduces an example of customizing the New Universal Login screen using a page template.

  • Customization using page templates
    • You can set background color gradation, add header/footer, etc. by using page template by Liquid template language.
    • Page templates are applied via the Management API

premise

The information on functions and settings described on this page is current as of June 2023.

Customization using page templates requires a custom domain configuration in the target Auth0 tenant. For more information on setting up a custom domain, please see How to Set Up an Auth0 Custom Domain.

Functional overview

  • Liquid Template Language
    It is open source published by Shopify and acts as a bridge between HTML and data.
    By using the Liquid template language, data such as dynamic user information can be easily embedded in static HTML and displayed on a web browser.
  • page template
    Auth0 allows you to customize every page in your login flow using Page Templates powered by Liquid. When customizing, edit all pages with common HTML.
  • How to apply a page template
    Management API: Apply page templates via /api/v2/branding/templates/universal-login. The application operation is execution from Management API Explorer, execution by curl command, etc.

Customization settings overview

  • page template creation

Write your customizations in HTML.
The tags that are required for HTML description in New Universal Login screen customization are as follows.

required tag Considerations
{%- auth0:head -%}
  • Contains HTML for widgets that are displayed on all pages (size, color changes, etc.)
  • Described in the <head> tag
{%- auth0:widget -%}
  • Contains the tags necessary to describe the widget (add content, etc.)

See Customize New Universal Login Pages - Auth0 docs for available variables and examples of creating one.

  • Management API access token issuance

Issue an access token for the Management API to apply customization.

  • Application of customization by curl command

In the setting example on this page, customization is applied by executing the curl command. When executing the curl command (Linux environment), specify the options as follows.

> curl --request PUT --url 'https://<configured custom domain>/api/v2/branding/templates/universal-login' --header 'authorization: Bearer <Management API access token>' --header 'content-type: text/html' --data '<HTML with customization content>'

In addition, it is necessary to change the format of the HTML description according to the specification of context-type.

context-type Considerations
text/html
  • No HTML formatting required
application/json
  • Requires modification of HTML to JSON format
  • Specified when executing from Management API Explorer (cannot be changed)
  • Customization result confirmation

Use the Auth0-linked web application to check whether the customization has been reflected on the New Universal Login screen.

Customization setting example

Here are two examples of simple customization.
In either case, prepare an Auth0-linked web application in advance. For details on how to link Auth0 with the sample application, please refer to How to configure the link between Auth0 and the sample application.

Add background color/gradation

  • page template creation

1. Describe the vertical gradation setting in the background color in HTML

<!DOCTYPE html> <html lang="{{locale}}"> <head> {%- auth0:head -%} <style> body{ // Vertical gradation (color at the top of the screen, color at the bottom of the screen) ) background-image: linear-gradient(#ffffff, #afeeee);} </style> <title> {{ prompt.screen.texts.pageTitle }} </title> </head> <body class="_widget- auto-layout"> {%- auth0:widget -%} </body> </html>

2. Delete the line breaks in the created HTML description and change it to a single line of text

<!DOCTYPE html><html lang="{｛locale｝}"> <head>{%- auth0:head -%}<style> body{ background-image: 
linear-gradient(#ffffff, #afeeee); }</style><title> {｛ prompt.screen.texts.pageTitle ｝} </title>
</head> <body class="_widget-auto-layout">{%- auth0:widget -%} </body></html>
  • Management API access token issuance

1. On the Auth0 administration screen, click [Applications] > [APIs]

2. Click Auth0 Management API

3. Click the [Test] tab *This time, use an access token for testing

4. Copy the access_token value in the Response field

  • Application of customization by curl command
  • Execute the following command to apply the customized contents.
> curl --request PUT --url 'https://<configured custom domain>/api/v2/branding/templates/universal-login' --header 'authorization: Bearer eyJhbGciOiJSUzI1NiIs... Z2LGsGdBICdLedwUClQaMu0Q' --header 'content-type: text/html' --data '<!DOCTYPE html><html lang="{{locale}}"> <head>{%- auth0:head -%}<style> body { background-image: linear-gradient(#ffffff, #afeeee); }</style><title> {{ prompt.screen.texts.pageTitle }} </title></head> <body class="_widget -auto-layout">{%- auth0:widget -%} </body></html>'
  • Customization result confirmation

1. Perform login operation on the Auth0 linked web application screen

2. Confirm that gradation has been added to the background color on the login screen (New Universal Login).

add header

  • page template creation

1. Describe header addition settings in HTML

<!DOCTYPE html> <html lang="{{locale}}"> <head> {%- auth0:head -%} <style>.header { background-color: #add8e6; // Header background color position: fixed; // Specify absolute position based on window top: 0; // Position from top width: 100%; // Width of header padding: 16px 0; color: #ffffff; //header text color } .header ul { text-align: center; Add to inline of ul } </style> <title> {{ prompt.screen.texts.pageTitle }} </title> </head> <body class="_widget-auto-layout"> {%- auth0:widget -%} <header class="header"> //Add a header <ul> <li>This is the header</li> //Characters in the header </ul> </header> </body> </ html>

2. Delete the line breaks in the created HTML description and change it to a single line of text

<!DOCTYPE html><html lang="{{locale}}"> <head>{%- auth0:head -%} <style>.header { background-color: #add8e6; position: fixed; top: 0; width: 100%; padding: 16px 0; color: #ffffff;}.header ul {text-align: center; screen.texts.pageTitle }} </title></head> <body class="_widget-auto-layout">{%- auth0:widget -%}<header class="header"> <ul><li> Here is the header</li> </ul></header></body></html>
  • Management API access token issuance
  • Issue an access token in the same way as [Add background color/gradation]
  • Application of customization by curl command
  • Execute the following command to apply the customized contents.
> curl --request PUT --url 'https://<configured custom domain>/api/v2/branding/templates/universal-login' --header 'authorization: Bearer eyJhbGciOiJSUzI1NiIs... Z2LGsGdBICdLedwUClQaMu0Q' --header 'content-type: text/html' --data '<!DOCTYPE html><html lang="{{locale}}"> <head>{%- auth0:head -%} <style> .header { background-color: #add8e6; position: fixed; top: 0; width: 100%; padding: 16px 0; : inline-block;}</style><title> {{ prompt.screen.texts.pageTitle }} </title></head> <body class="_widget-auto-layout">{%- auth0:widget -%}<header class="header"> <ul><li>This is a header</li></ul></header></body></html>'
  • Customization result confirmation

1. Perform login operation on the Auth0 linked web application screen

2. Confirm that the header has been added on the login screen (New Universal Login)

in conclusion

On this page, we introduced an implementation example using a page template as a method of customizing the New Universal Login screen. Compared to the customization function provided on the Auth0 management screen, more detailed customization is possible.

You can also try New Universal Login screen customization in the free Auth0 trial environment. If you are interested in customizing the New Universal Login screen, please contact us.

reference

Click here for a list of Customer Identity Cloud (Auth0) basic setting operation guides

Inquiry/Document request

In charge of Macnica Okta Co., Ltd.

inquiry Document request

Mon-Fri 8:45-17:30