ULP template different on cli than live #409

charlesLoder · 2022-03-17T18:38:57Z

Description

The New Universal Login page that is updated by running auth0 branding templates update and edited in the Storybook editor is different than the one used by the application.

It seems (to me) that the widget is different b/c:

the prompt is not the same as the application
the html is not the same

Reproduction

Detail the steps taken to reproduce this error, what was expected, and whether this issue can be reproduced consistently or if it is intermittent.

Run auth0 branding templates update and update template.

Run auth0 test login and see similar but not the same login page

Template

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
      {%- auth0:head -%}
    <title>{{ prompt.screen.texts.pageTitle }}</title>
    <style>
      <!-- some custom styling -->
    </style>
  </head>
  <body>
    <div class="page-container auto-grid">
      <div class="details-container grid-item"></div>
      <div class="widget-container grid-item">
        {%- auth0:widget -%}
      </div>
    </div>
  </body>
</html>

Screenshots

From the cli (how it should look):

Live (note back bar at bottom as well):

HTML for the auth0:widget

CLI

<div class="c0c1a133d c3e88dc55" style="pointer-events: none;">
  <main class="c3a151b1b cfe95f46f">
    <section class="c54e39a7c _prompt-box-outer">
      <div class="c718bf582 ca36a3940">
        <div class="c3ac9feae">
          <header class="ce0ebe992 c5d8a968c">
            <div title="" id="custom-prompt-logo" style="">
            </div>
            <img class="ce7953361 c3fc6c841" id="prompt-logo-center" src="" alt="">
	    <h1 class="c92ff66ef c8d2c720e">Welcome</h1>
  	    <div class="c7a0f0b7f ccf8eb97e">
    	      <p class="cd347ec30 c0bcc2c60">Log in to  to continue to All Applications.</p>
      	    </div>
          </header>
          <div class="c83631d4a c6a0fe2f0">
            <form method="POST" class="cbd3110ec c174d09ef" _lpchecked="1">
              <div class="cca6693e9 c954a0f0a">
                <fieldset class="c09913459">
                  <div class="c70775199 cdf2d2f59 text cb3db9166 c9c77d946" data-action-text="" data-alternate-action-text="">
                    <label class="c4506980d no-js c9047ade4 c61209989" for="username">
                      Email address
                    </label>
                    <input class="input c3a3480c1 ca75d9c8f" inputmode="email" name="username" id="username" type="text" aria-label="Email address" value="" required="" autocomplete="off" autofocus="" style=";">
                    <div class="c4506980d js-required c9047ade4 c61209989" data-dynamic-label-for="username">
                      Email address
                    </div>
                  </div>
                  <div class="c70775199 cdf2d2f59 password ced85c520 c9c77d946" data-action-text="" data-alternate-action-text="">
                    <label class="c4506980d no-js c9047ade4 c0f352828" for="password">
                      Password
                    </label>
                    <input class="input c3a3480c1 c525d0fb7" name="password" id="password" type="password" aria-label="Password" required="" autocomplete="off" style=";">
                    <div class="c4506980d js-required c9047ade4 c0f352828" data-dynamic-label-for="password">
                      Password
                    </div>
                    <span class="c9773aa3b password js-required"></span>
                  </div>
                </fieldset>
              </div>
              <p class="c8b39dc0e cc5f6e5c4">
                <a class="cffc7a8a5 c9cda21fd c86ee964a" href="#">
                  Forgot password?
                </a>
              </p>
              <div class="c7e081cd4">
                <button type="submit" name="action" value="default" class="c6069c11a cf6cae695 c495fb6b5 ca4c2ddb1 c65e1117c">Continue</button>
              </div>
            </form>
            <div class="ulp-alternate-action  _alternate-action __s16nu9">
              <p class="cd347ec30 c0bcc2c60 cee176452">Don't have an account?
                <a class="cffc7a8a5 c86ee964a" href="#">Sign up</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>

Live

<main class="_widget login">
  <section class="cabdcd2fa _prompt-box-outer cad7581ad">
    <div class="c0d8d4f9d c85f91e0c">
      <div class="cd2693189">
        <header class="c2cc42ec7 cf8a3f89f">
          <div title="classicalacademicpress-dev" id="custom-prompt-logo" style="width: auto !important; height: 60px !important; position: static !important; margin: auto !important; padding: 0 !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important">
          </div>
          <img class="ca82219cb c246054c3" id="prompt-logo-center" src="" alt="classicalacademicpress-dev">
          <h1 class="c0e35cb40 c79dbc5fc">Classical Academic Press</h1>
          <div class="c5e8d1042 c72fc23d6">
            <p class="c04215591 c59475077">Log in to you classicalacademicpress-dev account</p>
          </div>
        </header>
        <div class="c281f46e9 cf56b125b">
          <form method="POST" class="cf11996fb c94d14336" _lpchecked="1">
          	<input type="hidden" name="state" value="">
              <div class="c9ba284b7 c73a6d2c4">
                <div class="c6384b0be">
                  <div class="input-wrapper _input-wrapper">
                    <div class="cb21df734 ccd0e1901 text c124c675c cce93bef4" data-action-text="" data-alternate-action-text="">
                      <label class="c17eb8e34 no-js c788b7b34 c24b63678" for="username">
                        Email address
                      </label>
                      <input class="input ce19ef056 ccb0c5335" inputmode="email" name="username" id="username" type="text" value="" required="" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus="" style="">
                      <div class="c17eb8e34 js-required c788b7b34 c24b63678" data-dynamic-label-for="username" aria-hidden="true">
                        Email address
                      </div>
                    </div>
                  </div>
                  <div class="input-wrapper _input-wrapper">
                    <div class="cb21df734 ccd0e1901 password cde04a685 cce93bef4" data-action-text="" data-alternate-action-text="">
                      <label class="c17eb8e34 no-js c788b7b34 c0a1c3915" for="password">
                        Password
                      </label>
                      <input class="input ce19ef056 cd664d2f8" name="password" id="password" type="password" required="" autocomplete="off" autocapitalize="none" spellcheck="false" ;">
                      <div class="c17eb8e34 js-required c788b7b34 c0a1c3915" data-dynamic-label-for="password" aria-hidden="true">
                        Password
                      </div>                    
                      <button type="button" class="c9c3c2470 ulp-button-icon c0460f432 _button-icon" data-action="toggle">
                        <span class="screen-reader-only password-toggle-label" data-label="toggle">Show Password</span>
                        <span class="c6709e724 password js-required" aria-hidden="true"></span>
                      </button>
                    </div>                  
                  </div>
                </div>
              </div>
              <p class="c1416d2e4 cf40eef69">
                <a class="c71150d5c cc5a8965e cd9882b29" href="">Forgot password?</a>
              </p>  
              <div class="c56665bee">
               <button type="submit" name="action" value="default" class="c9c3c2470 c970bf794 c0460f432 ca29adadc ca9f15e60">Continue</button> 
              </div>
            </form>          
            <div class="ulp-alternate-action  _alternate-action __s16nu9">
              <p class="c04215591 c59475077 cb44beaf9">Don't have an account?
                <a class="c71150d5c cd9882b29" href="">Sign up</a>
              </p>
            </div>
        </div>
      </div>
    </div>
  </section>
</main>

Also, a different style sheet is loaded as well

Environment

auth0 version 0.11.7 f9bcaf1

The text was updated successfully, but these errors were encountered:

Widcket · 2022-03-17T19:52:20Z

Hi @charlesLoder, thanks for raising this.
Are you, by any chance, using a Custom Domain in your Auth0 tenant? If so, are you selecting (or passing via the -d flag) your custom domain when running auth0 test login?

charlesLoder · 2022-03-18T14:11:27Z

Are you, by any chance, using a Custom Domain in your Auth0 tenant?

Yes. I was under the impression that was required in order to customize the new ulp

are you selecting (or passing via the -d flag) your custom domain when running auth0 test login?

Yes, I am selecting the custom domain

Widcket · 2022-03-19T01:42:38Z

@charlesLoder the auth0 test login command performs an actual login with your selected application, and the generated HTML should be no different than with a login done via your web app. Unfortunately, the rendering is done server-side, so it's outside of the scope of the CLI.
I'd suggest raising a support ticket so this report can be routed to the right team.

charlesLoder · 2022-03-19T15:20:03Z

It's not the auth0 test login command which is the problem, per se. I understand that command.

When I run auth0 branding templates update (which opens the Storybook editor), I can design the template to my liking, but that is not what I see when I run auth0 test login or use the live site.

There is no disconnect between auth0 test login and the live web app; the disconnect is that auth0 branding templates update doesn't match auth0 test login.

I hope that makes sense

Widcket · 2022-03-22T04:15:26Z

@charlesLoder thanks for clarifying. It seems to be a divergence between the template included in the Storybook vs the one currently being used in production. I'll be taking a look.

Widcket · 2022-03-26T02:59:24Z

I haven't been able to tackle it this week, so I'll be taking a look next week.

charlesLoder · 2022-04-07T13:45:02Z

@Widcket just wanted to follow up on this

Widcket · 2022-04-07T13:52:20Z

@charlesLoder apologies for the delay. @sergiughf will be taking a look

charlesLoder · 2022-04-07T14:09:37Z

Thanks!

sergiught · 2022-04-14T15:04:19Z

Hey @charlesLoder I don't have an exact ETA when I'll be able to tackle this issue but I'll aim at doing so in the upcoming week/s.

simplystuart · 2022-05-04T20:45:22Z

@sergiughf, have you had a chance to look at this yet?

sergiught · 2022-05-05T08:41:02Z

Hey @simplystuart, I apologies but unfortunately not yet. We're a very small team with quite an extended surface area, I don't have an exact ETA for this yet.

…th0#409

… (#443)

sergiught · 2022-06-06T12:06:39Z

Hey folks, we just merged a fix for this and will make a new release soon. Appreciate everyone's patience! 🙏🏻

Widcket added question Further information is requested waiting for customer This issue is waiting for a response from the issue or PR author and removed question Further information is requested labels Mar 17, 2022

Widcket added needs investigation An issue that has more questions to answer or otherwise needs work to fully understand the issue and removed waiting for customer This issue is waiting for a response from the issue or PR author labels Mar 18, 2022

Widcket added waiting for customer This issue is waiting for a response from the issue or PR author and removed needs investigation An issue that has more questions to answer or otherwise needs work to fully understand the issue labels Mar 19, 2022

Widcket added needs investigation An issue that has more questions to answer or otherwise needs work to fully understand the issue and removed waiting for customer This issue is waiting for a response from the issue or PR author labels Mar 22, 2022

Widcket assigned sergiught Apr 13, 2022

sergiught added the bug This points to a verified bug in the code label May 5, 2022

alejofernandez added a commit to alejofernandez/auth0-cli that referenced this issue Jun 3, 2022

fix: render template using same html structure as the live version au…

cbb2436

…th0#409

alejofernandez mentioned this issue Jun 3, 2022

fix: render template using same html structure as the live version #409 #443

Merged

sergiught closed this as completed in #443 Jun 6, 2022

sergiught pushed a commit that referenced this issue Jun 6, 2022

fix: render template using same html structure as the live version #409…

103799c

… (#443)

sergiught mentioned this issue Jan 10, 2023

[1/2] DXCDT-291: Remove branding templates storybook preview #592

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ULP template different on cli than live #409

ULP template different on cli than live #409

charlesLoder commented Mar 17, 2022 •

edited

Loading

Widcket commented Mar 17, 2022

charlesLoder commented Mar 18, 2022

Widcket commented Mar 19, 2022

charlesLoder commented Mar 19, 2022

Widcket commented Mar 22, 2022

Widcket commented Mar 26, 2022

charlesLoder commented Apr 7, 2022

Widcket commented Apr 7, 2022

charlesLoder commented Apr 7, 2022

sergiught commented Apr 14, 2022

simplystuart commented May 4, 2022

sergiught commented May 5, 2022

sergiught commented Jun 6, 2022 •

edited

Loading

ULP template different on cli than live #409

ULP template different on cli than live #409

Comments

charlesLoder commented Mar 17, 2022 • edited Loading

Description

Reproduction

Template

Screenshots

HTML for the auth0:widget

Environment

Widcket commented Mar 17, 2022

charlesLoder commented Mar 18, 2022

Widcket commented Mar 19, 2022

charlesLoder commented Mar 19, 2022

Widcket commented Mar 22, 2022

Widcket commented Mar 26, 2022

charlesLoder commented Apr 7, 2022

Widcket commented Apr 7, 2022

charlesLoder commented Apr 7, 2022

sergiught commented Apr 14, 2022

simplystuart commented May 4, 2022

sergiught commented May 5, 2022

sergiught commented Jun 6, 2022 • edited Loading

charlesLoder commented Mar 17, 2022 •

edited

Loading

sergiught commented Jun 6, 2022 •

edited

Loading