UI shift animation after implementing Universal Login branding template

Get Help
,
1

Background -

  • I shifted from classic login to universal login and wanted to match few design elements in the Login screen hence added a branding template.

Issue -

  • I am seeing a weird animation in the login prompt. The prompt shifts from the top-left side to the center.
  • I have added a CSS to keep the prompt at center as after adding the template, I login prompt was shifted to top-left. This is the CSS -

<body> <div class="widget-center-align" > {%- auth0:widget -%} </div> <style> :root { --prompt-width: 500px; } .widget-center-align{ display: flex; justify-content: center; height: 100%; align-items: center; } </style> </body>

Can someone help me to remove this behaviour?

3

Hi @giri_sh_irke,

Welcome to the Auth0 Community!

The positioning of the login widget should be modified from within the dashboard.
You will need to reset the template using the DELETE /api/v2/branding/templates/universal-login endpoint. After that head over to the auth0 dashboard Branding > Universal Login > Customization Options and then select Page Background.

Screenshot 2025-04-14 at 22.24.00
Screenshot 2025-04-14 at 22.24.002940×1848 280 KB

You will be able to select the widget positioning form here.

If you have any other questions feel free to reach out.

Have a good one,
Vlad