Auth0 Universal Login Template¶

How to manage the custom Auth0 login page template used for partner white-labeling.

Prerequisites¶

Auth0 CLI: brew install auth0/auth0-cli/auth0
Access to all three tenants (dev, stage, prod)

Tenants¶

Environment	Tenant Domain
Dev	`stacksync-dev.eu.auth0.com`
Stage	`stacksync-stage.eu.auth0.com`
Prod	`stacksync.eu.auth0.com`

# First time
auth0 login --domain stacksync-dev.eu.auth0.com

# Switch between tenants
auth0 tenants use stacksync-dev.eu.auth0.com
auth0 tenants list

View the current template¶

auth0 universal-login templates show

Update the template¶

# From a file
cat template.html | auth0 universal-login templates update

Deploy to all tenants¶

TEMPLATE="path/to/auth0-login-template.html"

auth0 tenants use stacksync-dev.eu.auth0.com
cat "$TEMPLATE" | auth0 universal-login templates update

auth0 tenants use stacksync-stage.eu.auth0.com
cat "$TEMPLATE" | auth0 universal-login templates update

auth0 tenants use stacksync.eu.auth0.com
cat "$TEMPLATE" | auth0 universal-login templates update

How partner detection works in the template¶

The template is a single HTML page shared by all Auth0 apps on the tenant. It detects Rillet using:

Widget text: widget.textContent.indexOf('Rillet') — works on the login screen
State parameter: decodes the base64 state URL param to find known Rillet client IDs — works on verify identity and other screens

// Client IDs are split to avoid self-matching when scanning page HTML
var R = ['zGVj1pe2Xy81iVRN6dgz' + 'iynMLDtsytnt',  // dev
         'nqC8kYRi4UE1EmdQvZmN' + 'XtA4DKQvwSN4',  // stage
         '078JjNE4b9t5NlAtWt4BB' + '5GocoNr1bhV'];  // prod

Don't scan page HTML

An earlier approach scanned document.documentElement.innerHTML for client IDs. This always matched because the <script> tag itself contained the IDs. Client IDs must be split with string concatenation to avoid this.

Can I edit the template in the Auth0 dashboard?¶

No. Auth0's dashboard moved to a "partials" model (Branding → Universal Login → Build advanced custom screens) which manages individual screen snippets. The full HTML template we use is only manageable via the CLI/API. The dashboard doesn't expose the raw template editor anymore.

The dev template has a split layout: login form on the left, branding image on the right. The image hides on mobile (<768px). This is controlled in the <style> block with .login-wrapper, .login-form-side, and .login-image-side classes.

To change the side image, update the background-image: url(...) in .login-image-side.

Other useful commands¶

# View branding (colors, logo)
auth0 universal-login show

# View/update an Auth0 app
auth0 apps show <client_id>
auth0 apps list

# Set logo on an app
auth0 api patch "clients/<client_id>" --data '{"logo_uri": "https://..."}'

# Check tenant settings
auth0 api get "prompts"

Rillet Auth0 App Client IDs¶

Tenant	Client ID
Dev	`zGVj1pe2Xy81iVRN6dgziynMLDtsytnt`
Stage	`nqC8kYRi4UE1EmdQvZmNXtA4DKQvwSN4`
Prod	`078JjNE4b9t5NlAtWt4BB5GocoNr1bhV`

Auth0 Passwordless Email¶

The passwordless OTP email template is configured per-connection in Auth0 (not per-app). It uses Liquid syntax:

<!-- Dynamic logo -->
<img src="{% if application.client_metadata.partner_email_logo_url %}{{ application.client_metadata.partner_email_logo_url }}{% else %}default-stacksync-logo{% endif %}" />

<!-- Dynamic sender name (From field) -->
{% if application.client_metadata.partner_name %}{{ application.client_metadata.partner_name }}{% else %}Stacksync{% endif %} <login@stacksync.com>

Set partner_email_logo_url and partner_name in each partner Auth0 app's Application Metadata (Settings → Application Metadata).

From field

The From field supports Liquid for the display name only. The actual email address must be a verified domain. Full email customization requires a Custom Email Provider Action.

SVG in emails

Use PNG for the passwordless email logo — most email clients don't render SVG.