Custom Universal Login Modal Placement

[msmith1]

Hi there. I have a question that I’ve noticed has been asked previously but did not see any conclusive answers.

What I am trying to do is develop a custom universal login page, using the custom HTML field. I am wondering if it is possible to change the behavior of the login modal to appear in any area of my choosing within the custom HTML page, such as a sidebar rather than a popup in the center of the screen.

I have seen suggestions about universal vs. embedded login for more design flexibility, but am wondering what the limitations are with universal to achieve what I am after.

Any advice is appreciated!

[nathan.jenkins]

Hi @msmith1 , welcome to the Auth0 Community!

I would recommend taking a look at using a Custom Page Template with New Universal Login.

There is an example here showing the Auth0 prompt positioned to the left. You’ll find lots of examples on this page in the docs that should help give you ideas on what is possible when using a page template.
Hope this helps, thanks!

[msmith1]

Hi @nathan.jenkins . Thanks so much for the reply.

I was able to use that example code, but still cannot get the form to render properly when using a custom HTML login page. See attached for a screenshot of what is rendering, and below for the code taken from the demo example. Could you advise? Again, thanks so much!

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

[nathan.jenkins]

Hi @msmith1 , you’re welcome!

The Page Template works with New Universal Login, perhaps you are looking at Classic Universal Login?
I recommend taking a look at the pros and cons between them see here - Classic Vs New UL.

If you’re wanting the customize classic, take a look at the Lock Configurations and specifically this use of the prompt in a container might help.
Thanks!

[msmith1]

@nathan.jenkins I can confirm that it is the New Universal Login.