[Next] NextAuth.js 사용 방법

NextAuth 라이브러리

• NextAuth.js는 Next.js 프로젝트의 사용자 인증 및 세션 관리를 위한 라이브러리
• 특히 Google, GitHub, 카카오 등의 다양한 인증 공급자를 지원하고, Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있도록 도와주는 라이브러리
• 홈페이지 링크 : https://next-auth.js.org/

NextAuth 설치

npm install next-auth 
OR
yarn add next-auth

NextAuth 기본 설정

project의 pages/api/auth 경로에 /[...nextauth].js 파일 생성

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = { 
    providers: [ 
        GithubProvider({ 
            clientId: process.env.GITHUB_ID, 
            clientSecret: process.env.GITHUB_SECRET, 
        }),
    ]
}
export default NextAuth(authOptions)

session을 이용한 데이터 공유(클라이언트 컴포넌트 )

pages/_app.jsx 에서

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

export default function App({ 
    Component, 
    pageProps: { session, ...pageProps },}) 
{ 
    return ( 
        <SessionProvider session={session}> 
            <Component {...pageProps} /> 
        </SessionProvider> 
    )
}

사용할 컴포넌트에서 components/login-btn.jsx

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

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

getServerSession() 이용한 데이터 공유(서버 컴포넌트)

pages/api/login.js

import { getServerSession } from "next-auth/next"
import { authOptions } from "./auth/[...nextauth]"

export default async (req, res) => {
  const session = await getServerSession(req, res, authOptions)

  if (session) {
    res.send({
      content:
        "This is protected content. You can access this content because you are signed in.",
    })
  } else {
    res.send({
      error: "You must be signed in to view the protected content on this page.",
    })
  }
}

pages/api/auth/[...nextauth].js 페이지에서 옵션을 추가

...
callbacks: {
  async jwt({ token, account }) {
    // Persist the OAuth access_token to the token right after signin
    if (account) {
      token.accessToken = account.access_token
    }
    return token
  },
  async session({ session, token, user }) {
    // Send properties to the client, like an access_token from a provider.
    session.accessToken = token.accessToken
    return session
  }
}
...

사용하려고 하는 컴포넌트에서 components/accessToken.jsx 이용

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

export default function Component() {
  const { data } = useSession()
  const { accessToken } = data

  return <div>Access Token: {accessToken}</div>
}

미들웨어

/middleware.js

export async function middleware(req: NextRequest) {
  const session = await getToken({req, secret: process.env.JWT_SECRET});
  const pathname = req.nextUrl.pathname;

  // 로그인된 유저만 접근 가능
  if (req.nextUrl.pathname.startsWith("/user") && !session) {
    return NextResponse.redirect(new URL("/auth/login", req.url));
  }

  // 어드민 유저만 접근 가능
  if (pathname.startsWith("/admin") && (session?.role !== 'admin')) {
    return NextResponse.redirect(new URL("/", req.url));
  }

  // 로그인된 유저는 로그인, 회원가입 페이지에 접근 X
  if (pathname.startsWith("/auth") && session) {
    return NextResponse.redirect(new URL("/", req.url));
  }
  return NextResponse.next();
}

미들웨어를 통해 특정 경로로 이동하기 전에 서버 측에서 실행되는 코드를 제공해, 경로별 인증 여부 확인이 가능합니다.
(별도의 경로 매칭 함수를 작성해 사용하면, 경로별 인증 관리가 가능)