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

useSession() no longer working on Next.js #1745

New Issue
Closed
opened 2026-03-13 09:00:27 -05:00 by GiteaMirror · 2 comments
GiteaMirror commented 2026-03-13 09:00:27 -05:00
Owner
Copy Link

Originally created by @0-BSCode on GitHub (Aug 20, 2025).

Is this suited for github?

  • Yes, this is suited for github

To Reproduce

Create basic authClient

import { createAuthClient } from "better-auth/client";
import { env } from "@/config/env.client";

export const authClient = createAuthClient({
	baseURL: `${env.NEXT_PUBLIC_API_BASE_URL}/auth`,
	fetchOptions: {
		credentials: "include",
	},
});

Then, on a client-side page, attempt to fetch the user session via the useSession() hook.

// page.tsx
"use client"
import { authClient } from "@/infrastructure/auth/auth-client"

export default function TestPage() {
    const { data: session } = authClient.useSession()


    return (
        <p>Test...</p>
    )
}

Current vs. Expected behavior

As of this writing, based on the Basic Usage documentation, the above code on page.tsx should work. However, Typescript will throw an error:

This expression is not callable.
  No constituent of type 'Atom<{ data: { user: { id: string; name: string; emailVerified: boolean; email: string; createdAt: Date; updatedAt: Date; image?: string | null | undefined; }; session: { id: string; token: string; ... 5 more ...; userAgent?: string | ... 1 more ... | undefined; }; } | null; error: BetterFetchError | null; isPending...' is callable.ts(2349)

A screenshot of the error is provided below:
Image

The following code does work, which just calls the .get() method from useSession

"use client"
import { authClient } from "@/infrastructure/auth/auth-client"

export default function TestPage() {
    const { data: session } = authClient.useSession.get()


    return (
        <p>Test...</p>
    )
}

I'm not sure if this is the intended way of fetching user information. This setup throws no errors for me, yet there's no documentation to reflect this.

What version of Better Auth are you using?

1.3.7

System info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800HS with Radeon Graphics
    Memory: 2.70 GB / 23.41 GB
  Browsers:
    Edge: Chromium (139.0.3405.86)
    Internet Explorer: 11.0.26100.1882

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

Client

Auth config (if applicable)

N/A

Additional context

No response

Originally created by @0-BSCode on GitHub (Aug 20, 2025). ### Is this suited for github? - [x] Yes, this is suited for github ### To Reproduce Create basic `authClient` ```ts import { createAuthClient } from "better-auth/client"; import { env } from "@/config/env.client"; export const authClient = createAuthClient({ baseURL: `${env.NEXT_PUBLIC_API_BASE_URL}/auth`, fetchOptions: { credentials: "include", }, }); ``` Then, on a client-side page, attempt to fetch the user session via the `useSession()` hook. ```tsx // page.tsx "use client" import { authClient } from "@/infrastructure/auth/auth-client" export default function TestPage() { const { data: session } = authClient.useSession() return ( <p>Test...</p> ) } ``` ### Current vs. Expected behavior As of this writing, based on the [Basic Usage](https://www.better-auth.com/docs/basic-usage#use-session) documentation, the above code on `page.tsx` should work. However, Typescript will throw an error: ```txt This expression is not callable. No constituent of type 'Atom<{ data: { user: { id: string; name: string; emailVerified: boolean; email: string; createdAt: Date; updatedAt: Date; image?: string | null | undefined; }; session: { id: string; token: string; ... 5 more ...; userAgent?: string | ... 1 more ... | undefined; }; } | null; error: BetterFetchError | null; isPending...' is callable.ts(2349) ``` A screenshot of the error is provided below: <img width="2011" height="689" alt="Image" src="https://github.com/user-attachments/assets/96cc58e7-7079-41fc-8bf0-ca9798e9656b" /> The following code does work, which just calls the `.get()` method from `useSession` ```tsx "use client" import { authClient } from "@/infrastructure/auth/auth-client" export default function TestPage() { const { data: session } = authClient.useSession.get() return ( <p>Test...</p> ) } ``` I'm not sure if this is the intended way of fetching user information. This setup throws no errors for me, yet there's no documentation to reflect this. ### What version of Better Auth are you using? 1.3.7 ### System info ```bash System: OS: Windows 11 10.0.26100 CPU: (16) x64 AMD Ryzen 7 5800HS with Radeon Graphics Memory: 2.70 GB / 23.41 GB Browsers: Edge: Chromium (139.0.3405.86) Internet Explorer: 11.0.26100.1882 ``` ### Which area(s) are affected? (Select all that apply) Client ### Auth config (if applicable) ```typescript N/A ``` ### Additional context _No response_
GiteaMirror added the nextjs label 2026-03-13 09:00:27 -05:00
GiteaMirror commented 2026-03-13 09:00:28 -05:00
Author
Owner
Copy Link

@dosubot[bot] commented on GitHub (Aug 20, 2025):

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

The TypeScript error happens because you're importing createAuthClient from "better-auth/client", which gives you an atom-like object for useSession (not a callable hook). The intended usage in React/Next.js client components is to import createAuthClient from "better-auth/react". This will provide a callable useSession() hook, matching the documentation and examples (source, docs).

So, update your import to:

import { createAuthClient } from "better-auth/react";

You should then be able to use authClient.useSession() as a hook in your client components without errors. Using .get() is not the intended or documented usage for session fetching in React/Next.js apps.

To reply, just mention @dosu.

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

@dosubot[bot] commented on GitHub (Aug 20, 2025): <!-- Greeting --> Hi @0-BSCode! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the better-auth team. <!-- Answer --> The TypeScript error happens because you're importing `createAuthClient` from `"better-auth/client"`, which gives you an atom-like object for `useSession` (not a callable hook). The intended usage in React/Next.js client components is to import `createAuthClient` from `"better-auth/react"`. This will provide a callable `useSession()` hook, matching the documentation and examples ([source](https://github.com/better-auth/better-auth/issues/903), [docs](https://better-auth.com/docs/concepts/client)). So, update your import to: ```ts import { createAuthClient } from "better-auth/react"; ``` You should then be able to use `authClient.useSession()` as a hook in your client components without errors. Using `.get()` is not the intended or documented usage for session fetching in React/Next.js apps. <!-- 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/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/77f7b9bc-99ae-4ab6-9906-b81b6a28959c?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/cdda13d9-dd27-4d31-b09a-5d8bec92de21/ask?utm_source=github)&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/4105)
GiteaMirror commented 2026-03-13 09:00:28 -05:00
Author
Owner
Copy Link

@0-BSCode commented on GitHub (Aug 20, 2025):

You're right! Didn't notice I imported from the wrong path. Thanks!

@0-BSCode commented on GitHub (Aug 20, 2025): You're right! Didn't notice I imported from the wrong path. Thanks!
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 nextjs
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#1745
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?