I’m currently working on a NextJS app (app router) and went with Clerk for authentication using their @clerk/nextjs (4.29.7) package.
Everything works great until the internet connection is interrupted. As Clerk works with very short-lived access tokens, it requests a new token every minute or so. Obviously, as soon as the internet connection is lost, the next request will fail and lead first to
clerk.browser.js:2
POST https://**********.clerk.accounts.dev/v1/client/sessions/sess_2cy4a…9vLkBPD4GVFExWN5Dc-nMoU8VxlNWAbb4w3X6ELJ7xw7OIG5X68F6Rm86nnbnzgrNQctoOKnFA net::ERR_INTERNET_DISCONNECTED
leading up to the following error:
clerk.browser.js:2
Uncaught (in promise) Error: ClerkJS: Token refresh failed (error='Cannot read properties of null (reading 'jwt')')
at p (clerk.browser.js:2:74485)
at h.handleGetTokenError (clerk.browser.js:2:192240)
at h.refreshSessionToken (clerk.browser.js:2:191543)
at async Object.acquireLockAndRun (clerk.browser.js:2:140446)
This is, for example, the case when you close your laptop on the app and re-open it to resume your session later. Having the app break and not try to redirect to sign in or re-try to fetch a new token is rather unfortunate.
I tried to find a way to catch and handle that error or prevent it in the first place by stopping the requests when offline, but I didn’t find any way to do it. There seems to be nothing on that in the docs, and I’m surprised no one seems to have struggled with that so far.
I’d appreciate any ideas or insights on how to deal with this. Thanks in advance!