The SCRIPT Tag Breaks the Auth0 CLI Storybook

Knowledge Articles
,
1

Last Updated: Nov 12, 2024

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 tag inside an open 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 tag:

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