github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-22 22:32:01 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[GH-ISSUE #3123] Better Auth's React hooks fail when used with Next.js 15 App Router, throwing "Cannot read properties of null (reading 'useRef')" error. #9481

New Issue
Closed
opened 2026-04-13 04:57:48 -05:00 by GiteaMirror · 3 comments
GiteaMirror commented 2026-04-13 04:57:48 -05:00
Owner
Copy Link

Originally created by @panp2000 on GitHub (Jun 21, 2025).
Original GitHub issue: https://github.com/better-auth/better-auth/issues/3123

Is this suited for github?

  • Yes, this is suited for github

To Reproduce

  1. Create Next.js 15 app with App Router
  2. Install better-auth@1.2.10
  3. Create auth client: 
    import { createAuthClient } from

"better-auth/react";
export const authClient = createAuthClient({
baseURL: "http://localhost:3000",
});
export const { useSession } = authClient;
4. Use in client component with "use client" directive
5. Access the page

Current vs. Expected behavior

Component should render without errors

Actual Behavior

TypeError: Cannot read properties of null (reading 'useRef') at process.env.NODE_ENV.exports.useRef (/node_modules/react/cjs/react.development.js:1218:33) at useStore (file:///node_modules/better-auth/dist/client/react/index.mjs:12:21)

What version of Better Auth are you using?

1.2.10

Provide environment information

- OS: Ubuntu 24.04LTS
  - Node: v22.13.0 & v22.16.0 (tested both)
  - Next.js: 15.3.3
  - Better Auth: 1.2.10
  - React: 18.3.1 (also tested with 19.1.0 - same issue)
  - Browser: Chrome 137.0.7151.120

Which area(s) are affected? (Select all that apply)

Backend

Auth config (if applicable)

import { betterAuth } from "better-auth"
export const auth = betterAuth({
  emailAndPassword: {  
    enabled: true
  },
});

Additional context

  • Works fine with dynamic import and ssr: false
  • Issue appears to be App Router specific
  • Not related to Node.js version
Originally created by @panp2000 on GitHub (Jun 21, 2025). Original GitHub issue: https://github.com/better-auth/better-auth/issues/3123 ### Is this suited for github? - [x] Yes, this is suited for github ### To Reproduce 1. Create Next.js 15 app with App Router 2. Install better-auth@1.2.10 3. Create auth client: ```ts import { createAuthClient } from "better-auth/react"; export const authClient = createAuthClient({ baseURL: "http://localhost:3000", }); export const { useSession } = authClient; 4. Use in client component with "use client" directive 5. Access the page ### Current vs. Expected behavior Component should render without errors Actual Behavior TypeError: Cannot read properties of null (reading 'useRef') at process.env.NODE_ENV.exports.useRef (/node_modules/react/cjs/react.development.js:1218:33) at useStore (file:///node_modules/better-auth/dist/client/react/index.mjs:12:21) ### What version of Better Auth are you using? 1.2.10 ### Provide environment information ```bash - OS: Ubuntu 24.04LTS - Node: v22.13.0 & v22.16.0 (tested both) - Next.js: 15.3.3 - Better Auth: 1.2.10 - React: 18.3.1 (also tested with 19.1.0 - same issue) - Browser: Chrome 137.0.7151.120 ``` ### Which area(s) are affected? (Select all that apply) Backend ### Auth config (if applicable) ```typescript import { betterAuth } from "better-auth" export const auth = betterAuth({ emailAndPassword: { enabled: true }, }); ``` ### Additional context - Works fine with dynamic import and ssr: false - Issue appears to be App Router specific - Not related to Node.js version
GiteaMirror added the locked label 2026-04-13 04:57:48 -05:00
GiteaMirror commented 2026-04-13 04:57:50 -05:00
Author
Owner
Copy Link

@dosubot[bot] commented on GitHub (Jun 21, 2025):

Hi @panp2000! I'm Dosu and I’m helping the better-auth team.

This is a compatibility issue between Better Auth's React hooks and the Next.js 15 App Router. The error occurs because Better Auth's hooks (like useSession) rely on React's useRef and useSyncExternalStore, which require a valid client-side React context. In Next.js 15 App Router, it's easy to accidentally invoke these hooks in a server context or outside a proper client boundary, leading to the "Cannot read properties of null (reading 'useRef')" error. This is not related to your Node.js or React version.

There are no existing tickets or fixes for this specific error. The most reliable workaround is to use dynamic import with ssr: false for any component that uses Better Auth's hooks, ensuring they only run on the client and never during SSR. This matches your observation that the issue disappears with this pattern. For now, this is the recommended approach until Better Auth or Next.js introduces a more seamless integration for App Router environments.
Reference

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

<!-- gh-comment-id:2993757712 --> @dosubot[bot] commented on GitHub (Jun 21, 2025): <!-- Greeting --> Hi @panp2000! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the better-auth team. <!-- Answer --> This is a compatibility issue between Better Auth's React hooks and the Next.js 15 App Router. The error occurs because Better Auth's hooks (like useSession) rely on React's useRef and useSyncExternalStore, which require a valid client-side React context. In Next.js 15 App Router, it's easy to accidentally invoke these hooks in a server context or outside a proper client boundary, leading to the "Cannot read properties of null (reading 'useRef')" error. This is not related to your Node.js or React version. There are no existing tickets or fixes for this specific error. The most reliable workaround is to use dynamic import with ssr: false for any component that uses Better Auth's hooks, ensuring they only run on the client and never during SSR. This matches your observation that the issue disappears with this pattern. For now, this is the recommended approach until Better Auth or Next.js introduces a more seamless integration for App Router environments. [Reference](https://github.com/better-auth/better-auth/blob/2fe1be0e5f023be77b07206dd960f9fd38abba8c/packages/better-auth/src/client/react/index.ts) <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/fc1bb0b5-9ba1-4f7c-ab0c-5b06ff565831?feedback_type=other)</sup>&nbsp;&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/better-auth/better-auth/issues/3123)
GiteaMirror commented 2026-04-13 04:57:51 -05:00
Author
Owner
Copy Link

@Kinfe123 commented on GitHub (Jun 22, 2025):

can you please run this

pnpm/npm ls react

you can use pnpm or npm for listing the react and if you got the two listed here. it might be a problem of dual react here , in which both losts there reference to the instance.

<!-- gh-comment-id:2993854036 --> @Kinfe123 commented on GitHub (Jun 22, 2025): can you please run this ```bash pnpm/npm ls react ``` you can use pnpm or npm for listing the react and if you got the two listed here. it might be a problem of dual react here , in which both losts there reference to the instance.
GiteaMirror commented 2026-04-13 04:57:51 -05:00
Author
Owner
Copy Link

@GeuntaBuwono commented on GitHub (Jul 5, 2025):

this issue should be related with Issue
use authClient.getSession() implementation instead.

<!-- gh-comment-id:3040324371 --> @GeuntaBuwono commented on GitHub (Jul 5, 2025): this issue should be related with [Issue](https://github.com/better-auth/better-auth/issues/1006) use `authClient.getSession()` implementation instead.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label locked
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#9481
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?