webAuth.renewAuth - The token was issued in the future. Please check your computed clock.

AngularJS SPA. Our app.js contains call to webAuth.renewAuth.

We are using webAuth.redirect.loginWithCredentials & webAuth.renewAuth in parallel to achieve SSO with two applications with same clientID.

The issue occurs when user is logged out. On the login page -

that.login = function (email, password, loginRedirect) {
      var deferred = $q.defer();
      webAuth.redirect.loginWithCredentials({
        connection: CONFIG_CONSTANTS.AUTH0_CONNECTION,
        responseType: 'token',
        username: email,
        password: password,
        scope: 'openid email',
        redirectUri: loginRedirect
      }, function (err, res) {
        if (err) {
          deferred.reject(err);
        } else {
          deferred.resolve(res);
        }
      }); 

After this call we get a callback with the token. We ignore this token. At this point the application reloads, in app.js a call is made to webAuth.renewAuth -

webAuth.renewAuth({
        redirectUri: window.location.origin + '/silent-auth0-callback.html',
        responseType: 'token',
        responseMode: 'fragment',
        scope: 'openid email'
      }, function (err, res) { ... // } 

Note: usePostMessage: true //this is not used.

Which results in the following error -

Object {error: "invalid_token", errorDescription: "The token was issued in the future. Please check your computed clock."}
error
:
"invalid_token"
errorDescription
:
"The token was issued in the future. Please check your computed clock."
__proto__
:
Object

Now if we refresh the page - webAuth.renewAuth does not throw this error and user is logged in. But if we enter user id & password again, this happens again.

silent-auth0-callback.html page source -

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.auth0.com/js/auth0/8.5.0/auth0.min.js"></script>
  <script type="text/javascript">
    var webAuth = new auth0.WebAuth({
      domain: parent.AUTH0_DOMAIN,
      clientID: parent.AUTH0_CLIENT_ID
    });
    var result = webAuth.parseHash(window.location.hash, function(err, data) {
      parent.postMessage(err || data, window.location.origin);
    });
  </script>
</head>
<body></body>
</html>

Hi, have you tried adding the “leeway” parameter to auth0’s configuration?
Check this:

https://github.com/auth0/auth0.js/pull/292

As an example:

      var webAuth = new auth0.WebAuth({
        domain: 'auth0-tests-auth0js.auth0.com',
        redirectUri: window.location.href,
        clientID: '3GGMIEuBPZ28lb6NBDNARaEZisqFakAs',
        leeway: 30
      });

I saw the pull yesterday. I guess this is happening due to - server which generates token is different from the one which is decoding it. Running an NTP service on both should solve this.

Adding this leeway is a bit insecure I guess?

This worked for me

added the leeway but not working,
the single page is hosted on Azure and getting the invalid token error

I get this error in some computers while in others I don’t.
Adding leeway does not help…

I saw the pull yesterday. I guess this is happening due to - server which generates token is different from the one which is decoding it. Running an NTP service on both should solve this.

Adding this leeway is a bit insecure I guess?

This worked for me

Clocks will never be perfectly in sync. Adding leeway just adds a bit of skew to it. But I don’t think it is much more insecure, considering it’s just a few seconds compared to the duration of the token.
Syncing with NTP is a good idea though.