Refreshing of Avatar/Sign In button after Signout

[cmchenry]

After upgrading to NextAuth 5 and updating all the code, I noticed after signing out the Avatar doesn't refresh and you don't see the Sign in button unless you refresh the page manually?

[liaowow]

I ran into the same issue and brought back the signOut function from "next-auth/react" following this discussion, which resolved it for me. Curious if there’s a more optimal approach, though.

[cmchenry]

Did you make the whole layout.tsx a client component to get that working?

[liaowow]

No, I removed "use server"; from the onSignOut function call.

[cmchenry]

Thanks for that info @liaowow! For anyone else looking at this, this is the currently documented way to signOut in a NextJS(Client) component:
https://authjs.dev/getting-started/session-management/login

I'm thinking the problem is that the signOut from layout.tsx executes in a Promise that is not awaited and so the updated session is not available when its rendered and thus the has a stale session being passed down to . Will post a solution if I can figure it out.

Here's my code (need to remove passing the signOut in from layout.tsx.

"use client";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { useSession, signOut } from "next-auth/react";

function getFirstTwoCapitalLetters(str?: string | null) {
  const match = (str || "").match(/[A-Z]/g);
  return match ? match.slice(0, 2).join("") : "GT";
}

export default function UserButton({
  onSignIn,
}: {
  onSignIn: () => Promise<void>;
}) {
  const { data: session, status } = useSession();

  return (
    <div>
      {status === "authenticated" && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Avatar>
              <AvatarImage src={session?.user?.image!} />
              <AvatarFallback>
                {getFirstTwoCapitalLetters(session?.user?.name)}
              </AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem
              onClick={() => {
                signOut();
              }}
            >
              Sign Out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )}
      {status === "unauthenticated" && (
        <Button onClick={() => onSignIn()}>Sign in</Button>
      )}
    </div>
  );
}