next.js에서 next-auth를 사용한 oauth 구현하기 - next.js 14 app router

아래 버전에서 구현한 방법입니다.

 

"next": "14.0.4",
"next-auth": "^4.24.5"

"typescript": "^5.3.2"

 

Next.js 14에서 App Router를 사용하여 NextAuth로 OAuth 인증을 구현하는 과정은 몇 가지 핵심 단계를 포함합니다. 이 포스팅에서는 간단하게 이러한 단계들을 설명하겠습니다.

1. NextAuth 설치 및 설정

먼저, NextAuth를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행하세요:

npm install next-auth
# or
yarn add next-auth

2. NextAuth 설정 파일 생성

nextauth 설정 파일을 app/api/auth/[...nextauth]/route.ts 디렉토리 내에 생성합니다. 이 파일에서는 OAuth 제공자, 세션 설정, 데이터베이스 연결 등을 구성할 수 있습니다.

 

예를 들어, Google OAuth 인증을 설정하는 경우:

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export const authOptions:AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // 필요한 추가 설정...
}

const handler = NextAuth(authOptions);
export default handler;
export { handler as GET, handler as POST, handler as PUT };

3. 환경 변수 설정

.env.local 파일에 OAuth 제공자의 clientId와 clientSecret을 포함시킵니다.

next-auth 에서 사용하는 난수 AUTH_SECRET를 추가 합니다. 

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
AUTH_SECRET=

 

리눅스 환경에서 openssl rand -hex 32 명령어로 생성할 수 있습니다.

참고 : https://generate-secret.vercel.app/32

openssl rand -hex 32

 

4. 사용자 인터페이스 구현

로그인 페이지 또는 컴포넌트에서 signIn 함수를 사용하여 사용자가 Google 계정으로 로그인할 수 있도록 합니다.

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

export default function SignInButton() {
  return (
    <button onClick={() => signIn('google')}>Sign in with Google</button>
  )
}

 

이 과정을 통해 Next.js 애플리케이션에 OAuth 인증 기능을 쉽게 추가할 수 있으며, 사용자 인증과 관련된 보안 및 관리 작업을 효율적으로 처리할 수 있습니다. NextAuth는 다양한 OAuth 제공자와의 통합을 지원하여 개발자가 손쉽게 인증 시스템을 구축할 수 있도록 돕습니다.

 

사용 예시

1. useSession

import { useSession } from "next-auth/react";
const { data } = useSession();

 

로그인 한 사용자의 경우 유저 session 정보를 return 하는 hook 입니다.

 

2. getToken

import { getToken } from "next-auth/jwt";

const token = await getToken({
 req: request,
 secret: process.env.NEXTAUTH_SECRET,
});

 

request의 token를 가져옵니다.

 

마지막으로

 

신규 프로젝트에 next-auth를 이용헤서 사내 OAuth를 연동해보았습니다. 정해진 컨벤션을 따르면 token발급부터 session 관리까지 자동으로 한번에 해결할 수 있는 장점이 있습니다.

 

다만 아직 next.js의 server component를 완벽하게 지원하지 않는 점과 session을 커스텀 하는 경우 원하는 대로 동작하지 않는 경우가 있었습니다.