next-auth useSession getServerSession 동작 안할 때, 해결 방법

next-auth에서 클라이언트 컴포넌트에서는 useSession

서버 컴포넌트에서는 getServerSession을 이용해서 현재 로그인된 유저 정보를 알 수가 있습니다.

 

오류 1: Unhandled Runtime ErrorError: React Context is unavailable in Server Components

하지만 아래와 같이 페이지 내에서 async, await을 사용하려고 하니 아래와 같은 오류가 발생하였습니다.

const Page = async () => {
    const session = useSession();

    if (!session?.user) {
        redirect("/board");
    }

    const user = await prisma.user.findUnique({
        where: {
            email: session?.user?.email ?? ""
        }
    });
 }

Unhandled Runtime ErrorError: React Context is unavailable in Server Components

 

아하 async/await을 사용하려면 서버 컴포넌트로 변경해야겠구나 해서 서버 컴포넌트로 변경해서 사용하였습니다.

import {getServerSession} from "next-auth";
import {authOptions} from "@/app/api/auth/[...nextauth]/route";

const Page = async () => {
    const session = await getServerSession(authOptions);

    if (!session?.user) {
        redirect("/board");
    }

    const user = await prisma.user.findUnique({
        where: {
            email: session?.user?.email ?? ""
        }
    });

    return (
        <WriteForm authorId={user?.id}/>
    );
};

이제 두번째 오류가 발생하였습니다.

getServerSession의 값이 계속 null이 나오는 것이었습니다.

 

getServerSession() 값이 null일 때 해결 방법

authOptions에서 secret 속성을 넣어야 정상적으로 유저 정보를 가지고 올 수 있습니다.

next-auth authOptions에 secret 코드 넣는 방법

1. 터미널에서 아래 명령어를 입력합니다.

openssl rand -base64 32

2. 출력된 값을 env 값에 추가합니다.

.env

NEXTAUTH_SECRET="dptRjWTk/9jEDl5AH/RFwMGeGluQvojPO67e2NNEC8I="

3. authOptions에 secret 속성을 추가합니다.

import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";

export const authOptions = {
    secret: process.env.SECRET,
    providers: [
        KakaoProvider({
            clientId: process.env.KAKAO_CLIENT_ID ?? "",
            clientSecret: process.env.KAKAO_CLIENT_SECRET ?? "",
        }),
    ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

 

secret 속성 추가를 하면 getServerSession 호출시 정상적으로 유저 정보를 가지고 올 수 있습니다.