The SCRIPT tag breaks the Auth0 CLI storybook

Knowledge Solutions
, ,
1

Problem Statement

When trying to add a <script></script> into the template via the Auth0 CLI. Storybook breaks the code as it’s unable to parse the ending </script> tag correctly.

Steps to Reproduce

Launch Auth0 CLI + Storybook as per this article: https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates#using-the-auth0-cli-

Set the template to:

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}                                                    
    <script>console.log("test");</script> 
  </head>
  <body>
    {%- auth0:widget -%}
  </body>
</html>

Using the Storybook to see live updates
Received the Uncaught SyntaxError: Unexpected end of input at insertScript

Cause

The issue is that when the browser encounters the closing tag inside an open <script> tag, regardless of the context, it will terminate the script tag there.

Solution

As a workaround, please add the backticks and + characters to trick the system. Here is the sample template code that will inject the <script> tag:

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}                                                    
    <scr`+`ipt>console.log("test");</scr`+`ipt> 
  </head>
  <body>
    {%- auth0:widget -%}
  </body>
</html>