Receiving both successful redirect and error callback when using renewAuth

Help
,
1

I’m am working with Auth0.js (v8.5.0) in a SPA for the first time and overall it is working very nicely and is well documented. I do however have one issue which confuses me:

When calling renewAuth I can see that the “redirectUrl” is called and I am receiving an updated token with a new expiry date/time in the url as expected. My concern is, that after exactly 60 seconds the JS callback function is called and the “err” value is:

{
  error: "timeout",
  description: "Timeout during authentication renew."
}

I can make requests with the new token, so it appears that it is valid. It was pure coincidence that I saw the timeout happen.

My question is: Can I safely ignore the timeout message I am receving and trust that the updated token will work, or should investigate more why this is happening? I haven’t been able to find other threads here about this particular issue.

Any help and feedback is appreciated.

My code looks like this (simplified a bit):

let auth = new auth0.WebAuth({
  clientID: 'fake-id-value',
  domain: 'fake-domain-value',
  responseType: 'token id_token',
  redirectUri: `${window.location.origin}`
})

// Login
auth.redirect.loginWithCredentials({
  connection: 'Username-Password-Authentication',
  'fake-username-value',
  'fake-password-value',
  scope: 'openid email'
}, err => {
  if (err) {
    console.log('Login failed:')
    console.log(err)
  }
})

// Renew token
auth.renewAuth({
  redirectUri: `${window.location.origin}`,
  usePostMessage: true,
}, (err, authResult) => {
  console.log('renewAuth callback:')
  console.log(err) // This is called after 60 seconds
  console.log(authResult)
})
2

Update:

There’s a new method that gives the same functionality as renewAuth with less complexity in client application; see:

https://auth0.com/docs/libraries/auth0js/v8#using-checksession-to-acquire-new-tokens

The timeout error in question will be triggered when setting usePostMessage=true and the callback page does not post a message (within the timeout duration; 60s) to the parent window.

If you take a look at the sample callback page handler included in the documentation, you’ll notice that it uses postMessage to send the response to the parent window.

  var result = webAuth.parseHash(window.location.hash, function(err, data) {
    parent.postMessage(err || data, "https://example.com/");
  });

Based on the code you showed when you do the renewAuth call you’re passing redirectUri corresponding to ${window.location.origin} which I assume is your full application. As documented, the callback for the renew auth should be a dedicated page that only does the parsing of the response and posting of the message.

The actual redirect to /authorize happens inside an iframe (…) it is strongly recommended to have a dedicated callback page for silent authentication in order to avoid the delay of loading your entire application again inside an iframe.

This callback page should only parse the URL hash and post it to the parent document, so that your application can take action depending on the outcome of the silent authentication attempt.

3

I’m having a very similar problem, except that when the timeout error occurs, there is no valid authResult being returned, only the error. I have a separate callback page that sets up a WebAuth instance and posts the message back to the parent, as instructed in the docs. I’m using Angular v4 and an API that I have set up in Auth0, so I’m able to change the Token Expiration for Browser Flows at-will to test this. It typically renews successfully a few times and then fails with timeout.

4

Hi, I forgot to update this one. Jmangelo’s answer fixed it for me - I didn’t have a function to handle the usePostMessage callback as I was testing without an iFrame and instead loading the whole page (which isn’t recommended) for testing.

5

Hi, I forgot to update this one. Jmangelo’s answer fixed it for me - I didn’t have a function to handle the usePostMessage callback as I was testing without an iFrame and instead loading the whole page (which isn’t recommended) for testing.

6

I have the same problem. I am watching the postmessage happen and I am watching my code receive the postmessage. Then nothing happens until the setTimeout expires within auth0 library and passes a hash of Timeout during authentication renew. I have the token, I can see it, but I am not getting the callback to fire in .renewAuth() until after the timeout. Then it fires but with ERR populated. Anyone have an idea why?

7

I have the exact same issue as described by aec4444. My iframe calls postMessage and it fires IframeHandler.prototype.eventListener within Auth0 js but still gets a {error: “timeout”, errorDescription: “Timeout during authentication renew.”}. Any help would be greatly appreciated.

8

I have the same problem. I am watching the postmessage happen and I am watching my code receive the postmessage. Then nothing happens until the setTimeout expires within auth0 library and passes a hash of Timeout during authentication renew. I have the token, I can see it, but I am not getting the callback to fire in .renewAuth() until after the timeout. Then it fires but with ERR populated. Anyone have an idea why?

9

I have the exact same issue as described by aec4444. My iframe calls postMessage and it fires IframeHandler.prototype.eventListener within Auth0 js but still gets a {error: “timeout”, errorDescription: “Timeout during authentication renew.”}. Any help would be greatly appreciated.

10

@aec4444 @hunter.eskew since the time my answer was posted a new approach is available that may simplify things as it no longer requires you to have a specific callback page that does the post message. You should check: Auth0.js v9 Reference

11

Thank you jmangelo. I will check it out. And a special thanks for such a quick reply!

12

Thank you jmangelo. I will check it out. And a special thanks for such a quick reply!