clerk/javascript

Sign out not working reliably in @clerk/nextjs v5

philefstat opened this issue · 2 comments

Preliminary Checks

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:

  1. pnpm run dev
  2. login
  3. 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

Screenshot 2024-05-09 at 15 00 58

Screenshot 2024-05-09 at 15 02 29

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!