전체 글 17

[Next.js] NextAuth + sendmail 을 이용한 메일 인증 기반 회원가입 기능 구현 --- (2) NextAuth 설정

NextAuth.js는 Next.js 애플리케이션들을 위한 오픈소스 인증 솔루션이다.Google, Kakao 등 많은 서드파티 서비스들을 쉽게 연계할 수 있게 해주고, Prisma 등 각종 ORM에 대한 지원도 잘해주는 툴이다.나는 서드파티 fetch 없이 순수 이메일 가입 + Prisma + MySQL 형식으로 구현했다.1. NextAuth 설치아래 명령어를 사용해 NextAuth 및 Prisma 관련 패키지를 설치한다.npm install next-auth @prisma/client @auth/prisma-adapternpm install prisma --save-dev  2. app/api/auth/[...nextauth]/route.js 작성그 다음엔 api/api/auth/[...nextauth..

[Next.js] NextAuth + sendmail 을 이용한 메일 인증 기반 회원가입 기능 구현 --- (1) Introduction

위 플로우 차트와 같은 회원가입 절차를 Next.js에서 구현하고자 했다.관건은 3가지이다.Next.js에서 인증 기능 구현을 어떻게 할 것인가메일 인증은 어떻게 받을 것인가개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가 각각에 대해 아래와 같은 해결법을 찾았다.1. Next.js에서 인증 기능 구현을 어떻게 할 것인가-> NextAuth라는 Next.js용 인증 라이브러리 사용2. 메일 인증은 어떻게 받을 것인가-> Sendmail 이라는 리눅스 프로그램을 사용하여 SMTP 서버 구축3. 개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가-> 메일 인증을 받지 않은 사람은 개인 정보 입력 페이지로 넘어갈 수 없게 하고자 한다.데이터..

[NextAuth] 유저 id 불러오기

문제 상황사진같은 스키마 때문에 User.id를 참조할 일이 생겼다.근데 서버측에서 아무리 session을 불러와도 name, email, image만 불러와지고 id가 작성이 안 됐다.해결법getServerSession 대신 getToken으로 id 불러오기import { NextResponse } from 'next/server';import { PrismaClient } from '@prisma/client';import { getServerSession } from 'next-auth';import { authOptions } from '../../auth/[...nextauth]/route';import { getToken } from 'next-auth/jwt';const prisma = ne..