[Auth.js] 로그인 직후 useSession undefined 현상 해결

 

 

문제점

SessionProvider로 감싸고 useSession을 사용할 시 최초 로그인 상에서는 동작으며 Hard Reload 시 동작하는 현상이 있었다.

 

해결전

해결 방법 적용 전

해결후

해결 방법 적용 후

 

버전정보

 "next": "14.2.4",
 "next-auth": "^5.0.0-beta.19",

 

해결방법

useSession대신 아래의 hook을 사용하여 호출한다.매우 감사하게도 유저분(bocarw121)께서 만들어 주셨다.

아래 Github Issue 참고 - 많은 사람들이 고통받고 있다. 규모가 커짐에 따른 유지보수가 불안정한 느낌이다.

 

use-current-session.ts

// This hook doesn't rely on the session provider
export const useCurrentSession = () => {
  const [session, setSession] = useState<Session | null>(null);
  // Changed the default status to loading
  const [status, setStatus] = useState<string>("loading");
  const pathName = usePathname();

  const retrieveSession = useCallback(async () => {
    try {
      const sessionData = await getSession();
      if (sessionData) {
        setSession(sessionData);
        setStatus("authenticated");
        return;
      }

      setStatus("unauthenticated");
    } catch (error) {
      setStatus("unauthenticated");
      setSession(null);
    }
  }, []);

  useEffect(() => {
    // We only want to retrieve the session when there is no session
    if (!session) {
      retrieveSession();
    }

    // use the pathname to force a re-render when the user navigates to a new page
  }, [retrieveSession, session, pathName]);

  return { session, status };
};

 

user-info.tsx

"use client";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { FaUser } from "react-icons/fa";
import { useCurrentUser } from "@/hooks/use-current-user";
import { RiFullscreenExitFill } from "react-icons/ri";
import { logout } from "@/actions/logout";
import { useCurrentSession } from "@/hooks/use-current-session";

export const UserButton = () => {
  const { session, status } = useCurrentSession();
  // const session = useCurrentUser();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Avatar className={"bg-white ring-4 ring-green-400"}>
          <AvatarImage src={session?.image || ""} />
          <FaUser />
          <AvatarFallback>{session?.username?.slice(0, 2)}</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent className={"w-48"}>
        <DropdownMenuItem onClick={() => logout}>
          <RiFullscreenExitFill />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

참고문서

https://github.com/bocarw121

bocarw121 - Overview

 

https://github.com/nextauthjs/next-auth/issues/9504

useSession only getting the session after manually reloading the page · Issue #9504 · nextauthjs/next-auth

 

Authjs 학습에 강추!

https://www.youtube.com/watch?v=1MTyCvS05V4&t=28099s