Auth0.js: renewAuth() fails with timeout

[kmaida]

Sample project producing the bug: https://github.com/kmaida/mean-rsvp-auth0
Auth0.js v8.7.0
Chrome/Firefox/Safari (all), MacOS 10.12.5

I'm having an issue with renewAuth.

I have an Angular v4 application with a Node API. I'm using Auth0 to authorize both the SPA and the Node API. I have an API set up in Auth0 where I'm able to change the Token Expiration For Browser Flows (Seconds) in order to test silent auth renewal (by changing this time to something lower to trigger renewals more frequently than every two hours).

I have a separate callback route that is being redirected to after every login at the hosted Auth0 login page (using our updated pipeline). My callback component looks like this: https://github.com/kmaida/mean-rsvp-auth0/blob/master/src/app/pages/callback/callback.component.ts

My authentication service is here: https://github.com/kmaida/mean-rsvp-auth0/blob/master/src/app/auth/auth.service.ts The token renewal parts are based off the Auth0 token renewal Angular example repo here: https://github.com/auth0-samples/auth0-angular-samples/blob/master/05-Token-Renewal/src/app/auth/auth.service.ts

After a few successful silent renewals, renewal always fails with the following error:

If I leave the API token expiration for my access token at the default value of 7200, it will always fail the first time. If I shorten the expiration to something like a few minutes or 30 seconds, it will succeed a few (2-4 times) before it fails on a subsequent attempt. It's also worthwhile to note that the failure ALSO happens when I _manually_ trigger the renewAuth(), ie., with an alert a minute or so before the token is set to expire. I can successfully get a new token a few times, and then it fails after a couple of successes, the same as when it's running on an expiration timer silently.

The only documentation I've been able to find regarding this was an issue where a user was receiving a timeout after 60 seconds, but was still getting a token back. In my case, I do not receive an authResult during failure, only the timeout error.

[kmaida]

Closing this issue, as I think I may have determined a solution. I'll reopen if the issue re-occurs and will comment with the solution if it works.

[kmaida]

Solution: callback had to exist outside of the SPA in a different file and iframes had to be allowed with SAMEORIGIN header on reverse proxy.

[davidharting]

@kmaida I believe I am running into a similar issue. Could you detail out a few things in your solution.

iframes had to be allowed with SAMEORIGIN header

Where are you configuring iframes to be allowed with SAMEORIGIN header? I'm not really sure what that means or where you would configure that.

on reverse proxy

What is this reverse proxy? Is this a browser setting, or something in your auth0 configuration?

Forgive my ignorance. Any help would be appreciated!

[kmaida]

@davidharting Hi! I was only having this issue when deployed in production with nginx reverse proxy and SSL. I had to enable SAMEORIGIN for iframes in my security settings in my production environment and make sure the callback page lived on the server and not in my front-end; this had nothing to do with Auth0 configuration.

However, I would strongly recommend that you update your Auth0.js version to latest. The newer versions support a different method of token renewal using a method called checkSession() (see the docs here: https://auth0.com/docs/libraries/auth0js/v8#using-checksession-to-acquire-new-tokens)

This approach is much more appealing than renewAuth() with SPAs as it does not require an external callback page. What is your front end?

[davidharting]

@kmaida Thank you so much for this information!

My frontend is a React SPA. We have a silent.html page that is getting rendered inside an iframe and postMessage is called from there with the renewed token. So I believe it is somewhat similar to the setup you describe in this post, and as far as I can tell is very similar to the documentation Auth0 provides.

In my case, the issue is that the message never gets received when running in Edge / IE11 (i.e., webAuth.renewAuth() just hangs until the timeout is executed), even though parent.postMessage is getting called inside of silent.html.

Thank you for linking me to checkSession!. I will definitely check that out and see if it resolves the issue.

[kmaida]

@davidharting If you use checkSession, you can do away with the silent.html file, which is 👍

You will have to add your app's URL to your Auth0 Client configuration in Allowed Web Origins in order to allow web message response mode (this is a relatively new config option).

Here is a practical example using Angular (though the implementation should be very similar in React): https://auth0.com/blog/real-world-angular-series-part-7/#renew-auth

Hope this helps and fixes the issue for you!

[davidharting]

Thanks so much for this @kmaida! Getting rid of silent.html would definitely be nice :)