BA
Better Auth•3mo ago
IAmRoot

using the useSession hook with react/next

Code for context: 
import { createAuthClient } from "better-auth/client";

export const authClient = createAuthClient({
  baseURL: "http://localhost:3001",
});
export const { useSession } = authClient;
import { createAuthClient } from "better-auth/client";

export const authClient = createAuthClient({
  baseURL: "http://localhost:3001",
});
export const { useSession } = authClient;
Component 
...
import { useSession } from "@/lib/auth";


export function Sidebar({ className = "" }: SidebarProps) {
 
  const usesessionhook = useSession();
console.log("session", usesessionhook);
...
...
import { useSession } from "@/lib/auth";


export function Sidebar({ className = "" }: SidebarProps) {
 
  const usesessionhook = useSession();
console.log("session", usesessionhook);
...
I get this type error in VSCode 
This expression is not callable.
  No constituent of type 'Atom<{ data: { user: { id: string; name: string; email: string; emailVerified: boolean; createdAt: Date; updatedAt: Date; image?: string | null | undefined; }; session: { id: string; createdAt: Date; ... 5 more ...; userAgent?: string | ... 1 more ... | undefined; }; } | null; error: BetterFetchError | null; isPendi...' is callable
This expression is not callable.
  No constituent of type 'Atom<{ data: { user: { id: string; name: string; email: string; emailVerified: boolean; createdAt: Date; updatedAt: Date; image?: string | null | undefined; }; session: { id: string; createdAt: Date; ... 5 more ...; userAgent?: string | ... 1 more ... | undefined; }; } | null; error: BetterFetchError | null; isPendi...' is callable
Not sure if this is relevant but if I run it anways i get a 404 on http://localhost:3001/api/auth/use-session in the network tab, I think its supposed to be calling get-session but i'm not sure why the hook from the library is doing this.
Solution:
Okay I figured it out, useSession only works if your are using better auth and next as full stack not if you have your better auth backend on express and just using next as a front end.
Jump to solution
3 Replies
Antoni
Antoni•3mo ago
Did you add the api router into your project? src/app/api/auth/[...all]
IAmRoot
IAmRootOP•3mo ago
We have app.all("/api/auth/*", toNodeHandler(auth)); 
import { betterAuth } from "better-auth";
import { bearer } from "better-auth/plugins";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { prisma } from "./index";
import { env } from "./env";

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  plugins: [bearer()],
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
  trustedOrigins: ["http://localhost:3000"],
});
import { betterAuth } from "better-auth";
import { bearer } from "better-auth/plugins";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { prisma } from "./index";
import { env } from "./env";

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  plugins: [bearer()],
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
  trustedOrigins: ["http://localhost:3000"],
});
is there smth else we need to add? Login and everything works just fine fyi its just usign the useSession hook on FE
Solution
IAmRoot
IAmRoot•3mo ago
Okay I figured it out, useSession only works if your are using better auth and next as full stack not if you have your better auth backend on express and just using next as a front end.

Did you find this page helpful?