Next.js에서 useSession 훅을 이용한 사용자 인증 관리

Next.js에서 사용자 인증을 처리하는 방법 중 하나는 패키지인 next-auth를 사용하는 것입니다. next-auth는 다양한 인증 프로바이더와 연동이 가능하며, 세션 관리 기능을 제공합니다. 이 글에서는 next-auth의 useSession 훅에 대해 자세히 알아보겠습니다.

😎 useSession 훅 소개

useSession 훅은 현재 사용자 세션의 정보를 가져올 수 있도록 도와줍니다. 컴포넌트에서 쉽게 세션 데이터에 접근할 수 있으며, 로그인 여부나 특정 사용자 권한에 따른 조건부 렌더링 등에 활용할 수 있습니다.

사용법

먼저, NextAuthProvider로 앱을 감싸서 세션 정보를 전역에서 사용할 수 있도록 설정해야 합니다.

// _app.js or _app.tsx
import { Provider as NextAuthProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }) {
  return (
    <NextAuthProvider session={pageProps.session}>
      <Component {...pageProps} />
    </NextAuthProvider>
  );
}
export default MyApp;

그 다음, 원하는 컴포넌트에서 useSession 훅을 사용할 수 있습니다.

import { useSession } from 'next-auth/react';

function MyComponent() {
  const { data: session } = useSession();

  if (session) {
    return <div>로그인 되었습니다: {session.user.email}</div>;
  } else {
    return <div>로그인 되지 않았습니다.</div>;
  }
}

사용 사례

• 조건부 렌더링: 로그인 여부에 따라 특정 컴포넌트를 보여주거나 숨기는 등의 조건부 렌더링이 가능합니다.
• 페이지 리다이렉트: 로그인이 필요한 페이지에 비로그인 사용자가 접근할 때 리다이렉트 처리가 가능합니다.
• 사용자 데이터 사용: session 객체를 통해 사용자 이메일, 이름 등의 정보에 접근하여 사용자에게 맞춤화된 콘텐츠를 제공할 수 있습니다.

결론

next-auth의 useSession 훅은 Next.js에서 인증 처리를 편리하게 할 수 있도록 도와주는 강력한 도구입니다. 앱 전반에 걸쳐 사용자 세션 데이터에 쉽게 접근할 수 있어, 사용자 경험을 높이는데 기여할 수 있습니다.