Liquid Widgets not working in Custom Template

Help
,
1

After setting and verifying a custom domain, i am trying to customize my login page.
Following the documentation (Customize Universal Login Page Templates), i added the simplest example given by the doc.

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

But when i preview, the liquid cod acts like as a string

image
image1061×775 43 KB

image
image1044×472 8.9 KB

How can i fix this?

3

Hi @rafael4

Welcome to the Auth0 Community!

Thank you for posting your question. The provided code snippet and documentation link refer to the Universal Login Page Templates, which can be updated only via Management API. To use this feature, you’ll need to add a custom domain.

The screenshot you’ve provided is from the Classic Universal Login Page → Customize Classic Login Pages
They do not use liquid syntax and entirely rely on JS customization.

I hope this will help you!
Dawid

4

Thank you for your reply @dawid.matuszczyk.
One other question… is there any way to check a preview for the Universal Login Page templates, as it is just updated via management API?

5

If you will use Auth0 CLI, you can use a code editor and storybook to edit and live preview the page → https://auth0.com/docs/customize/login-pages/universal-login/customize-templates#using-the-auth0-cli-

6

I dont know if i am doing the right way, but the preview image does not look like what happens when i actually enter the login page in the browser

image
image1891×1005 156 KB

image
image1920×1037 105 KB

The widget should not be on center… should looks like in the first screen

<!DOCTYPE html>
<html lang="{{locale}}">
<head>
  {%- auth0:head -%}
  <style>
    html, body {
      height: 100%; /* Make sure html and body are full height */
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      overflow: hidden; /* Prevent scrollbars */
    }
    body {
      background-image: url("https://imagizer.imageshack.com/img923/5390/cfBpur.jpg");
      background-size: cover;
      background-position: center center; /* Center the background image */
      background-repeat: no-repeat;
    }
    .prompt-wrapper {
      position: absolute;
      top: 50%;
      right: 0%; /* Adjust this to align with the white background in your image */
      transform: translate(0, -50%); /* Center the div on the page vertically */
      width: 480px; /* Width of the login form */
      background-color: rgba(255, 255, 255); /* Semi-transparent white background */
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
    }

    @media (max-width: 768px) {
      .prompt-wrapper {
        right: 5%; /* Less space from the right on smaller screens */
        left: 5%; /* Prevent the prompt from sticking to the edges on smaller screens */
        width: auto; /* Adjust width for smaller screens */
        margin: 0; /* Remove margin for smaller screens */
      }
    }
  </style>
  <title>{{ prompt.screen.texts.pageTitle }}</title>
</head>
<body class="_widget-auto-layout">
  {% if prompt.name == "login" or prompt.name == "signup" %}
    <div class="prompt-wrapper">
      {%- auth0:widget -%}
    </div>
  {% else %}
    {%- auth0:widget -%}
  {% endif %}
</body>
</html>
7

Actually, i realized that Login with Identifier First is the prompt login-id

image
image1897×1009 140 KB

But nothing that i change in the prompt-wrapper class changes the preview and there is a weird red alert image being displayed on right

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.