preview and published page does not omit same HTML

Marvin9 commented 8 months ago

Checklist

[X] I have looked into the README and have not found a suitable solution or answer.
[X] I have looked into the documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have upgraded to the latest version of this project and the issue still persists.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

I want to add title and meta description by prompt screen.

Here is what liquid code looks like

<head>
{%- auth0:head -%}
{% if prompt.name == "login" %}
      <title>Custom Login Title</title>
      <meta name="description" content="Custom Login Description" />
    {% elsif prompt.name == "signup" %}
      <title>Custom Signup Title</title>
      <meta name="description" content="Custom Signup Description" />
    {% endif %}
</head>

When I check in the preview, both works as expected. However when I publish the code and go to production screen, not rendered. There is no title or meta[name="description"] tag I can find in production.

Expectation

I want to see the title and description properly considered in production as well.

Reproduction

auth0 universal-login templates update
Add HTML given below in your default template

<head>
{%- auth0:head -%}
{% if prompt.name == "login" %}
      <title>Custom Login Title</title>
      <meta name="description" content="Custom Login Description" />
    {% elsif prompt.name == "signup" %}
      <title>Custom Signup Title</title>
      <meta name="description" content="Custom Signup Description" />
    {% endif %}
</head>

Check in preview. It should work as expected (inspect iframe and look from title and meta description tag)
publish
Now check at production link, title and description does not exist

Auth0 CLI version

auth0 version 1.3.0 2bd069cfc1ee0501ed039fc80b2e550447c8ef14

willvedd commented 8 months ago

@Marvin9 It is very likely that your storybook preview when running auth0 ul templates update does not necessarily reflect what is live on production. This is due to limitations in the preview functionality primarily stemming from having inadequate data to properly render the templates. But there are also a number of minute technical reasons why this command won't look 100% correct.

As noted in that preview and logged in the terminal, we now have a auth0 ul customize command that displays a preview that will closely replicate what is live on the Auth0 production UI. We recommend users refer to that command's preview functionality instead. If you are still observing issues, definitely follow up and we can look into them closer.

Marvin9 commented 8 months ago

Did that as well as part of auth0 cli upgrade, before I was using storybook preview but after update it was all in sandboxed environment in browser.

However, issue persists. I noticed that the title is same as page url, which is - auth0.<tenant>/u/login/identifier?state=foobar

willvedd commented 8 months ago

@Marvin9 I'm having trouble understanding your exact issue. Are you saying that the page title you register in the <title> tag doesn't get rendered on the production login page as you'd expect?

Marvin9 commented 8 months ago

You are correct @willvedd . This whole condition block basically not working as expected

{% if prompt.name == "login" %}
      <title>Custom Login Title</title>
      <meta name="description" content="Custom Login Description" />
    {% elsif prompt.name == "signup" %}
      <title>Custom Signup Title</title>
      <meta name="description" content="Custom Signup Description" />
    {% endif %}

Marvin9 commented 8 months ago

@willvedd any alternative solution would you suggest?

auth0 / auth0-cli