Advanced Customizations for (ACUL) allow custom client-rendered interfaces for each screen in Universal Login. The following diagram outlines how screens that use ACUL are built, hosted, configured, and displayed to the end user.
A diagram of how Advanced Customization for Universal Login screens are rendered.

​
Advanced Customizations flow

  1. Your developers can build custom interfaces for specific Universal Login screens using your preferred front-end tech stack (such as React, Angular, or Vue) and any internal design systems, component libraries, or third-party CSS/Javascript.
  2. Your CI/CD pipeline then bundles those interfaces and deploys them to your content delivery network (CDN).
  3. Developers use the Auth0 Management API to configure an advanced rendering mode for specific Universal Login screens and provide links to your CDN-hosted asset bundles.
  4. When users authenticate, Universal Login determines which screen to show and the proper rendering mode for the requested screen.
  5. If the current screen is not configured to use advanced rendering mode, Universal Login defaults to the regular Universal Login interface, including any customizations you made to the default interface.
  6. If the current screen is configured to use advanced rendering mode, Universal Login returns the advanced rendering mode page template.
  7. When submitting data from custom interfaces, the server expects the data to be submitted via a POST request to the same page as url-encoded form data using the content-type application/x-www-form-urlencoded. Sending JSON results in an error.
  8. The server validates the submitted data. If there are any errors, the server returns the current screen and includes the errors in the context object. If there are no errors, the server determines which screen to show next and reviews the rendering mode for it.

​
Advanced Rendering Mode Page Template

Below is an advanced rendering mode basic HTML page template. It includes:
  • The language based on ul_locales in the html tag.
  • Universal Login’s standard <meta> tags and the default screen title, which can be removed when configuring advanced rendering mode.
  • A Javascript object containing the Auth0 tenant configuration and authentication transaction data.
  • HTML elements in the <head> tag that reference your configured asset bundles.
There is no root div element in the <body> tag because some front-end frameworks prefer to create this div in the initialization step.
<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <title>My App | Login</title>
    <link rel="stylesheet" href="https://cdn.saas.app/main.css" />
    <script type="text/javascript">
      window.universal_login_context = {...};
    </script>
    <script src="https://cdn.sass.app/bundle.js" defer></script>
  </head>
  <body></body>
</html>