Auth0-spa-js: Chrome loading indicator hangs on createAuth0Client

[bryvamper]

This was tested against Chrome 76, and doesn’t appear to affect Firefox or Safari.

When the client is created, my app is able to successfully make requests to Auth0 without any errors reported. What’s strange is that the browser shows a loading indicator and status “waiting for (my domain).auth0.com” for an indefinite period of time. (Or until unrelated http requests are triggered in the application). There is no pending requests or any activity in the browser that I can see that would indicate an Auth0 request is hanging.

After digging into the source code, it looks like something related to how the iframe is handled with getTokenSilently and the runIframe method…if I comment out the iframe removal from the DOM, Chrome seems to be happy with reporting the app as loaded.

var iframeEventHandler = function (e) {
    // ... //
    e.data.response.error ? rej(e.data.response) : res(e.data.response);
    clearTimeout(timeoutSetTimeoutId);
    window.removeEventListener('message', iframeEventHandler, false);
    // window.document.body.removeChild(iframe); <-- Commenting out circumvents issue
};

This isn’t causing any functional problems, but it’s a confusing experience on the initial load of the app.

[luisrudge]

I assume removing this code causes the iframe not to be removed from the document, is that right?

[bryvamper]

Yes, that's right. It's not a great solution though...I did a little more hacking around, and I think there might be a Chrome issue removing the iFrame immediately. (maybe an event loop kind of bug) If I add an onload event handler to the iframe and console.log something out, it fires _after_ the code that removes the iframe from the DOM.

[luisrudge]

Can you try moving the offending line inside a setTimeout? If there's an event loop bug, this will fix it

[bryvamper]

setTimeout didn't do the job, it looks like Chrome just hangs the loading indicator unless you wait until the load event of the iframe is called to remove the iframe the DOM. I opened and closed a quick proof of concept PR, but I'm not sure if there's some other factors I'm not aware of that contribute to this. This code fixes the issues for me across the all the latest browsers.

[stevehobbsdev]

Hi @bvamp, just wanted to come back and say that we're now tracking this on our backlog - thanks for your patience!

[bryvamper]

@stevehobbsdev Thank you!

[stevehobbsdev]

@bvamp 👋 Just wondering if this is still an issue for you on current versions of Chrome. I can't reproduce this, so is there anything else you can tell me about your scenario? Do you have a small repro you can share that I can clone and see the problem on my end?

[mattcosta7]

I'vee come across this a couple times recently, but haven't quite figured out how to make it happen yet

[stevehobbsdev]

@mattcosta7 We're having trouble reproducing this too, even with a repro sample. My feeling is that this is an environmental thing.

[adamjmcgrath]

I'm able to reproduce this, but very intermittently and only on PC or when I throttle the CPU on a Mac.

@bvamp I tried your branch #244 but was still able to reproduce it. Are you able to consistently reproduce it on your machine? If so, can you try this branch https://github.com/auth0/auth0-spa-js/tree/delay-iframe-removal - we're looking into just delaying the removal of the iframe for a couple of seconds

[stevehobbsdev]

@bvamp We've added a time-delay to the close operation in #376, please let us know if this does not improve your situation.

[modeswitch]

I'm still experiencing this issue (or one like it). My Vue app hangs while awaiting on createAuth0Client() for many seconds. Is there some diagnostic information that I can provide?

I'm running Chrome Version 86.0.4240.53 (Official Build) beta (64-bit) and @auth0/auth0-spa-js version 1.12.1.

[stevehobbsdev]

@modeswitch It could be down to the client configuration in your Auth0 dashboard. Please check out this FAQ item and let us know if you do not manage to solve it.

[modeswitch]

@stevehobbsdev I've double-checked. Also, I don't get any delays on other browsers and even Chrome on another computer (different version though: 85.0.4183.121).

[stevehobbsdev]

@modeswitch , if you can open a new issue and provide us with a small sample that reproduces the error, I can take a look. Also please check you aren't getting any errors in the logs in your Auth0 Dashboard

[modeswitch]

Are there test credentials that I can use in the example? I'd like to provide something that is runnable but I don't want to provide my private client ID.

[stevehobbsdev]

The clientID is not a private credential and no need to keep it secret.

If you wish, just provide the sample in such a way that I can fill in my own domain and client ID when I come to run it.

[modeswitch]

The clientID isn't secret, but it is private :)

I'll open a new issue.