Sign out not working reliably in @clerk/nextjs v5
philefstat opened this issue · 2 comments
Preliminary Checks
- I have reviewed the documentation: https://clerk.com/docs
- I have searched for existing issues: https://github.com/clerk/javascript/issues
- I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
- This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
https://github.com/philefstat/clerk-bug-repro
Publishable key
pk_test_c3BsZW5kaWQtY2hpZ2dlci00NS5jbGVyay5hY2NvdW50cy5kZXYk
Description
The repro above is simply the clerk nextjs started with the @clerk/nextjs version bumped to 5.0.7 and no other modifications.
Steps to reproduce:
- pnpm run dev
- login
- click the user button and click log out
Expected behavior:
User is signed out and redirected to login
Actual behavior:
Full page client-side error about 50% of the time
Environment
System:
OS: macOS 12.0.1
CPU: (10) arm64 Apple M1 Max
Memory: 234.06 MB / 64.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: 8.6.6 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 124.0.6367.119
Safari: 15.1
npmPackages:
@clerk/nextjs: 5.0.7 => 5.0.7
@types/node: ^20.11.0 => 20.11.0
@types/react: ^18.2.47 => 18.2.47
@types/react-dom: ^18.2.18 => 18.2.18
@types/react-syntax-highlighter: ^15.5.11 => 15.5.11
autoprefixer: ^10.4.16 => 10.4.16
clsx: ^2.1.1 => 2.1.1
geist: ^1.3.0 => 1.3.0
next: ^14.0.4 => 14.0.4
postcss: ^8.4.33 => 8.4.33
prism-react-renderer: ^2.3.1 => 2.3.1
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-syntax-highlighter: ^15.5.0 => 15.5.0
tailwindcss: ^3.4.1 => 3.4.1
typescript: ^5.3.3 => 5.3.3
For additional context, the issue behaves slightly differently in the code for our app vs the repro. For starters in our code it occurs 100% of the time vs ~50% in the repro. Essentially, as soon as you hit sign out the client-side error occurs. It does not redirect to sign in or any other url provided to the sign out function callback. Using the signOut function vs SignOutButton etc. doesn't make a difference. When digging into middleware, what appears to be happening is that auth.protect() still seems to think the user is authenticated and does not redirect to sign in or, auth() still seems to be populated with the user's info / etc. But when getToken is called somewhere within the route it fails and causes the error (but that code should not be reachabale by a signed out user on a route that's "protected")
This did not occur in the previous 4.x version with authMiddleware that we were using before.
Hello @philefstat , we've pushed a fix with our latest release! You don't have to upgrade your packages as long as running Clerk.version
in the browser console returns a version newer or equal to 5.4.0
.
I'm closing this one, but please feel free to reopen if needed!