Auth.js, Prisma 그리고 Twitter OAuth의 인증

이번 글에서는 Next.js에서 Auth.jsx, Prisma 를 이용해서 Twitter OAuth 를 구현하는 방법을 정리한다. 독자가 이 글을 읽는 시점과 버전에 따라 차이가 있을 수 있으니 공식 문서를 꼭 참고하길 바란다. 버전은 다음과 같다.

{
  "@prisma/client": "^5.13.0",
  "prisma": "^5.13.0",
  "next": "14.2.3",
  "next-auth": "^5.0.0-beta.17",
}

TL;DR

스키마 User 모델 email 필드 Optional로 만들기
Twitter OAuth 키 설정할 때 Email 요구해봤자 안 줌
import { PrismaClient } from "@prisma/client/edge"
NextAuth({ ..., session: { jwt: true } })

기본적인 설정

기본적으로 Next.js 프로젝트를 생성하고, Prisma와 Auth.js를 설치한다.

yarn create next-app
yarn add @prisma/client next-auth@beta
yarn add -D prisma

Prisma Schema 작성

먼저 Auth.js의 공식 문서에 따라 Prisma Schema를 작성한다. 다만 여기서 수정할 점이 있는데 User 모델에 email 필드를 Optional로 되어있는지 확인해야 한다. Twitter OAuth2 는 이메일을 제공하지 않기 때문이다.

prisma/schema.prisma

model User {
    ...
    email   String?   @unique // 이메일 필드가 Optional인지 확인
    ...
}

Prisma Client 생성

다음으로 Prisma Client를 생성한다.

yarn prisma generate

Auth.js 설정

다음으로 Auth.js 설정을 한다. 공식 문서를 참고하여 설정한다.

Twitter OAuth 키 발급

Twitter Developer Dashboard에서 프로젝트와 앱을 생성한다. 그리고 [User authentication settings] 에서 required 로 된 값들만 적당히 채워넣는다. 이 때 Request email from users 라는 플래그가 있는데 이걸 체크해도 이메일을 제공하지 않는다. 정확히는 Auth.js 는 Twitter OAuth2 를 사용하는데 해당 플래그는 OAuth1 관련이기 때문이다. 직접 Twitter Provider를 커스텀 해서 사용하면 가능할 수도 있지만 그게 더 힘들다. (단순 로직 뿐만이 아니라 DB 도 변경해야 하고 할 게 은근 많다.) 아무튼 해당 설정을 완료하면 ID 와 Secret 키를 발급받을 수 있다. 해당 키를 .env.local 파일에 저장한다.

.env.local

AUTH_TWITTER_ID=""
AUTH_TWITTER_SECRET=""

Twitter Provider 설정

auth.ts 에서 Twitter Provider를 설정한다. 공식 문서를 참고하자.

Prisma Adapter 설정

auth.ts 에서 Prisma Adapter를 설정한다. 공식 문서를 참고하자. 이 때 PrismaClient 를 "@prisma/client/edge" 에서 가져와야한다.

auth.ts

import { PrismaClient } from "@prisma/client/edge";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
 
const prisma = new PrismaClient();
 
export default NextAuth({
  adapter: PrismaAdapter(prisma),
  ...
});

JWT 설정

마지막으로 세션 strategy를 JWT 로 설정한다.