Flaky userId/sessionId on the client side after logging in

[lovincyrus]

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:

1. Run the app locally
2. Log in via Google auth
3. 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.13

[lovincyrus]

Update:

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.

Screen.Recording.2024-05-29.at.4.07.50.PM.mov