Customizing the Universal Login API

Help
,
1

Hi,
I am trying to customize the Universal Login, I’ve started by trying to customize each of the logo’s for different application logins. I’ve used the following API call and this data.

curl --request PUT
–url ‘https://{yourDomain}/api/v2/branding/templates/universal-login’
–header ‘authorization: Bearer MGMT_API_ACCESS_TOKEN’
–header ‘content-type: text/html’
–data '

Welcome to {{ application.name }} {%- auth0:head -%} {% if application.name == "Jobr-Projectr" %} #custom-prompt-logo { background-image: url('https://cnp.imgix.net/jobr-round-logo.png'); } {% elsif application.name == "Claven" %} #custom-prompt-logo { background-image: url('https://cnp.imgix.net/claven-round-icon.png'); } {% else %} #custom-prompt-logo { background-image: url('https://www.clientsandprofits.com/graphics/cnp-round-icon150x.png'); } {% endif %} {%- auth0:widget -%} '

I got a 204 with no messages back. I see no changes in the universal login.

I’ve used this help article to get this far can anyone point out what I might be missing.
https://auth0.com/docs/customize/login-pages/universal-login/customize-templates

3

Hey Scott!

It looks like the data you are sending is missing some HTML components to format the page correctly with the custom CSS; take a look here!

It should look a little more something like this!

<!DOCTYPE html>
<html>
<head>
<title>
Welcome to {{ application.name }}
</title>
{%- auth0:head -%} 
<style>
{% if application.name == "Jobr-Projectr" %} 
#custom-prompt-logo { 
  background-image: url('https://cnp.imgix.net/jobr-round-logo.png'); 
  
} 
{% elsif application.name == "Claven" %} 
#custom-prompt-logo { 
  background-image: url('https://cnp.imgix.net/claven-round-icon.png'); 
  
} {% else %} 
#custom-prompt-logo { 
  background-image: url('https://www.clientsandprofits.com/graphics/cnp-round-icon150x.png'); 
  
} 
  {% endif %}
</style>
</head>
<body class="_widget-auto-layout _use-custom-prompt-logo">
{%- auth0:widget -%} 
</body>
</html>

Stringified format.

'<!DOCTYPE html>\n<html>\n<head>\n<title>\nWelcome to {{ application.name }}\n</title>\n{%- auth0:head -%} \n<style>\n{% if application.name == \"Jobr-Projectr\" %} \n#custom-prompt-logo { \n  background-image: url('https://cnp.imgix.net/jobr-round-logo.png'); \n  \n} \n{% elsif application.name == \"My App\" %} \n#custom-prompt-logo { \n  background-image: url('https://cnp.imgix.net/claven-round-icon.png'); \n  \n} {% else %} \n#custom-prompt-logo { \n  background-image: url('https://www.clientsandprofits.com/graphics/cnp-round-icon150x.png'); \n  \n} \n  {% endif %}\n</style>\n</head>\n<body class=\"_widget-auto-layout _use-custom-prompt-logo\">\n{%- auth0:widget -%} \n</body>\n</html>\n'

Also, ensure you have configured a custom domain in your tenant, which is needed to customize your universal login template. See here.

Let me know if this helps!

1 Like
4

Hi team! :raised_hand_with_fingers_splayed:

This is just a heads-up that we’ll be hosting an Ask Me Anything (AMA) session all about Universal Login, and this question is relevant to our event. Auth0 by Okta Subject Matter Experts will answer your question on Thursday, October 24th, from 9 a.m. to 11 a.m. PST.

:thinking: Have more questions about customizing your login experience, boosting security, or implementing advanced features?

:point_right: Drop your questions in this thread before October 23rd, and our experts will provide answers during the AMA!

:tada: Plus, you’ll earn points and a special badge for participating!

Ask Me Anything: Tailor Your Experience with Universal Login — From Low-Code to Pro-Code

Thanks
Dawid

1 Like
5

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