Better Auth•2mo ago

Cannot use useSession hook

Hello, I use Better Auth with Next.js. I use the Discord provider and it works but when I want to retrieve the user's session, my IDE tells me that authClient.useSession is not callable and I got this in my browser's console: GET http://localhost:3000/api/auth/use-session 404 (Not Found). My file src/app/api/auth/[...all]/route.ts looks like this:

import { auth } from "@/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

import { auth } from "@/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

src/app/page.tsx

"use client"

import { authClient } from "@/auth-client";
import { Button } from "@/components/ui/button";

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

    return (
        <div>
            <Button
                onClick={(): void => {
                    authClient.signIn.social({
                        provider: "discord"
                    })
                }}
            >
                Se connecter
            </Button>

            <div>
                {JSON.stringify(session, null, 2)}
            </div>
        </div>
  );
}

"use client"

import { authClient } from "@/auth-client";
import { Button } from "@/components/ui/button";

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

    return (
        <div>
            <Button
                onClick={(): void => {
                    authClient.signIn.social({
                        provider: "discord"
                    })
                }}
            >
                Se connecter
            </Button>

            <div>
                {JSON.stringify(session, null, 2)}
            </div>
        </div>
  );
}

/src/auth.ts

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import * as schema from "@/db/schema";

export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg",
        schema: {
            ...schema,
            user: schema.user,
        },
    }),
    socialProviders: {
        discord: {
            clientId: process.env.DISCORD_CLIENT_ID as string,
            clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
        },
    },
});

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import * as schema from "@/db/schema";

export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg",
        schema: {
            ...schema,
            user: schema.user,
        },
    }),
    socialProviders: {
        discord: {
            clientId: process.env.DISCORD_CLIENT_ID as string,
            clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
        },
    },
});

src/auth-client.ts

import { createAuthClient } from "better-auth/client"

export const authClient =  createAuthClient({
    baseURL: "http://localhost:3000"
})

import { createAuthClient } from "better-auth/client"

export const authClient =  createAuthClient({
    baseURL: "http://localhost:3000"
})

I run on localhost:3000 Thanks for help!

2 Replies

Ping•2mo ago

Change your auth-client import from better-auth/client to better-auth/react

MattéoOP•2mo ago

You just solved my problem! Thank you very much!

Gaming

Programming

Cannot use useSession hook

Did you find this page helpful?