🔐next-auth 인증(authentication) 라이브러리 - useSession() (2)

웰치스·2025년 1월 9일

Next.js

목록 보기

3/3

📄 `next-auth`의`useSession()` 훅:

현재 로그인된 사용자의 세션 정보를 가져오는 데 사용됨
클라이언트 컴포넌트에서만 사용 가능하며, 세션 정보를 쉽게 접근하고 사용할 수 있음
useSession() 훅을 사용할 때 SessionProvider 를 제대로 설정해야함 ⏩ 일반적으로 app/layout.tsx 파일에서 SessionProvider 를 설정하여 모든 페이지와 컴포넌트를 감싸는 것이 일반적
[...nextauth]/route.ts에서 인증 정의해준 후 seSession()설정

app/components/UserGreeting.tsx

'use client';

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


export default function UserGreeting() {
    // 세션 가져오기
    const { data : session, status} = useSession();

    const router = useRouter();
    const goToPage = (str: string) => {
        switch (str) {
            case 'signup': router.push('/signup'); break;
        }
    };


    // 세션 표시
    if (status === 'loading') {
        return <span>Loading..</span>
    }

    if (session) {
        return (
            <div>
                <span>{session.user?.name} 으로 로그인</span>
                <button className="btn btn-outline" 
          				onClick={() => signOut({ callbackUrl: '/'})}>
          			로그아웃
  				</button>
            </div>
        );
    }

    return (
        <div>
            <button className="btn btn-outline" 
      				onClick={() => signIn()}>로그인</button>
            <button className="btn btn-outline" 
					onClick={() => goToPage('signup')}>회원가입</button>
        </div>
    );
}

세션 상태 값:

useSession() 훅은 두 가지 주요 값을 반환
- session: 현재 세션 정보 (null일 수 있음).
- status: 세션 상태로 'loading', 'authenticated', 'unauthenticated' 중 하나.
세션 상태에 따른 UI 처리:
- status가 'loading'이면 로딩 중임을 표시.
- session이 있으면 사용자 정보와 로그아웃 버튼을 표시.
- session이 없으면 로그인 버튼을 표시.

추가 정보

signIn 및 signOut 함수:
- next-auth 함수에서 제공되는 함수
- signIn(): 로그인 페이지로 리다이렉트하거나 팝업을 통해 로그인. [...nextauth]/route.ts 의 pages 옵션에서 signIn로 정의한 페이지로 이동
- signOut(): 사용자를 로그아웃한 후 signIn 페이지로 리다이렉트. 다른 페이지로 리다이렉트 하려면 callbackUrl 로 지정하여 할 수 있음

Custom Hooks:

필요한 경우 useSession()을 활용하여 커스텀 훅을 만들어 특정 로직을 분리할 수 있습니다.

적용

💭 나는 최상위 레이아웃인 `app/layout.tsx` 에서 `SessionProvider`로 모든 자식 컴포넌트를 감쌌다. 
`app/layout.tsx` 에 바로 `SessionProvider` 감쌌더니 `app/layout.tsx` 에 
정의해둔 `metadata` 때문에 오류가 발생했다. 
`metadata` 는 서버 컴포넌트에서만 사용 해야 하고 `SessionProvider`는 클라이언트 컴포넌트에서만
사용해야 한다. `layout.tsx` 파일에서 `metadata`와 클라이언트 컴포넌트를 분리했다.

app/layout.tsx

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./styles/globals.css";
import RootLayoutClient from "./RootLayoutClient";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Chicken Map",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          <RootLayoutClient>
            {children}
          </RootLayoutClient>
        </body>
    </html>
  );
}

app/RootLayoutClient.tsx

'use client';

import { SessionProvider } from "next-auth/react";

export default function RootLayoutClient({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    );
}