Auth0-CLI is not Able to Update New Universal Login Template

Overview

An error is thrown when attempting to update the new universal login template HTML when using the following command leveraging the auth0-cli:

cat out/index.html | auth0 ul templates update

The following error is returned:

Failed to update the template for the New Universal Login Experience: 400 Bad Request: The template must contain a single auth0:head tag and at least one auth0:widget tag

However, when publishing the same HTML using the Auth0 Management API, it appears the update works as expected. The following is the API endpoint being used:

curl -L -X PUT 'https://login.auth0.com/api/v2/branding/templates/universal-login' \
-H 'Content-Type: application/json' \
-d '["string",{"template":"string"}]'

This article explains the difference in behavior.

Applies To

  • New Universal Login Template
  • Auth0-cli

Cause

The file being uploaded had incorrect formatting that did not pass Auth0 CLI validation. The Universal Login Page Branding API expects a certain format, including containing one auth0:head tag and at least one auth0:widget tag.

Formatting between those tags doesn’t matter as long as the auth0 widget tags have the above format. If the below format is used, where all tags are formatted in a single line, then the error mentioned will be returned:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/>{%- auth0:head -%}<title>{{ prompt.screen.texts.pageTitle }}</title><script id="vwoCode" data-nscript="beforeInteractive">.........

Solution

The auth0 tags have to be formatted as below as that is what the API expects, and the content between said tags can be formatted in any way that suits.

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