`Failed to load resource: the server responded with a status of 400 ()` error with /authorize call - misconfiguration issue about auth0-react-samples HOT 7 CLOSED

Hi @sw-yx,

Sorry for the inconvenience!

It seems to work fine for me when I try a clean master checkout (with the only change adding my auth0 settings in the json file).
I see your console is showing an error, would u be able to share the error?

I am also trying to understand two things:

• Why is the call to localhost showing an XHR type
• What is content.css?

This is my network tab when I open the application, its showing type Document for the localhost call and it doesn't have any call to content.css:

Is there anything useful in your tenant logs?

from auth0-react-samples.

hey Frederik you know what this is embarrassing... i literally tried doing the exact same thing and it worked. ugh. heisenbug. sorry for the trouble and i will come back only if i can really find a repeatable problem.

as for the content.css - that's a chrome extension i have. sorry i should have sent a screenshot using incognito so it wouldnt insert random noise.

thank you and sorry again!

from auth0-react-samples.

actually..so when i do the initial login its fine, but the moment i refresh... this happens

(that spinner spins for about 10 seconds and then resolves to "oops... timeout", same as above)

my console error says Failed to load resource: the server responded with a status of 400 ()

it looks like there's some sort of intermittent service outage?

from auth0-react-samples.

ah. when i inspect the html of the error, i see this hidden important detail.

    <div class="error-footer">
        <div class="footer-groups cf">
          <span class="footer-group">
            <i class="footer-group-icon read-docs"></i>
            <h4 class="footer-group-title">TECHNICAL DETAILS</h4>
            <a href="#" class="toggle-details">See details for this error</a>
          </span>
          <span class="footer-group">
            <h4 class="footer-group-title">SUPPORT</h4>
            
              <p class="footer-group-detail">Please contact the systems administrator.</p>
            
          </span>
        </div>
        <div class="error-details">
          <p class="error-status">
            
            <strong>invalid_request</strong>: The specified redirect_uri &#39;http://localhost:3000&#39; does not have a registered origin.
            
          </p>
          
          <a href="https://manage.auth0.com/#/logs/" target="_new" class="view-logs-btn">VIEW LOG</a>
          

          
          <span class="error-id">
            <span class="error-id-title">TRACKING ID: </span><span class="error-id-content">7db8c8e6600f2cdd9829</span>
          </span>
          
        </div>

i recommend not hiding it...

from auth0-react-samples.

The error is happening in the iframe that we are using, making it a bit harder to bubble that to the parent application.
The same error should show up in your Auth0 Tenant logs.

To fix this, add http://localhost:3000 in your applications Settings in Auth0 as an Allowed Web Origin.

from auth0-react-samples.

ok it looks like i didnt add logout url and web origins. once i added it, i could login just fine.

so the misconfiguration was my fault, but ultimately this may be a common failure mode for people trying this out - you may wish to have a better error message experience here! closing for now and leaving that up to you.

from auth0-react-samples.

@sw-yx The sample is intended to be used while following our React Quickstart at https://auth0.com/docs/quickstart/spa/react/01-login, there it mentions to configure those things before continuing.

About the error message, yeah it is pretty inconvenient but I am not sure it's easy to get the error from a iframe's HTML response to the parent application.

As said, the tenant logs do capture all of this, so it should help you with debugging these kind of problems as well.

Happy you solved it!

from auth0-react-samples.