로그인 구현 (Next-auth, prisma)

setting

next-auth 설치

yarn add next-auth

환경변수 추가

.env 파일에 NEXTAUTH-URL
예를 들어 로컬호스트면 NEXTAUTH_URL=http://localhost:3000

그리고 NEXTAUTH_SECRET도 설정해 주어야 하는데
터미널에 openssl rand -base64 24
위 명령어를 통해서 랜덤하게 가져올 수 있다.

미들웨어 설정할 때도 필수적임 이거는

API Route 추가

Pages/api/auth 경로에 [...nextauth].js 파일 생성
파일 내부에 원하는 인증 공급자 및 옵션 설정

[...nextauth].js

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

export const authOptions = {
	providers: [
    	GithubProvider({
        	cliendId:
          	clientSecret:
        }),
    ]
}

export default NextAuth(authOptions)

_app.js

전체 앱을 SessionProvider 컴포넌트로 감싸줌

useSession() 혹은 인증 훅 사용

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

const { data: session } = useSession()

if (session) {
	return <>
    	<button onClick={() => signOut()} />  
    </>
}

---

프리즈마를 사용하는 경우 아래의 세팅을 추가로 해 준다.

prisma adapter 세팅

로그인 / 회원가입 한 사용자의 토큰이나 계정 정보를 저장하기 위함

yarn add @auth/prisma-adapter

nextauth.js 파일에 코드 추가

// 추가
const prisma = new PrismaClient()

export const authOptions = {
  	// 추가
  	adapter: PrismaAdapter(prisma),
	providers: [
    	GithubProvider({
        	cliendId:
          	clientSecret:
        }),
    ]
}

스키마 정의 및 마이그레이션

prisma.schema 파일에 스키마 새롭게 정의 및 마이그레이션
마이그레이션 명령어 : npx prisma migrate dev

---

미들웨어 세팅

만약 어떤 페이지를 접근할 때 무조건 로그인을 해야한다면,
미들웨어를 통해서 보안을 걸 수 있다.

.env 파일에 NEXTAUTH_SECRET 생성 후에
페이지의 경로를 정의해 준다.

파일 생성

파일의 위치는 src/middleware.ts

export { default } from 'next-auth/middleware'

export const config = {
	matcher: ['/users/mypage']
}

---