Add Dynamic Links to New Universal Login Page

Knowledge Articles
1

Problem statement

This article addresses the customers who need a link on the New Universal Login page that the user can click on to exit the login flow and go back to a specified page when calling /authorize.

Solution

Please note that as the solution utilizes a query string parameter, it could be repurposed by a malicious actor to add links to the login page - so it is recommended to have a set of URLs that can be chosen from based on the parameter sent, rather than setting a URL directly, as unlike Allowed Callback URLs and the redirect_uri parameter, they will not be validated.

<!DOCTYPE html><html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: radial-gradient(white, rgb(200, 200, 200));
      }
      .footer {
        background-color: rgb(120, 120, 120);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px 0;
        width: 100%;
        color: white;
        /* Use a high z-index for future-proofing */
        z-index: 10;
      }
      .footer p {
        text-align: center;
      }
      .footer p li {
        display: inline-block;
        margin: 0 4px;
      }
      .footer p li:not(:first-of-type) {
        margin-left: 0;
      }
      .footer p li:not(:first-of-type)::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 4px;
        height: 4px;
        margin-right: 4px;
        background-color: white;
        border-radius: 50%;
      }
      .footer a {
        color: white;
      }
    </style>
     <title>{{ prompt.screen.texts.pageTitle }}</title>
  </head>
  <body class="_widget-auto-layout">
    {%- auth0:widget -%}
     <footer class="footer">
        <ul>
        {% if transaction.params.ext-link == "link1" %}
           <li><a href="https://link1.example.com">Return to link 1</a></li>
        {% elsif transaction.params.ext-link == "link2" %}
           <li><a href="https://link2.example.com">Return to link 2</a></li>
        {% else %}
          <li><a href="https://defaultLink.example.com">Return to Default link</a></li>
        {% endif %}
        </ul>
     </footer>
  </body>
</html>

Passing the ext-link as a query string parameter (the rest of the query string parameters omitted for brevity) will populate the hyperlink in the page template with the first option.

https://YOUR_CUSTOM_DOMAIN/authorize?client_id=....&;ext-link=link1

Related References

Please check the below documentation for more details: