BA
Better Auth•3w ago
JWW

SignOut function doesn't immediately re-invoke session change

Hi, everyone I am currently implement auth in my project I followed the quick start from docs and it went smoothly But when I implement sign out and click it, it doesn't immediately show logged out display instead I have to reload the page to see the change? Here's my auth.ts file: 
import { headers } from "next/headers";
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import { user, account, session, verification } from "@/db/schema/user";
import { env } from "@/env";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: {
      user: user,
      account: account,
      session: session,
      verification: verification,
    },
  }),
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
});

export const currentUser = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  return session?.user;
};
import { headers } from "next/headers";
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import { user, account, session, verification } from "@/db/schema/user";
import { env } from "@/env";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: {
      user: user,
      account: account,
      session: session,
      verification: verification,
    },
  }),
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
});

export const currentUser = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  return session?.user;
};
Thx for anyone's help!!!
Solution:
```ts export default async function MainLayout({ children, }: Readonly<{...
Jump to solution
8 Replies
bekacru
bekacru•3w ago
it only refresh automatically when it's a state change. Use router.refresh after sign out or redirect
JWW
JWWOP•3w ago
I used the router.refresh or redirect, but it still didn't reflect immediate change in my user-dropdown.tsx Here's some reference files: user-dropdown.tsx 
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { currentUser } from "@/lib/auth";

import {
  BoltIcon,
  BookOpenIcon,
  ChevronDownIcon,
  Layers2Icon,
  LogOutIcon,
  PinIcon,
  UserPenIcon,
  UserRound,
} from "lucide-react";
import Link from "next/link";

export const UserDropdown = async () => {
  const user = await currentUser();


  if (!user)
    return (...);

  return (...);
};
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { currentUser } from "@/lib/auth";

import {
  BoltIcon,
  BookOpenIcon,
  ChevronDownIcon,
  Layers2Icon,
  LogOutIcon,
  PinIcon,
  UserPenIcon,
  UserRound,
} from "lucide-react";
import Link from "next/link";

export const UserDropdown = async () => {
  const user = await currentUser();


  if (!user)
    return (...);

  return (...);
};
auth.ts 
import { headers } from "next/headers";
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import { env } from "@/env";
import { user, account, session, verification } from "@/db/schema/user";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: {
      user: user,
      account: account,
      session: session,
      verification: verification,
    },
  }),
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
});

export const currentUser = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  return session?.user;
};
import { headers } from "next/headers";
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import { env } from "@/env";
import { user, account, session, verification } from "@/db/schema/user";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: {
      user: user,
      account: account,
      session: session,
      verification: verification,
    },
  }),
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
});

export const currentUser = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  return session?.user;
};
rhitune
rhitune•3w ago
window.location.reload() should be work Im getting same issue btw if i find a better way i will write it
bekacru
bekacru•3w ago
It could be cause your dropdown is server rendered and on refresh or redirect it's not getting re-rendered
rhitune
rhitune•3w ago
because you using server rendered layout and client side header component
Solution
rhitune
rhitune•3w ago
export default async function MainLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {

    const session = await auth.api.getSession({ headers: await headers()})

    return (
        <>
            <Header session={session} />
            <main className="container mx-auto">
                    {children}
                <Footer />
            </main>
        </>
    );
}
export default async function MainLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {

    const session = await auth.api.getSession({ headers: await headers()})

    return (
        <>
            <Header session={session} />
            <main className="container mx-auto">
                    {children}
                <Footer />
            </main>
        </>
    );
}
This is my code
rhitune
rhitune•3w ago
layout not rerendering thats why ill switch to client side session @JWW
JWW
JWWOP•3w ago
Appreciate your help, but this approach will show as non-logged in initial for a while then turn into real logged in state This approach can fit into my project, thx for your help

Did you find this page helpful?