How do I solve the AWS error: "The difference between the request time and the current time is too large" front-end only?

Question

I currently have an app that allows uploads to AWS S3, the upload is handled purely from the front-end of the app in js with the aws-sdk. We had some users facing this issue mentioned in the title (The difference between the request time and the current time is too large) which prevents them from uploading properly.

I am aware of the solutions provided here, but I was wondering if there was anything I could do to make sure this doesn't happen again for any of the users, with front-end changes only. Is there a way I can make my request be in sync properly ?

I tried having some users sync their clock, but it either did not work or they didn't do it properly. Unfortunately I cannot rely on the user to fix this.

Answer 1

From: https://github.com/aws/aws-sdk-js/issues/399#issuecomment-233057244

Try this:

AWS.events.on('retry', function(response) {  
      if (response.error.name === 'RequestTimeTooSkewed') {
        console.error('User time is not correct. Handling error!');
        console.log('AWS systemClockOffset:', AWS.config.systemClockOffset);
        var serverTime = Date.parse(response.httpResponse.headers['date']);
        var timeNow = new Date().getTime();
        console.log('AWS timestamp:', new Date(serverTime));
        console.log('Browser timestamp:', new Date(timeNow));
        AWS.config.systemClockOffset = Math.abs(timeNow - serverTime);
        response.error.retryable = true;
        console.log('Setting systemClockOffset to:', AWS.config.systemClockOffset);
        console.log('Retrying uploading to S3 once more...');
      }
});

You detect how much the clock is off by, set AWS.config.systemClockOffset to the difference, and retry