Conditional text on universal reset password prompt?

Help
,
1

I’m following the guide to invite users to the application via password change ticket.

I’ve got custom domains set up, and now I’m trying to configure the reset-password prompt.

Using your Auth0 cli, I was able to load up the storybook editor tool to modify the reset-password template.

How can I conditionally render the text? I couldn’t figure it out and ended up doing this, which I don’t think is a good solution because I’m manually updating the text in the widget:

<!DOCTYPE html>
<html lang="{{locale}}">

<head>
    {%- auth0:head -%}
    <title>Welcome to {{ application.name }} </title>
</head>

<body class="_widget-auto-layout">
    {%- auth0:widget -%}
</body>

<script>
    function getQueryParameter(name) {
        const url = window.location.href;
        const params = new URLSearchParams(url.substring(url.indexOf('#') + 1));
        return params.get(name);
      }
 
      const isInvite = getQueryParameter('type') === 'invite';

      if (isInvite) { 
        document.title = 'Set Your Password';
        const header = document.querySelector('h1');
        if (header) {
          header.textContent = 'Set Your Password';
        }
        const description = document.querySelector('p');
        if (description) {
          description.textContent = 'Please set your password to activate your account.';
        }
      }
</script>

</html>

Is there some way to have the auth0:widget use the values I have based on the param type?

2

I also face this issue. Please help me.

4

Hi @kdm,

I recommend referring to our https://auth0.com/docs/customize/login-pages/universal-login/customize-templates#login-box-image-layout for an example on how to include conditionals in your Universal Login page templates.

Let me know if you have any questions.

Thanks,
Rueben

5

Thanks, I know that, but it isn’t what I am asking about. Actually, I’m asking about the auth0_widget itself.

What you linked me does not make any changes into the auth0_widget, it just adjusts some styles. Here’s the example from docs:

 {% if prompt.name == "login" or prompt.name == "signup" %} 
        <div class="prompt-wrapper">
        {%- auth0:widget -%}
        </div>
    {% else %}
        {%- auth0:widget -%}
    {% endif %}

If I want to change the auth0 widget’s title text (“Reset. your password”) to (“Set your password”) based on a condition, how can I do that?

In my original code that I shared above, I updated these elements using querySelector because I couldn’t find an example of this in the docs.

Sorry for the confusion, please let me know if there is a way to do this.

6

Hi @kdm,

Thanks for the update and clarification.

To change the text for the specific Universal Login pages, you can follow our Customize Universal Login Text Elements documentation.

Specifically, you will want to change the reset-password prompt for each screen.

Note that you won’t be able to change the text dynamically. It will be static changes.

Thanks,
Rueben

7

This seems like customization is very limited here if we can’t change the text dynamically. The documentation specified is very misleading in that case. Auth0 docs clearly specify that we can customize the Universal page based on type=invite. We should be able to customize the page on conditional logic especially when we could have done with Classic Login Pages. We can’t use that as our company has use cases for organizations so we have to stick with Universal Login. Organizations are bound to need customizations based on conditions.

8

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