The SCRIPT Tag Breaks the Auth0 CLI Storybook

Overview

When trying to add a <script></script> into the template via the Auth0 CLI, the Storybook breaks the code as it is unable to parse the ending </script> tag correctly. The following error is encountered: 

 

Uncaught SyntaxError: Unexpected end of input at insertScript

 

Steps to reproduce the scenario:

  • Use Auth0 CLI to update the New Universal Login template. Launch Auth0 CLI + Storybook as per this article: Use Auth0 CLI.
    • Set the template to:
<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}                                                    
    <script>console.log("test");</script> 
  </head>
  <body>
    {%- auth0:widget -%}
  </body>
</html>
  • Storybook is used to see live updates.
  • The error "Uncaught SyntaxError: Unexpected end of input at insertScript" is received.

Applies To

  • Storybook
  • Auth0 CLI

Cause

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

Solution

As a workaround, we will 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>

 

Recommended content

No recommended content found...