Customize New Universal Login Pages

Customize New Universal Login Pages

You can customize the New Universal Login pages by providing a page template using the Liquid template language. To learn more about Liquid, read the Introduction to Liquid on Github. You can update the ULP templates only using the Management API. This capability can only be used if the tenant has Custom Domains enabled.

Page templates let you define the content displayed around the Universal Login widgets (e.g., the Login box, the MFA box). The same template is used for all pages, helping you implement a consistent, branded login experience with less effort.

The simplest template you can write is:

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body></html>

Was this helpful?

/

The following tags must be present in the template:

  • auth0:widget - Includes the HTML for the widget that is displayed in every page (e.g., Login, Reset Password)

  • auth0:head - Includes tags that are required to render the widget

If you use the class="_widget-auto-layout" in the <body> element, the widget will be centered in the page. If you want to position it yourself, you can omit it.

Page template variables

The page templates have a set of context variables that can be used to impact how the page is rendered. This allows you to implement scenarios like:

  • Render different content depending on the Application (for example, you own two brands that need a different page design).

  • Render different content depending on the Prompt (for example, in the Login page you want to add content explaining what the application does, but in the MFA flow, you prefer to only have the MFA box).

  • Add a footer with links to the tenant's support page or email.

Available variables

The available variables are:

  • The login page application's settings:

    • application.id

    • application.name

    • application.logo_url

    • application.metadata

  • Universal Login branding settings:

    • branding.logo_url

    • branding.colors.primary

    • branding.colors.page_background

  • Tenant's settings:

    • tenant.friendly_name

    • tenant.support_email

    • tenant.support_url

  • When a user logs in through an Organization, organization information:

    • organization.id

    • organization.display_name

    • organization.name

    • organization.metadata

    • organization.branding.logo_url

    • organization.branding.colors.primary

    • organization.branding.colors.page_background

  • Information about the current Universal Login screen.

    • locale: Locale used to render the login pages, matching one of the supported tenant languages

    • prompt.name: Name of the Universal Login prompt being rendered

    • prompt.screen.name: Name of the Universal Login screen being rendered.

    • prompt.screen.texts: All the localized texts needed in the screen being rendered.

  • The term prompt is used to refer to a specific step in the login flow. Each prompt can have one or more screens. Below is the list of available prompts:

    /

    Screen: redeem-ticket

    Key Value
    pageTitle Loading...
    description Javascript is not enabled on your browser, please click button to continue.
    buttonText Continue

    consent reference screenshot

    Text Key
    Authorize ${clientName} pageTitle
    Authorize App title
    Hi ${userName}, pickerTitle
    Tenant and Audience selector audiencePickerAltText
    ${clientName} is requesting access to your account. messageMultipleTenants
    ${clientName} is requesting access to your "${companyName}" account. messageSingleTenant
    Accept acceptButtonText
    Decline declineButtonText
    ${companyName} logoAltText
    Invalid action invalid-action
    Audience is required invalid-audience
    Invalid scope, must be an array invalid-scope

    Screen: device-code-activation

    device-code-activation reference screenshot

    Text Key
    Enter your device code to log in ${clientName} pageTitle
    Continue buttonText
    Enter the code displayed on your device description
    Enter your one-time code placeholder
    Device Activation title
    Invalid or expired user code invalid-expired-code
    Please enter the code displayed on your device no-code
    The code you entered is invalid invalid-code
    ${companyName} logoAltText

    Screen: device-code-activation-allowed

    device-code-activation-allowed reference screenshot

    Text Key
    Login successful ${clientName} pageTitle
    Your device is now connected. description
    Congratulations, you're all set! eventTitle

    Screen: device-code-activation-denied

    device-code-activation-denied reference screenshot

    Text Key
    Login error ${clientName} pageTitle
    We are not able to activate your device. description
    Activation Denied eventTitle

    Screen: device-code-confirmation

    device-code-confirmation reference screenshot

    Text Key
    Confirm your device code to log in ${clientName} pageTitle
    Please confirm this is the code displayed on your ${clientName}: description
    Secure code inputCodeLabel
    Device Confirmation title
    Confirm confirmButtonText
    Cancel cancelButtonText
    If you did not initiate this action or you do not recognize this device select cancel. confirmationText
    ${companyName} logoAltText

    Screen: email-otp-challenge

    email-otp-challenge reference screenshot

    Text Key
    Enter your email code to log in ${clientName} pageTitle
    Continue buttonText
    We've sent an email with your code to ${email} description
    Enter the code placeholder
    Resend resendActionText
    Didn't receive an email? resendText
    Verify Your Identity title
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    We couldn't verify the code. Please try again later. authenticator-error
    You have exceeded the amount of emails. Wait a few minutes and try again. too-many-email
    ${companyName} logoAltText

    Screen: email-verification-result

    email-verification-result reference screenshot

    Text Key
    Email verification status ${clientName} pageTitle
    Email Verified verifiedTitle
    Error errorTitle
    Your email address was successfully verified. verifiedDescription
    This account is already verified. alreadyVerifiedDescription
    User account does not exist or the verification code is invalid. invalidAccountOrCodeDescription
    Your email address could not be verified. unknownErrorDescription
    Back to "${clientName}" buttonText
    This ticket was expired. auth0-users-expired-ticket
    Something went wrong, please try again later. custom-script-error-code
    This ticket was already used. auth0-users-used-ticket
    Something went wrong, please try again later auth0-users-validation

    Screen: accept-invitation

    accept-invitation reference screenshot

    Text Key
    Accept your invitation to sign up ${clientName} pageTitle
    You've Been Invited! title
    ${inviterName} has invited you (${email}) to join ${companyName} on ${clientName}. description
    Continue buttonText
    ${companyName} logoAltText

    Screen: login

    login reference screenshot

    Text Key
    Log in to ${clientName} pageTitle
    Welcome title
    Log in to ${companyName} to continue to ${clientName}. description
    Or separatorText
    Continue buttonText
    Continue with ${connectionName} federatedConnectionButtonText
    Sign up footerLinkText
    ${footerLinkText} signupActionLinkText
    Don't have an account? footerText
    ${footerText} signupActionText
    Forgot password? forgotPasswordText
    Password passwordPlaceholder
    Username or email address usernamePlaceholder
    Email address emailPlaceholder
    Edit editEmailText
    Alerts alertListTitle
    Dev Keys devKeysAlertTitle
    One or more of your connections are currently using Auth0 development keys and should not be used in production. devKeysAlertMessage
    https://auth0.com/docs/connections/social/devkeys devKeysAlertUrl
    Learn More devKeysAlertLinkText
    You've Been Invited! invitationTitle
    Log in to accept ${inviterName}'s invitation to join ${companyName} on ${clientName}. invitationDescription
    Wrong username or password wrong-credentials
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    Email is not valid. invalid-email-format
    Wrong email or password wrong-email-credentials
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    We are sorry, something went wrong when attempting to login authentication-failure
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Invalid connection no-db-connection
    We have detected a potential security issue with this account. To protect your account, we have prevented this login. Please reset your password to proceed. password-breached
    Your account has been blocked after multiple consecutive login attempts. user-blocked
    Too many login attempts for this user. Please wait, and try again later. same-user-login
    Please enter an email address no-email
    Password is required no-password
    Username is required no-username
    ${companyName} logoAltText

    Screen: login-id

    login-id reference screenshot

    Text Key
    Log in to ${clientName} pageTitle
    Welcome title
    Log in to ${companyName} to continue to ${clientName}. description
    Or separatorText
    Continue buttonText
    Continue with ${connectionName} federatedConnectionButtonText
    Sign up footerLinkText
    ${footerLinkText} signupActionLinkText
    Don't have an account? footerText
    ${footerText} signupActionText
    Password passwordPlaceholder
    Username or email address usernamePlaceholder
    Email address emailPlaceholder
    Edit editEmailText
    Alerts alertListTitle
    Dev Keys devKeysAlertTitle
    One or more of your connections are currently using Auth0 development keys and should not be used in production. devKeysAlertMessage
    https://auth0.com/docs/connections/social/devkeys devKeysAlertUrl
    Learn More devKeysAlertLinkText
    Wrong username or password wrong-credentials
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    Email is not valid. invalid-email-format
    Wrong email or password wrong-email-credentials
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    We are sorry, something went wrong when attempting to login authentication-failure
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Invalid connection no-db-connection
    Email does not match any enterprise directory no-hrd-connection
    We have detected a potential security issue with this account. To protect your account, we have prevented this login. Please reset your password to proceed. password-breached
    Your account has been blocked after multiple consecutive login attempts. user-blocked
    Too many login attempts for this user. Please wait, and try again later. same-user-login
    Please enter an email address no-email
    Password is required no-password
    Username is required no-username
    ${companyName} logoAltText

    Screen: login-password

    login-password reference screenshot

    Text Key
    Enter your password to log in ${clientName} pageTitle
    Enter Your Password title
    Enter your password for ${companyName} to continue to ${clientName} description
    Or separatorText
    Continue buttonText
    Continue with ${connectionName} federatedConnectionButtonText
    Sign up footerLinkText
    ${footerLinkText} signupActionLinkText
    Don't have an account? footerText
    ${footerText} signupActionText
    Forgot password? forgotPasswordText
    Password passwordPlaceholder
    Username or email address usernamePlaceholder
    Email address emailPlaceholder
    Edit editEmailText
    Edit email address editLinkScreenReadableText
    Alerts alertListTitle
    Dev Keys devKeysAlertTitle
    One or more of your connections are currently using Auth0 development keys and should not be used in production. devKeysAlertMessage
    https://auth0.com/docs/connections/social/devkeys devKeysAlertUrl
    Learn More devKeysAlertLinkText
    You've Been Invited! invitationTitle
    Log in to accept ${inviterName}'s invitation to join ${companyName} on ${clientName}. invitationDescription
    ${companyName} logoAltText
    Use Fingerprint or Face Recognition useBiometricsText
    Wrong username or password wrong-credentials
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    Email is not valid. invalid-email-format
    Wrong email or password wrong-email-credentials
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    We are sorry, something went wrong when attempting to login authentication-failure
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Invalid connection no-db-connection
    We have detected a potential security issue with this account. To protect your account, we have prevented this login. Please reset your password to proceed. password-breached
    Your account has been blocked after multiple consecutive login attempts. user-blocked
    Too many login attempts for this user. Please wait, and try again later. same-user-login
    Please enter an email address no-email
    Password is required no-password
    Username is required no-username

    Screen: login-email-verification

    login-email-verification reference screenshot

    Text Key
    Enter your email code to log in ${clientName} pageTitle
    Continue buttonText
    We've sent an email with your code to ${email} description
    Enter the code placeholder
    Resend resendActionText
    Didn't receive an email? resendText
    Verify Your Email title
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    We couldn't verify the code. Please try again later. authenticator-error
    You have exceeded the amount of emails. Wait a few minutes and try again. too-many-email
    ${companyName} logoAltText

    Screen: mfa-enroll-result

    mfa-enroll-result reference screenshot

    Text Key
    MFA enrollment status pageTitle
    You're All Set! enrolledTitle
    You have successfully added a new authentication factor. enrolledDescription
    Invalid Link invalidTicketTitle
    This link is invalid or expired. invalidTicketDescription
    Expired Link expiredTicketTitle
    This link is expired. expiredTicketDescription
    Already used alreadyUsedTitle
    This link has already been used. Please get a new link to enroll with Multi-factor Authentication. alreadyUsedDescription
    Two-factor Verification has Already Been Enabled. alreadyEnrolledDescription
    Something Went Wrong genericError

    Screen: mfa-login-options

    mfa-login-options reference screenshot

    Text Key
    List of other login methods ${clientName} pageTitle
    Go back backText
    Other Methods title
    SMS authenticatorNamesSMS
    Phone authenticatorNamesVoice
    Phone authenticatorNamesPhone
    Notification via ${appName} app authenticatorNamesPushNotification
    Google Authenticator or similar authenticatorNamesOTP
    Email authenticatorNamesEmail
    Recovery code authenticatorNamesRecoveryCode
    Notification via DUO app authenticatorNamesDUO
    Security Key authenticatorNamesWebauthnRoaming
    Fingerprint or Face Recognition authenticatorNamesWebauthnPlatform

    Screen: mfa-begin-enroll-options

    mfa-begin-enroll-options reference screenshot

    Text Key
    Add another authentication method ${clientName} pageTitle
    Go back backText
    Keep Your Account Safe title
    Add another authentication method. description
    ${companyName} logoAltText
    SMS authenticatorNamesSMS
    Phone authenticatorNamesVoice
    Phone authenticatorNamesPhone
    Notification via ${appName} app authenticatorNamesPushNotification
    Google Authenticator or similar authenticatorNamesOTP
    Email authenticatorNamesEmail
    Recovery code authenticatorNamesRecoveryCode
    Notification via DUO app authenticatorNamesDUO
    Security Key authenticatorNamesWebauthnRoaming
    Fingerprint or Face Recognition authenticatorNamesWebauthnPlatform

    Screen: mfa-email-challenge

    mfa-email-challenge reference screenshot

    Text Key
    Enter your email code to log in ${clientName} pageTitle
    Go Back backText
    Continue buttonText
    We've sent an email with your code to description
    Try another method pickAuthenticatorText
    Enter the code placeholder
    Remember this device for 30 days rememberMeText
    Resend resendActionText
    Didn't receive an email? resendText
    Verify Your Identity title
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    We couldn't verify the code. Please try again later. authenticator-error
    Notification was not sent. Try resending the code. no-transaction-in-progress
    You have exceeded the amount of emails. Wait a few minutes and try again. too-many-email
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    We couldn't send the email. Please try again later. mfa-email-challenge-authenticator-error
    ${companyName} logoAltText

    Screen: mfa-email-list

    mfa-email-list reference screenshot

    Text Key
    List of available email addresses ${clientName} pageTitle
    Go back backText
    Enrolled Email Addresses title

    Screen: mfa-otp-enrollment-qr

    mfa-otp-enrollment-qr reference screenshot

    Text Key
    Scan the code to log in using a one-time password ${clientName}" pageTitle
    Secure Your Account title
    Scan the QR Code below using your preferred authenticator app and then enter the provided one-time code below. description
    Continue buttonText
    Trouble Scanning? codeEnrollmentText
    Try another method pickAuthenticatorText
    Enter your one-time code placeholder
    Then separatorText
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    You are already enrolled on MFA. user-already-enrolled
    ${companyName} logoAltText

    Screen: mfa-otp-enrollment-code

    mfa-otp-enrollment-code reference screenshot

    Text Key
    Copy the code to log in using a one-time password ${clientName} pageTitle
    Go back backText
    Continue buttonText
    Secure code to copy altText
    Copy code copyCodeButtonText
    Manually enter the following code into your preferred authenticator app and then enter the provided one-time code below. description
    Try another method pickAuthenticatorText
    Enter your one-time code placeholder
    Secure Your Account title
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    ${companyName} logoAltText

    Screen: mfa-otp-challenge

    mfa-otp-challenge reference screenshot

    Text Key
    Enter your one-time password to log in ${clientName}
    Verify Your Identity title
    Check your preferred one-time password application for a code. description
    Continue buttonText
    Try another method pickAuthenticatorText
    Enter your one-time code placeholder
    Remember this device for 30 days rememberMeText
    We couldn't verify the code. Please try again later. authenticator-error
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    ${companyName} logoAltText
    Use password usePasswordText

    Screen: mfa-phone-challenge

    mfa-phone-challenge reference screenshot

    Text Key
    Use your phone number to log in ${clientName} pageTitle
    Verify Your Identity title
    We will send a 6-digit code to the following phone number: description
    Continue continueButtonText
    Choose another phone number. changePhoneText
    Text message smsButtonText
    Voice call voiceButtonText
    How do you want to receive the code? chooseMessageTypeText
    Try another method pickAuthenticatorText
    Enter your phone number placeholder
    There was a problem sending the SMS send-sms-failed
    There was a problem making the voice call send-voice-failed
    Phone number can only include digits. invalid-phone-format
    It seems that your phone number is not valid. Please check and retry. invalid-phone
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-sms
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-voice
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    Please enter a phone number no-phone
    ${companyName} logoAltText

    Screen: mfa-phone-enrollment

    mfa-phone-enrollment reference screenshot

    Text Key
    Enter your phone number to log in using a phone code ${clientName} pageTitle
    Secure Your Account title
    Enter your country code and phone number to which we can send a 6-digit code: description
    Continue continueButtonText
    Text message smsButtonText
    Voice call voiceButtonText
    How do you want to receive the code? chooseMessageTypeText
    Try another method pickAuthenticatorText
    Enter your phone number placeholder
    There was a problem sending the SMS send-sms-failed
    There was a problem making the voice call send-voice-failed
    We couldn't send the SMS. Please try again later. sms-authenticator-error
    Phone number can only include digits. invalid-phone-format
    It seems that your phone number is not valid. Please check and retry. invalid-phone
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-sms
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-voice
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    Please enter a phone number no-phone
    ${companyName} logoAltText

    Screen: mfa-push-welcome

    mfa-push-welcome reference screenshot

    Text Key
    Install the application ${clientName} pageTitle
    Secure Your Account title
    In order to continue, install the ${appName} app via the app store from your mobile device. description
    Google Play androidButtonText
    Continue buttonText
    App Store iosButtonText
    Try another method pickAuthenticatorText
    ${companyName} logoAltText

    Screen: mfa-push-enrollment-qr

    mfa-push-enrollment-qr reference screenshot

    Text Key
    Scan the code to log in using a push notification ${clientName} pageTitle
    Secure Your Account title
    Scan the QR Code below using the ${appName} app on your mobile device. description
    Try another method pickAuthenticatorText
    Continue buttonText
    You must scan the QR code with the ${appName} app on your mobile device. enrollment-transaction-pending
    ${companyName} logoAltText

    Screen: mfa-push-challenge-push

    mfa-push-challenge-push reference screenshot

    Text Key
    Accept the push notification to log in ${clientName} pageTitle
    Verify Your Identity title
    We’ve sent a notification to the following device via the ${appName} app: description
    I've responded on my device buttonText
    Try another method pickAuthenticatorText
    Remember this device for 30 days rememberMeText
    Resend resendActionText
    Didn't receive a notification? resendText
    Manually Enter Code enterOtpCode
    OR separatorText
    You must accept the notification via the "${appName}" app on your mobile device. challenge-transaction-pending
    We have not received a confirmation, please slow down. polling-interval-exceeded
    We have received too many notification requests. Wait a few minutes and try again. too-many-push
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    We have not received a confirmation, please try scanning the code again. mfa-push-verify-transaction-pending
    We couldn't verify the enrollment. Please try again later. mfa-push-verify-authenticator-error
    We couldn't send the notification. Please try again later. mfa-push-challenge-authenticator-error
    Notification rejected transaction-rejected
    ${companyName} logoAltText

    Screen: mfa-push-list

    mfa-push-list reference screenshot

    Text Key
    List of available devices ${clientName} pageTitle
    Go back backText
    Registered Devices title

    Screen: mfa-recovery-code-enrollment

    mfa-recovery-code-enrollment reference screenshot

    Text Key
    Copy your recovery code for safe keeping ${clientName} pageTitle
    Almost There! title
    Copy this recovery code and keep it somewhere safe. You’ll need it if you ever need to log in without your device. description
    Secure code to copy altText
    Continue buttonText
    I have safely recorded this number checkboxText
    Copy code copyCodeButtonText
    Please confirm you have recorded the code no-confirmation
    ${companyName} logoAltText

    Screen: mfa-recovery-code-challenge

    mfa-recovery-code-challenge reference screenshot

    Text Key
    Enter your recovery code to log in ${clientName} pageTitle
    Verify Your Identity title
    Enter the recovery code you were provided during your initial enrollment. description
    Continue buttonText
    Try another method pickAuthenticatorText
    Enter your recovery code placeholder
    The code you entered is invalid invalid-code
    Recovery code must have 24 alphanumeric characters invalid-code-format
    We couldn't verify the code. Please try again later. authenticator-error
    Please confirm you have recorded the code no-confirmation
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    ${companyName} logoAltText

    Screen: mfa-country-codes

    mfa-country-codes reference screenshot

    Text Key
    Select your country code ${clientName} pageTitle
    Go back backText
    Select a Country Code title

    Screen: mfa-sms-enrollment

    mfa-sms-enrollment reference screenshot

    Text Key
    Enter your phone number to log in using a text message ${clientName} pageTitle
    Secure Your Account title
    Enter your phone number below. An SMS will be sent to that number with a code to enter on the next screen. description
    Continue buttonText
    Try another method pickAuthenticatorText
    Enter your phone number placeholder
    There was a problem sending the SMS send-sms-failed
    Phone number can only include digits. invalid-phone-format
    Seems that your phone number is not valid. Please check and retry. invalid-phone
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-sms
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    Please enter a phone number no-phone
    ${companyName} logoAltText

    Screen: mfa-sms-challenge

    mfa-sms-challenge reference screenshot

    Text Key
    Enter your phone code to log in ${clientName} pageTitle
    Verify Your Identity title
    We've sent a text message to: description
    Continue buttonText
    Edit editText
    Edit phone number editLinkScreenReadableText
    Try another method pickAuthenticatorText
    Enter the 6-digit code placeholder
    Remember this device for 30 days rememberMeText
    Resend resendActionText
    Didn't receive a code? resendText
    or resendVoiceActionSeparatorTextBefore
    get a call resendVoiceActionText
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    Invalid or expired user code invalid-expired-code
    There was a problem sending the SMS send-sms-failed
    We couldn't verify the code. Please try again later. authenticator-error
    We couldn't send the SMS. Please try again later. sms-authenticator-error
    Notification was not sent. Try resending the code. no-transaction-in-progress
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-sms
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    ${companyName} logoAltText

    Screen: mfa-sms-list

    mfa-sms-list reference screenshot

    Text Key
    List of available phone numbers ${clientName} pageTitle
    Go back backText
    Enrolled Phone Numbers title

    Screen: mfa-voice-enrollment

    mfa-voice-enrollment reference screenshot

    Text Key
    Enter your phone number to log in using a phone code ${clientName} pageTitle
    Secure Your Account title
    Enter your phone number below. A voice call will be placed on that number with a code to enter on the next screen. description
    Continue buttonText
    Try another method pickAuthenticatorText
    Enter your phone number placeholder
    There was a problem sending the SMS send-sms-failed
    Phone number can only include digits. invalid-phone-format
    Seems that your phone number is not valid. Please check and retry. invalid-phone
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-sms
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    Please enter a phone number no-phone
    ${companyName} logoAltText

    Screen: mfa-voice-challenge

    mfa-voice-challenge reference screenshot

    Text Key
    Enter your phone code to log in ${clientName} pageTitle
    Verify Your Identity title
    We've sent a 6-digit code via voice phone call to the following phone number: description
    Continue buttonText
    Edit editText
    Edit phone number editLinkScreenReadableText
    Choose another phone number. changePhoneText
    Try another method pickAuthenticatorText
    Enter the 6-digit code placeholder
    Remember this device for 30 days rememberMeText
    Call again resendActionText
    Didn't receive a call? resendText
    or resendSmsActionSeparatorTextBefore
    send a text resendSmsActionText
    OTP Code must have 6 numeric characters invalid-otp-code-format
    The code you entered is invalid invalid-code
    There was a problem making the voice call send-voice-failed
    We couldn't verify the code. Please try again later. authenticator-error
    We couldn't make the voice call. Please try again later. voice-authenticator-error
    Notification was not sent. Try resending the code. no-transaction-in-progress
    Too many failed codes. Wait for some minutes before retrying. too-many-failures
    You have exceeded the maximum number of phone messages per hour. Wait a few minutes and try again. too-many-voice
    Your enrollment transaction expired, you will need to start again. transaction-not-found
    ${companyName} logoAltText

    Screen: mfa-webauthn-platform-enrollment

    mfa-webauthn-enrollment reference screenshot

    Text Key
    Log in faster on this device ${clientName}
    Log In Faster on This Device title
    Trust this device? You can quickly and securely log in the next time using this device's fingerprint or face recognition. description
    Awaiting device confirmation awaitingConfirmation
    We could not start the device enrollment. Please try again later. webauthn-platform-associate-error
    ${companyName} logoAltText
    Continue continueButtonText
    Try another method pickAuthenticatorText
    No Thanks refuseAddingDeviceText

    Screen: mfa-webauthn-roaming-enrollment

    mfa-webauthn-guidance-enrollment reference screenshot

    Text Key
    Register your security key ${clientName} pageTitle
    Adding Your Security Key title
    Security keys can be used as an additional authentication factor. description
    Awaiting Security Key awaitingConfirmation
    We could not start the device enrollment. Please try again later. error_webauthn-associate-error
    ${companyName} logoAltText
    Use security key continueButtonText
    Try another method pickAuthenticatorText
    Continue continueButtonText
    Connect your Security Key and continue. instructions1
    Follow the steps on the browser. instructions2
    Name your Security Key to easily identify it later. instructions3

    Screen: mfa-webauthn-platform-challenge

    mfa-webauthn-challenge-user-initiated reference screenshot

    Text Key
    Use fingerprint or face recognition to login ${clientName} title
    Press the button below and follow your browser's steps to log in. description
    Awaiting device confirmation awaitingConfirmation
    We could not start the device verification. Please try again later webauthn-platform-challenge-error
    Too many failed authentication attempts. Please try again later. too-many-webauthn-challenge-attempts-error
    ${companyName} logoAltText
    Continue continueButtonText
    Try another method pickAuthenticatorText
    Use Password usePasswordText
    Remember this device for 30 days rememberMeText

    Screen: mfa-webauthn-roaming-challenge

    mfa-webauthn-challenge-user-initiated reference screenshot

    Text Key
    Use your security key to log in ${clientName} pageTitle
    Verify Your Identity title
    Make sure your Security Key is nearby. Once you continue, you will be prompted to use it. description
    Awaiting Security Key awaitingConfirmation
    We could not start the security key verification. Please try again later. webauthn-challenge-error
    Too many failed authentication attempts. Please try again later. too-many-webauthn-challenge-attempts-error
    ${companyName} logoAltText
    Use security key continueButtonText
    Try another method pickAuthenticatorText
    Remember this device for 30 days rememberMeText

    Screen: mfa-webauthn-change-key-nickname

    mfa-webauthn-change-key-nickname reference screenshot

    Text Key
    Name Your Security Key ${clientName} title
    If you own multiple keys, this alias will help you identify the right one. description
    ${userName}'s key nickname
    Security key name nicknamePlaceholder
    We could not update your key's name. Please try again. error_webauthn-patch-nickname-error
    Name Your Device titlePlatform
    If you own multiple devices, this alias will help you identify the right one. descriptionPlatform
    ${userName}'s "${deviceName}" nicknamePlatform
    Device name nicknamePlaceholderPlatform
    We could not update your Device's name. Please try again. webauthn-platform-patch-nickname-error
    Continue buttonText
    Name is required no-nickname
    Name is too short nickname-too-short
    Name is too long nickname-too-long
    An error occurred while retrieving your information. Please try again. error-while-retrieving-authenticator
    An error occurred while trying to save the name . Please try again. error-while-patching
    ${companyName} logoAltText

    Screen: mfa-webauthn-enrollment-success

    mfa-webauthn-enrollment-success reference screenshot

    Text Key
    Security Key successful ${clientName} title
    Device registration successful ${clientName} titlePlatform
    You have successfully registered your Security Key. description
    You have successfully registered your device. descriptionPlatform
    Continue buttonText
    ${companyName} logoAltText

    Screen: mfa-webauthn-error

    mfa-webauthn-error reference screenshot

    Text Key
    Try again tryAgainLinkText
    Try another method pickAuthenticatorText
    Security key registration error ${clientName} errorTitle
    Security Key Verification Failed errorTitleChallenge
    Device registration error ${clientName} errorTitlePlatform
    Something Went Wrong errorTitlePlatformChallenge
    Something went wrong. Please try again or try using another method. description
    If you already registered this device, please try again. If not, try using another method." descriptionPlatform
    No Thanks" refuseAddingAuthenticatorText
    Use password usePasswordText

    Screen: mfa-webauthn-not-available-error

    mfa-webauthn-not-available-error reference screenshot

    Text Key
    Security keys are not supported ${clientName} pageTitle
    Security Keys Are Not Supported" errorTitle
    We are sorry but your browser or device does not support Security Keys. Try using another browser or log in from another device. errorDescription
    Try another method pickAuthenticatorText
    Use password usePasswordText

    Screen: organization-selection

    organization-selection reference screenshot

    Text Key
    Enter you organization ${clientName} pageTitle
    Enter Organization title
    Enter your ${companyName} Organization Name to continue description
    Continue buttonText
    Enter your Organization Name placeholder
    The organization you entered is invalid invalid-organization
    ${companyName} logoAltText

    Prompt: reset-password

    Screen: reset-password-request

    reset-password-request reference screenshot

    Text Key
    Reset your password ${clientName} pageTitle
    Forgot Your Password? title
    Back to <%= "${clientName}" %> backToLoginLinkText
    Continue buttonText
    Enter your email address and we will send you instructions to reset your password. descriptionEmail
    Enter your username and we will send you instructions to reset your password. descriptionUsername
    Email address placeholderEmail
    Username placeholderUsername
    Email is not valid. invalid-email-format
    This ticket was expired. auth0-users-expired-ticket
    Something went wrong, please try again later. custom-script-error-code
    This ticket was already used. auth0-users-used-ticket
    Something went wrong, please try again later auth0-users-validation
    We had a problem sending the email, please try again later. reset-password-error
    You have exceeded the amount of emails. Wait a few minutes and try again. too-many-email
    You have exceeded the amount of emails. Wait a few minutes and try again. too-many-requests
    Please enter an email address no-email
    Username is required no-username
    ${companyName} logoAltText

    Screen: reset-password-email

    reset-password-email reference screenshot

    Text Key
    Check your email ${clientName} pageTitle
    Check Your Email title
    Please check the email address <%= "${email}" %> for instructions to reset your password. emailDescription
    Resend email resendLinkText
    Please check the email address associated with the username <%= "${email}" %> for instructions to reset your password. usernameDescription

    Screen: reset-password

    reset-password reference screenshot

    Text Key
    Reset your password ${clientName} pageTitle
    Change Your Password title
    Enter a new password below to change your password. description
    Reset password buttonText
    New password passwordPlaceholder
    Re-enter new password reEnterpasswordPlaceholder
    Your password must contain: passwordSecurityText
    ${companyName} logoAltText
    This ticket was expired. auth0-users-expired-ticket
    Something went wrong, please try again later. custom-script-error-code
    This ticket was already used. auth0-users-used-ticket
    Something went wrong, please try again later auth0-users-validation
    New password confirmation is missing no-re-enter-password

    Screen: reset-password-success

    reset-password-success reference screenshot

    Text Key
    Password reset successful ${clientName} pageTitle
    Password Changed! eventTitle
    Your password has been changed successfully. description
    Back to <%= "${clientName}" %> buttonText

    Screen: reset-password-error

    reset-password-error reference screenshot

    Text Key
    Password reset error ${clientName} pageTitle
    Back to <%= "${clientName}" %> backToLoginLinkText
    To reset your password, return to the login page and select "Forgot Your Password" to send a new email. descriptionExpired
    To reset your password, return to the login page and select "Forgot Your Password" to send a new email. descriptionGeneric
    This link has already been used. To reset your password, return to the login page and select "Forgot Your Password" to send a new email. descriptionUsed
    Link Expired eventTitleExpired
    Invalid Link eventTitleGeneric
    Invalid Link eventTitleUsed
    This ticket was expired. auth0-users-expired-ticket
    Something went wrong, please try again later. custom-script-error-code
    This ticket was already used. auth0-users-used-ticket
    Something went wrong, please try again later auth0-users-validation
    We had a problem sending the email, please try again later. reset-password-error

    Screen: signup

    signup reference screenshot

    Text Key
    Sign up to ${clientName} pageTitle
    Welcome title
    Sign Up to ${companyName} to continue to ${clientName}. description
    Or separatorText
    Continue buttonText
    Email address emailPlaceholder
    Continue with ${connectionName} federatedConnectionButtonText
    Log in loginActionLinkText
    Already have an account? loginActionText
    Password passwordPlaceholder
    Your password must contain: passwordSecurityText
    Username usernamePlaceholder
    The user already exists. email-in-use
    Email is not valid. invalid-email-format
    The password is too weak password-policy-not-conformant
    The password is too common password-too-common
    Password has previously been used password-previously-used
    Passwords don't match password-mismatch
    Password contains user information password-contains-user-information
    Username can only contain alphanumeric characters or: '${characters}'. Username should have between ${min} and ${max} characters. invalid-username
    The username must not be longer than ${max} characters. invalid-username-max-length
    The username must have at least ${min} characters. invalid-username-min-length
    The username has invalid characters. invalid-username-invalid-characters
    The username cannot be an email. invalid-username-email-not-allowed
    The username provided is in use already. username-taken
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Too many signups from the same IP ip-signup-blocked
    Invalid connection no-db-connection
    Please enter an email address no-email
    Password is required no-password
    New password confirmation is missing no-re-enter-password
    Username is required no-username
    ${companyName} logoAltText

    Screen: signup-id

    signup-id reference screenshot

    Text Key
    Sign up ${clientName} pageTitle
    Create Your Account title
    Sign Up to ${companyName} to continue to ${clientName}. description
    Or separatorText
    Continue buttonText
    Email address emailPlaceholder
    Continue with ${connectionName} federatedConnectionButtonText
    Log in footerLinkText
    ${footerLinkText} loginActionLinkText
    Already have an account? footerText
    ${footerText} loginActionText
    Password passwordPlaceholder
    Your password must contain: passwordSecurityText
    Username usernamePlaceholder
    The user already exists. email-in-use
    Email is not valid. invalid-email-format
    The password is too weak password-too-weak
    The password is too weak password-policy-not-conformant
    The password is too common password-too-common
    Password has previously been used password-previously-used
    Passwords don't match password-mismatch
    Username can only contain alphanumeric characters or: '${characters}'. Username should have between ${min} and ${max} characters. invalid-username
    The username must not be longer than ${max} characters. invalid-username-max-length
    The username must have at least ${min} characters. invalid-username-min-length
    The username has invalid characters. invalid-username-invalid-characters
    The username cannot be an email. invalid-username-email-not-allowed
    The username provided is in use already. username-taken
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Too many signups from the same IP ip-signup-blocked
    Invalid connection no-db-connection
    Email does not match any enterprise directory no-hrd-connection
    Please enter an email address no-email
    Password is required no-password
    New password confirmation is missing no-re-enter-password
    Username is required no-username
    ${companyName} logoAltText

    Screen: signup-password

    signup-password reference screenshot

    Text Key
    Create a password to sign up ${clientName} pageTitle
    Create Your Account title
    Set your password for ${companyName} to continue to ${clientName}. description
    Or separatorText
    Continue buttonText
    Email address emailPlaceholder
    Edit editEmailText
    Edit email address editLinkScreenReadableText
    Continue with ${connectionName} federatedConnectionButtonText
    Log in footerLinkText
    loginActionLinkText loginActionLinkText
    Already have an account? footerText
    ${footerText} loginLinkText
    Password passwordPlaceholder
    Your password must contain: passwordSecurityText
    Username usernamePlaceholder
    Accept your invitation to sign up ${clientName} invitationTitle
    Sign Up to accept ${inviterName}'s invitation to join ${companyName} on ${clientName}. invitationDescription
    The user already exists. email-in-use
    Email is not valid. invalid-email-format
    The password is too weak password-too-weak
    The password is too weak password-policy-not-conformant
    The password is too common password-too-common
    Password has previously been used password-previously-used
    Passwords don't match password-mismatch
    Password contains user information password-contains-user-information
    Username can only contain alphanumeric characters or: '${characters}'. Username should have between ${min} and ${max} characters. invalid-username
    The username must not be longer than ${max} characters. invalid-username-max-length
    The username must have at least ${min} characters. invalid-username-min-length
    The username has invalid characters. invalid-username-invalid-characters
    The username cannot be an email. invalid-username-email-not-allowed
    The username provided is in use already. username-taken
    Something went wrong, please try again later. custom-script-error-code
    Something went wrong, please try again later auth0-users-validation
    Invalid connection invalid-connection
    We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator. ip-blocked
    Too many signups from the same IP ip-signup-blocked
    Invalid connection no-db-connection
    Please enter an email address no-email
    Password is required no-password
    New password confirmation is missing no-re-enter-password
    Username is required no-username
    ${companyName} logoAltText

  • Information about the current user, for pages rendered after the user authenticates:

    • user.user_id

    • user.picture

    • user.email

    • user.email_verified

    • user.app_metadata

    • user.user_metadata

    • user.family_name

    • user.given_name

    • user.name

    • user.nickname

    • user.username

Examples

Login box + image layout

The following template will show the login box to the left, and an image to the right only for the login/signup pages. The rest of the pages will look like the default ones.

<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1592450865877-e3a318ec3522?ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .prompt-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 480px;
        height: 100%;
        justify-content: center;
        background-color: rgb(60,60,60);
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>

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

Was this helpful?

/

Universal Login box with email username/password and image layout example

Page footers

The example below adds a gray footer with links to Privacy Policy and Terms of Services:

<!DOCTYPE html><html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: radial-gradient(white, rgb(200, 200, 200));
      }
      .footer {
        background-color: rgb(120, 120, 120);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px 0; 
        width: 100%;
        color: white;
        /* Use a high z-index for future-proofing */
        z-index: 10;
      }
      .footer ul {
        text-align: center;
      }
      .footer ul li {
        display: inline-block;
        margin: 0 4px;
      }
      .footer ul li:not(:first-of-type) {
        margin-left: 0;
      }
      .footer ul li:not(:first-of-type)::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 4px;
        height: 4px;
        margin-right: 4px;
        background-color: white;
        border-radius: 50%;
      }
      .footer a {
        color: white;
      }
    </style>
     <title>{{ prompt.screen.texts.pageTitle }}</title>
  </head>
  <body class="_widget-auto-layout">
    {%- auth0:widget -%}
    <footer class="footer">
      <ul>
        <li><a href="https://company.com/privacy">Privacy Policy</a></li>
        <li><a href="https://company.com/terms">Terms of Service</a></li>
      </ul>
    </footer>
  </body></html>

Was this helpful?

/

Universal Login box with email address/password and footers layout example

Page templates API

To set the page template, you need to use the Management API. You first need to get a Management API token with the update:branding, read:branding, delete:branding scopes. If you are using the API Explorer Application to generate tokens, make sure those scopes are enabled for the Auth0 Management API.

To set the template, you need to use the following endpoint:


curl --request PUT \
  --url 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN' \
  --header 'content-type: text/html' \
  --data '<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>'

Was this helpful?

/
var client = new RestClient("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer MGMT_API_ACCESS_TOKEN");
request.AddHeader("content-type", "text/html");
request.AddParameter("text/html", "<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);

Was this helpful?

/
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"

	payload := strings.NewReader("<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
	req.Header.Add("content-type", "text/html")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}

Was this helpful?

/
HttpResponse<String> response = Unirest.put("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")
  .header("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
  .header("content-type", "text/html")
  .body("<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>")
  .asString();

Was this helpful?

/
var axios = require("axios").default;

var options = {
  method: 'PUT',
  url: 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login',
  headers: {authorization: 'Bearer MGMT_API_ACCESS_TOKEN', 'content-type': 'text/html'},
  data: '<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>'
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Was this helpful?

/
#import <Foundation/Foundation.h>

NSDictionary *headers = @{ @"authorization": @"Bearer MGMT_API_ACCESS_TOKEN",
                           @"content-type": @"text/html" };

NSData *postData = [[NSData alloc] initWithData:[@"<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>" dataUsingEncoding:NSUTF8StringEncoding]];

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"]
                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                   timeoutInterval:10.0];
[request setHTTPMethod:@"PUT"];
[request setAllHTTPHeaderFields:headers];
[request setHTTPBody:postData];

NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                if (error) {
                                                    NSLog(@"%@", error);
                                                } else {
                                                    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
                                                    NSLog(@"%@", httpResponse);
                                                }
                                            }];
[dataTask resume];

Was this helpful?

/
$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "PUT",
  CURLOPT_POSTFIELDS => "<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>",
  CURLOPT_HTTPHEADER => [
    "authorization: Bearer MGMT_API_ACCESS_TOKEN",
    "content-type: text/html"
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

Was this helpful?

/
import http.client

conn = http.client.HTTPSConnection("")

payload = "<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>"

headers = {
    'authorization': "Bearer MGMT_API_ACCESS_TOKEN",
    'content-type': "text/html"
    }

conn.request("PUT", "/YOUR_DOMAIN/api/v2/branding/templates/universal-login", payload, headers)

res = conn.getresponse()
data = res.read()

print(data.decode("utf-8"))

Was this helpful?

/
require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer MGMT_API_ACCESS_TOKEN'
request["content-type"] = 'text/html'
request.body = "<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>"

response = http.request(request)
puts response.read_body

Was this helpful?

/
import Foundation

let headers = [
  "authorization": "Bearer MGMT_API_ACCESS_TOKEN",
  "content-type": "text/html"
]

let postData = NSData(data: "<!DOCTYPE html><html><head>{%- auth0:head -%}</head><body>{%- auth0:widget -%}</body></html>".data(using: String.Encoding.utf8)!)

let request = NSMutableURLRequest(url: NSURL(string: "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()

Was this helpful?

/

To retrieve the template, you need to use the following endpoint:


curl --request GET \
  --url 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN'

Was this helpful?

/
var client = new RestClient("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer MGMT_API_ACCESS_TOKEN");
IRestResponse response = client.Execute(request);

Was this helpful?

/
package main

import (
	"fmt"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("authorization", "Bearer MGMT_API_ACCESS_TOKEN")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}

Was this helpful?

/
HttpResponse<String> response = Unirest.get("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")
  .header("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
  .asString();

Was this helpful?

/
var axios = require("axios").default;

var options = {
  method: 'GET',
  url: 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login',
  headers: {authorization: 'Bearer MGMT_API_ACCESS_TOKEN'}
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Was this helpful?

/
#import <Foundation/Foundation.h>

NSDictionary *headers = @{ @"authorization": @"Bearer MGMT_API_ACCESS_TOKEN" };

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"]
                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                   timeoutInterval:10.0];
[request setHTTPMethod:@"GET"];
[request setAllHTTPHeaderFields:headers];

NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                if (error) {
                                                    NSLog(@"%@", error);
                                                } else {
                                                    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
                                                    NSLog(@"%@", httpResponse);
                                                }
                                            }];
[dataTask resume];

Was this helpful?

/
$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => [
    "authorization: Bearer MGMT_API_ACCESS_TOKEN"
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

Was this helpful?

/
import http.client

conn = http.client.HTTPSConnection("")

headers = { 'authorization': "Bearer MGMT_API_ACCESS_TOKEN" }

conn.request("GET", "/YOUR_DOMAIN/api/v2/branding/templates/universal-login", headers=headers)

res = conn.getresponse()
data = res.read()

print(data.decode("utf-8"))

Was this helpful?

/
require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Get.new(url)
request["authorization"] = 'Bearer MGMT_API_ACCESS_TOKEN'

response = http.request(request)
puts response.read_body

Was this helpful?

/
import Foundation

let headers = ["authorization": "Bearer MGMT_API_ACCESS_TOKEN"]

let request = NSMutableURLRequest(url: NSURL(string: "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()

Was this helpful?

/

To delete the template, you need to use the following endpoint:


curl --request DELETE \
  --url 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN'

Was this helpful?

/
var client = new RestClient("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login");
var request = new RestRequest(Method.DELETE);
request.AddHeader("authorization", "Bearer MGMT_API_ACCESS_TOKEN");
IRestResponse response = client.Execute(request);

Was this helpful?

/
package main

import (
	"fmt"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("authorization", "Bearer MGMT_API_ACCESS_TOKEN")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}

Was this helpful?

/
HttpResponse<String> response = Unirest.delete("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")
  .header("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
  .asString();

Was this helpful?

/
var axios = require("axios").default;

var options = {
  method: 'DELETE',
  url: 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login',
  headers: {authorization: 'Bearer MGMT_API_ACCESS_TOKEN'}
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Was this helpful?

/
#import <Foundation/Foundation.h>

NSDictionary *headers = @{ @"authorization": @"Bearer MGMT_API_ACCESS_TOKEN" };

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://YOUR_DOMAIN/api/v2/branding/templates/universal-login"]
                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                   timeoutInterval:10.0];
[request setHTTPMethod:@"DELETE"];
[request setAllHTTPHeaderFields:headers];

NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                if (error) {
                                                    NSLog(@"%@", error);
                                                } else {
                                                    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
                                                    NSLog(@"%@", httpResponse);
                                                }
                                            }];
[dataTask resume];

Was this helpful?

/
$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "DELETE",
  CURLOPT_HTTPHEADER => [
    "authorization: Bearer MGMT_API_ACCESS_TOKEN"
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

Was this helpful?

/
import http.client

conn = http.client.HTTPSConnection("")

headers = { 'authorization': "Bearer MGMT_API_ACCESS_TOKEN" }

conn.request("DELETE", "/YOUR_DOMAIN/api/v2/branding/templates/universal-login", headers=headers)

res = conn.getresponse()
data = res.read()

print(data.decode("utf-8"))

Was this helpful?

/
require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Delete.new(url)
request["authorization"] = 'Bearer MGMT_API_ACCESS_TOKEN'

response = http.request(request)
puts response.read_body

Was this helpful?

/
import Foundation

let headers = ["authorization": "Bearer MGMT_API_ACCESS_TOKEN"]

let request = NSMutableURLRequest(url: NSURL(string: "https://YOUR_DOMAIN/api/v2/branding/templates/universal-login")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()

Was this helpful?

/

The maximum size for the Page Template is 100KB. If that is not big enough, consider moving images/css files outside of the Page Template code.

CSS customization

There are a few things that you can customize using CSS:

  • You can hide the tenant logo by adding class="_hide-prompt-logo" in the <body> element.

  • You can specify a custom logo by adding class="_use-custom-prompt-logo" in the <body> element. This would let you, for example, change the login page logo depending on the application:

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

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if application.name == "Auth0 Community" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/manhattan/versions/1.3312.0/assets/badge.png');
      }
      {% elsif application.name == "Auth0 Dashboard" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
      }
      {% endif %}
  </style>

  </head>

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

</html>

Was this helpful?

/

The current implementation does not support further CSS customization. If you look at the HTML that is generated, you will see code like:

.c10d15918.c7b3b8672 {
  background: #D00E17;
}

Was this helpful?

/

The CSS class names change each time we build the project. If you write CSS that targets those classes, it will break.

The HTML structure of the pages might also change. If your customizations depend on it, they could stop working at any time.

Using the Auth0 CLI

You can use the Auth0 CLI to easily update Page Templates.

In the Auth0 CLI, run:

auth0 branding templates update

The Auth0 CLI will open two windows:

  • A browser window with a Storybook that shows the login page with the page template applied:

Page Templates Storybook
  • The default editor, with the page template code:

undefined

You can now change the page template code, and you will be able to preview the changes in your browser window.

Once you close the window, you’ll be asked if you want to save the template. If you answer Yes, the template will be uploaded to your tenant.

Troubleshooting

If the template is not being applied, check that you are navigating to <custom_domain>/authorize. When you navigate to YOUR_DOMAIN/authorize Auth0 will not render the page template.