Next.js Auth

01_Next-auth 란?

• 여러 인증 공급자 (구글,페이스북,깃헙) 등과 프로바이더 제공 . 설정만 해주면 국내 사용자인증도 사용 가능

• 세션 기반 및 JWT (Json Web Tokens) 기반의 인증을 지원

• 사용자 데이터베이스 통합 및 사용자 정의 프로필 필드 관리

• 보안적으로 안전한 사용자 인증을 위한 설정 및 옵션

//pages/api/auth/[...nextauth].js (server)
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

const NextAuth = () => {
 providers:[
	GoogleProvider({
		clientId:process.env.GOOGLE_ID,
		clientSecret:process.env.GOOGLE_SECRET
	}),
	//passwordless & email sign in
	EmailProvider({
		server : process.env.MAIL_SERVER,
		from: 'NextAuth.js <no-reply@example@com>'
	})
 ]
}

//pages/index.js (client)
import {useSession, signIn, signOut} from 'next-auth/react'
const 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>		
	</>
}

• 간단한 설정 : 직접 구현하는것에 비해 인증 설정이 매우 간단하다.

• 다양한 인증 공급자 : 구글,페이스북,애플,네이버,카카오 등 수십개의 인증 공급자 통합 가능

• 안전한 보안 : 보안관련 작업 (세션관리, JWT 생성, CSRF 방어 등) 자동처리

• 확장성 :사용자 데이터베이스(prisma 같은)와의 통합을 지원

• Next.js 와의 통합 : SSR, CSR 에서 원활하게 작동

• 주로 세션과 JWT 함께 사용하여 인증 작업 진행
• 세션은 서버측에서 사용자정보를 안전하게 저장하고 관리하는데 사용
• JWT 는 클라측에서 사용자인증을 관리하는데 사용

• 다양한 콜백함수를 사용하여 사용자 인증 및 세션 관리 조정 가능
• signIn(), signOut(), redirect() , session(로그인상태추적) , jwt(생성 및 검증)

02_Next-auth 세팅

프리즈마와 함께 사용하는 Nextauth

openssl rand -base64 24

Getting Started | NextAuth.js

The example code below describes how to add authentication to a Next.js app.

https://next-auth.js.org/getting-started/example

Auth.js

Authentication for the Web.

https://authjs.dev/reference/adapter/prisma

Next.js | NextAuth.js

getServerSession

https://next-auth.js.org/configuration/nextjs#prerequisites

03_구글로그인 테스트

Google | NextAuth.js

Documentation

https://next-auth.js.org/providers/google#configuration