Refresh loop on every page

matteobad commented 1 year ago

[x] Review the documentation: https://docs.clerk.dev/
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[ ] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[x] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ ] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Version:

4.11.0

Browser/OS

Chrome latest

Description

Hi, I've recently opened the #840 which was quickly fixed :) Unfortunately, It seems that now there is another problem that I guess previously was obscured by the #840. After updating the previous encoding error is gone, but now when I'm logged in, every page goes in a refresh loop. The reload is due to a Clerk script tag in the HTML

I've managed to replicate the issue on the official template: https://github.com/clerkinc/t3-turbo-and-clerk. If I can help in any way just let me know. Now it is pretty much blocking me and my teammates are stuck with either the old problem or this blocking refresh loop.

Thank you in advance

dimkl commented 1 year ago

Hello @matteobad. Thank you for reporting this one too. :) The reload script in the page shown is intentional for some cases (we call it interstitial). Could you provide the x-clerk-auth-* response headers and the window.__clerk_debug= "SOMETHING_STRINGIFIED" (i think 7th line of the html) of the page shown in the screenshot?

PS: please omit any related information with secretKey.

matteobad commented 1 year ago

Hi @dimkl,

The response headers:

x-clerk-auth-message: JWT%20issued%20at%20date%20claim%20(iat)%20is%20in%20the%20future.%20Issued%20at%20date%3A%20Fri%20Feb%2024%202023%2016%3A53%3A01%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale)%3B%20Current%20date%3A%20Fri%20Feb%2024%202023%2016%3A52%3A50%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale)%3B%20(reason%3Dtoken-not-active-yet%2C%20token-carrier%3Dcookie)
x-clerk-auth-reason: token-not-active-yet
x-clerk-auth-status: interstitial

I've noticed that it remains token-not-active-yet for a couple of minutes and then becomes:

x-clerk-auth-message: JWT%20is%20expired.%20Expiry%20date%3A%20Fri%20Feb%2024%202023%2016%3A54%3A21%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale)%2C%20Current%20date%3A%20Fri%20Feb%2024%202023%2016%3A57%3A00%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale).%20(reason%3Dtoken-expired%2C%20token-carrier%3Dcookie)
x-clerk-auth-reason: token-expired
x-clerk-auth-status: interstitial

I'm doing all of my testings on the template with the latest version to avoid any of my code being the problem.

but there is no window.__clerk_debug on the page. I searched for it in the HTML and in the console (with a breakpoint to avoid refresh)

dimkl commented 1 year ago

By decoding the x-clerk-auth-message, it seems that clock of your local computer is 11 seconds in the past compared to the clerk server. So the issued tokens (from the clerk server) are in the future, causing your local server to fail during the token verification which renders the html page and then reloads the page.

decodeURIComponent('JWT%20issued%20at%20date%20claim%20(iat)%20is%20in%20the%20future.%20Issued%20at%20date%3A%20Fri%20Feb%2024%202023%2016%3A53%3A01%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale)%3B%20Current%20date%3A%20Fri%20Feb%2024%202023%2016%3A52%3A50%20GMT%2B0100%20(Ora%20standard%20dell%E2%80%99Europa%20centrale)%3B%20(reason%3Dtoken-not-active-yet%2C%20token-carrier%3Dcookie)')
// 'JWT issued at date claim (iat) is in the future. Issued at date: Fri Feb 24 2023 16:53:01 GMT+0100 (Ora standard dell’Europa centrale); Current date: Fri Feb 24 2023 16:52:50 GMT+0100 (Ora standard dell’Europa centrale); (reason=token-not-active-yet, token-carrier=cookie)'

Solutions:

sync your local computer clock
pass clockSkewInSeconds a value between 12 to 50 in withClerkMiddleware or withServerSideAuth options

(I would suggest the 1st solution)

PS: ignore my previous comment about window.__clerk_debug.

Conradmaker commented 1 year ago

I'm having the same problem I set withClerkMiddleware to use clerk's auth and currentUser and it seemed to work very well in practice.

However, if you put withClerkMiddleware in the source, the entire page will be refreshed whenever the nextjs route is navigated, and this happened the same in both development and production modes.

Even when no conditions were applied in the middleware as in the code below, the result was the same.

export default withClerkMiddleware(req => {
  return NextResponse.next();
});

And I tried both of the above solutions

sync your local computer clock
pass clockSkewInSeconds a value between 12 to 50 in withClerkMiddleware or withServerSideAuth options

dimkl commented 1 year ago

Hello @Conradmaker thank you for reporting. Coud you please check if the x-clerk-auth-message is the same as the one i pasted in my previous comment? If so, could you provide code example about this:

I set withClerkMiddleware to use clerk's auth and currentUser and it seemed to work very well in practice. Also could you elaborate what do you mean with the above?
if you put withClerkMiddleware in the source

It's gonna take some time for me to respond, sorry for the inconvenience and thank you for your patience.

Conradmaker commented 1 year ago

I've solved the problem. In my case, I was using the nextjs13.1.* version, but it seems to have been resolved by upgrading to 13.2.*. It seems that there was a conflict with nextjs in the process of handling withClerkMiddleware.

thanks for the help @dimkl

matteobad commented 1 year ago

Thank you @dimkl! I've synced the system clock and that seems to have solved the issue. Also updated to nextjs@13.2.0

elitan commented 1 year ago

Just had this issue today. My computer's clock was 18 seconds behind (https://time.is/).

I updated ntp servers from Apple's to another one (https://www.netnod.se/swedish-distributed-time-service). That fixed the problem.

Question is, what if a user has this issue? Will Clerk loop-reload the page for them too? Or does this only happen in development?

SokratisVidros commented 1 year ago

@elitan Clock skew issues are not specific to development instances. In April we are planning to add an infinite loop detection mechanism to mitigate the issue.

elitan commented 1 year ago

@elitan Clock skew issues are not specific to development instances. In April we are planning to add an infinite loop detection mechanism to mitigate the issue.

That's excellent news. Is there an issue open so I can follow it, or should we re-open this issue?

dimkl commented 1 year ago

@elitan the infinite loop detection mechanism is not directly related to this ticket, so i wouldn't re-open this one. I would suggest to keep an eye on our Clerk changelog email. If that is not an option, i will you could open an Feature Request issue and we will add a comment and close it when it's released.

clerk / javascript