Flaky userId/sessionId on the client side after logging in
lovincyrus opened this issue · 1 comments
Preliminary Checks
- I have reviewed the documentation: https://clerk.com/docs, and specifically https://clerk.com/docs/references/nextjs/read-session-data
- 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/lovincyrus/coolection/blob/cyrus/clerk-auth-bug/app/components/header.tsx
Publishable key
pk_test_bmF0aW9uYWwtZ3JpZmZvbi00Ny5jbGVyay5hY2NvdW50cy5kZXYk
Description
Recording: https://www.loom.com/share/9c23de08c8264ed5bb5d51b5f89d9e7a
Steps to reproduce:
- Run the app locally
- Log in via Google auth
- Pay attention to the sign out button in the header. The userId and sessionId would sometimes be undefined upon logging in.
Expected behavior:
The custom sign out button should always fire the signOut() and sign out the current user when clicked.
Actual behavior:
The custom sign out button isn't being fired because the userId / sessionId isn't available yet.
Environment
System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Max
Memory: 8.01 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.20.2 - ~/Library/Caches/fnm_multishells/22961_1716262993246/bin/node
Yarn: 1.22.21 - /opt/homebrew/bin/yarn
npm: 10.5.0 - ~/Library/Caches/fnm_multishells/22961_1716262993246/bin/npm
pnpm: 8.15.4 - ~/Library/pnpm/pnpm
bun: 1.0.26 - ~/.bun/bin/bun
Browsers:
Brave Browser: 124.1.65.126
Chrome: 125.0.6422.60
Safari: 17.4.1
npmPackages:
@clerk/clerk-react: ^5.1.0 => 5.1.0
@clerk/nextjs: ^5.0.12 => 5.0.12
@piotr-cz/swr-idb-cache: ^1.0.3 => 1.0.3
@prisma/client: ^5.13.0 => 5.13.0
@radix-ui/react-context-menu: ^2.1.5 => 2.1.5
@radix-ui/react-dialog: ^1.0.5 => 1.0.5
@radix-ui/react-label: ^2.0.2 => 2.0.2
@radix-ui/react-scroll-area: ^1.0.5 => 1.0.5
@radix-ui/react-slot: ^1.0.2 => 1.0.2
@types/node: ^20.12.7 => 20.12.7
@types/react: ^18 => 18.3.1
@types/react-dom: ^18 => 18.3.0
@vercel/analytics: ^1.2.2 => 1.2.2
@vercel/speed-insights: ^1.0.10 => 1.0.10
autoprefixer: ^10.4.19 => 10.4.19
cheerio: 1.0.0-rc.12 => 1.0.0-rc.12
class-variance-authority: ^0.7.0 => 0.7.0
clsx: ^2.1.1 => 2.1.1
eslint: ^8 => 8.57.0
eslint-config-next: 14.2.3 => 14.2.3
eslint-plugin-simple-import-sort: ^12.1.0 => 12.1.0
eslint-plugin-unused-imports: ^3.1.0 => 3.1.0
framer-motion: ^11.1.9 => 11.1.9
lucide-react: ^0.376.0 => 0.376.0
next: 14.2.3 => 14.2.3
node-fetch: ^3.3.2 => 3.3.2
normalize-url: ^8.0.1 => 8.0.1
openai: ^4.39.0 => 4.39.0
postcss: ^8.4.38 => 8.4.38
prettier: ^3.2.5 => 3.2.5
prettier-plugin-tailwindcss: ^0.5.14 => 0.5.14
prisma: ^5.13.0 => 5.13.0
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
reakeys: ^2.0.2 => 2.0.2
sonner: ^1.4.41 => 1.4.41
swr: ^2.2.5 => 2.2.5
tailwind-merge: ^2.3.0 => 2.3.0
tailwindcss: ^3.4.3 => 3.4.3
ts-node: ^10.9.1 => 10.9.2
typescript: ^5.4.5 => 5.4.5
use-debounce: ^10.0.0 => 10.0.0
uuidv4: ^6.2.13 => 6.2.13Update:
I suspected that the flakiness was caused by this codeblock.
I have added a webhook to synchronize user metadata with the database instead, since then, I have not encountered any more missing userId/sessionId errors or issues with signOut() not firing.