NextAuth.js 및 Prisma를 사용하여 Next.js 13 프로젝트에서 비밀번호 없는 로그인 구현

이 기사에서는 NextAuth.js 라이브러리를 사용하여 Next.js 프로젝트에서 비밀번호 없는 인증을 구현하는 데 필요한 단계를 자세히 살펴보겠습니다. 또한 이를 달성하기 위해 Prisma를 데이터베이스 어댑터로 활용할 예정입니다.

비밀번호 없는 인증은 기존 사용자 이름과 비밀번호 조합이 필요하지 않은 혁신적인 접근 방식입니다. 대신 이메일 매직 링크나 SMS를 통해 전송되는 일회성 코드와 같은 대체 방법을 활용하여 보다 안전하고 사용자 친화적인 인증 환경을 제공합니다.

Next.js는 단순성과 효율성으로 잘 알려진 웹 애플리케이션 구축을 위한 인기 있는 React 프레임워크입니다. Next.js용으로 명시적으로 설계된 인증 라이브러리인 NextAuth.js를 통합하여 비밀번호 없는 인증을 프로젝트에 쉽게 통합할 수 있습니다.

또한, 우리는 데이터베이스 어댑터로 Prisma를 사용할 것입니다. Prisma는 유형이 안전하고 자동 생성된 쿼리 빌더를 제공하여 데이터베이스 상호 작용을 단순화하는 ORM(객체 관계형 매핑) 도구입니다. PostgreSQL, MySQL, SQLite를 포함한 여러 데이터베이스를 지원하므로 인증 구현을 위한 다양한 선택이 가능합니다.

이 가이드 전체에서는 Next.js 프로젝트에서 NextAuth.js를 사용하여 비밀번호 없는 인증을 설정하고 구성하는 방법에 대한 단계별 지침을 제공합니다. 또한 Prisma를 데이터베이스 어댑터로 통합하여 애플리케이션과 데이터베이스 간의 원활한 통신을 가능하게 하는 방법도 시연할 것입니다.

이제 비밀번호 없는 인증과 NextAuth.js 및 Prisma의 기능을 사용하여 Next.js 애플리케이션의 보안 및 사용자 경험을 개선하는 방법을 살펴보겠습니다. 의 시작하자.

비밀번호 없는 로그인이란 무엇인가요?

이름에서 알 수 있듯이 비밀번호 없는 로그인은 기존 사용자 이름과 비밀번호 조합이 필요 없는 인증 방법입니다. 대신 이메일 매직 링크나 SMS를 통해 전송되는 일회성 코드와 같은 사용자 신원을 확인하는 대체 수단을 활용합니다. 이 접근 방식은 기존 로그인 방법에 비해 몇 가지 장점을 제공합니다. 첫째, 취약한 비밀번호나 비밀번호 재사용 등 비밀번호 관련 취약점의 위험을 제거합니다. 둘째, 복잡한 비밀번호를 기억하고 입력할 필요가 없어 사용자 경험이 단순화됩니다.

이메일 매직 링크나 일회용 코드를 사용하여 비밀번호 없는 로그인을 구현하려면 SMTP(Simple Mail Transfer Protocol) 서버가 필요합니다.

SMTP 서버는 인터넷을 통해 이메일을 보내는 역할을 담당합니다. 비밀번호 없는 인증의 경우 서버는 사용자가 등록한 이메일 주소로 매직 링크나 일회용 코드를 보냅니다. 사용자가 로그인 프로세스를 시작하면 고유 링크나 코드가 포함된 이메일이 생성되어 사용자에게 전송됩니다. 그런 다음 사용자는 링크를 클릭하거나 코드를 입력하여 인증 프로세스를 완료할 수 있습니다. SMTP 서버는 애플리케이션과 사용자 이메일 서비스 간의 중개자 역할을 하여 인증 메시지의 안전하고 안정적인 전달을 보장합니다. SMTP 서버를 활용함으로써 비밀번호 없는 로그인을 효과적으로 구현하고 사용자에게 원활한 인증 경험을 제공할 수 있습니다.

시작하자!

먼저, 새로운 Next.js 프로젝트를 생성해야 합니다. 이렇게 하려면 다음 명령을 사용하십시오.

npx create-next-app@latest

새로운 Next.js 프로젝트를 생성한 후에는 새로 생성된 프로젝트 디렉터리로 이동할 수 있습니다.

디렉터리를 프로젝트로 변경하면 Next.js 프로젝트 구조를 구성하는 다양한 폴더와 파일을 탐색할 수 있습니다.

Next.js 애플리케이션을 효과적으로 개발하고 구성하려면 프로젝트 구조를 이해하는 것이 필수적입니다. 공식 문서를 참조하면 모범 사례를 활용하고 코드 구조, 정적 자산 관리 및 재사용 가능한 구성 요소를 만듭니다.

종속성 설치

NextAuth.js를 사용하여 Next.js 프로젝트에서 비밀번호 없는 인증을 활성화하려면 먼저 필요한 종속성을 설치해야 합니다. yarn add next-auth nodemailer 명령을 실행하여 NextAuth.js 및 nodemailer를 프로젝트에 추가합니다.

우리는 특히 Node.js에서 이메일을 보내는 데 널리 사용되고 다재다능한 모듈인 nodemailer를 사용합니다. 이는 이메일을 통해 비밀번호 없는 인증에 필요한 매직 링크나 일회성 코드를 보내는 간단하고 안정적인 방법을 제공합니다.

다음으로 Prisma를 데이터베이스 어댑터로 통합해 보겠습니다. 다음 명령을 사용하여 필수 Prisma 패키지를 설치하여 시작하십시오.

yarn add @prisma/client @next-auth/prisma-adapter

이러한 패키지를 사용하면 Next.js 애플리케이션과 데이터베이스 간의 원활한 통신이 가능해집니다. 또한 다음을 실행하여 Prisma를 개발 종속성으로 설치해야 합니다.

yarn add prisma --dev

이 단계를 통해 Prisma 및 데이터베이스 상호 작용을 위해 자동 생성된 쿼리 빌더를 사용하는 데 필요한 도구를 확보할 수 있습니다.

이러한 종속성을 설치함으로써 Next.js 프로젝트에서 NextAuth.js 및 Prisma를 사용하여 비밀번호 없는 인증을 구현하기 위한 기반을 설정했습니다.

프리즈마 설정

Next.js 프로젝트에서 비밀번호 없는 인증을 사용하려면 이메일 전송을 위해 Prisma를 설정하고 SMTP 서버에 액세스할 수 있어야 합니다. 이 튜토리얼은 개인 Gmail 계정을 사용하여 이메일을 보내는 방법을 안내합니다. 성공적인 설정을 위해 아래 단계를 따르세요.

먼저 프로젝트 루트에 "prisma" 폴더를 만듭니다. 이 폴더에는 Prisma 관련 파일 및 구성이 저장됩니다. 그런 다음 "prisma" 폴더 내에 "schema.prisma"라는 새 파일을 생성합니다. 스키마 파일은 데이터베이스의 구조를 정의하고 Prisma의 자동 생성 코드에 대한 청사진 역할을 합니다.

스키마 개념이 처음이더라도 걱정하지 마세요! 스키마는 데이터베이스의 테이블, 필드, 관계 및 제약 조건을 지정합니다. 스키마를 생성하려면 NextAuth.js 공식 문서를 참조하고 거기에 제공된 예제 스키마를 복사하면 됩니다. 이 스키마는 시작점이며 애플리케이션 요구 사항에 맞게 사용자 정의할 수 있습니다.

다음으로, 프로젝트 루트에 ".env" 파일을 만듭니다. 이 파일은 SMTP 서버에 필요한 구성을 포함하여 환경 변수를 저장합니다. ".env" 파일을 채우려면 아래 제공된 예제 구성을 복사하면 됩니다. 해당 필드에 Gmail 계정 자격 증명과 SMTP 서버 설정을 입력했는지 확인하세요.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

다음 단계를 수행하면 Prisma를 설정하고 Gmail 계정을 사용하여 이메일을 보낼 수 있도록 SMTP 서버를 구성하게 됩니다. 이러한 준비는 Next.js 프로젝트에서 비밀번호 없는 인증 흐름을 활성화하는 데 중요합니다.

메모

Google 계정에 대해 2단계 인증(2FA)을 활성화한 경우 앱 비밀번호를 생성해야 합니다. 앱 비밀번호는 기본 Google 계정 비밀번호를 노출하지 않고 특정 앱이나 기기에 대한 액세스 권한을 부여하는 고유한 비밀번호입니다. 아래 지침에 따라 앱 비밀번호를 생성하세요.

1. https://myaccount.google.com/을 방문하여 Google 계정 설정 페이지로 이동합니다.

2. '보안' 탭으로 이동합니다.

3. "2FA" 섹션을 찾아 아래로 스크롤하여 "앱 비밀번호"를 선택하세요.

4. 보안 확인을 위해 Google 계정 비밀번호를 다시 입력하라는 메시지가 나타날 수 있습니다.

5. '앱 선택' 드롭다운에서 '메일' 또는 '기타(맞춤 이름)'을 선택하세요.

• "메일" 옵션이 있는 경우 해당 옵션을 선택하세요.

• '메일' 옵션을 사용할 수 없는 경우 '기타(맞춤 이름)'을 선택하고 식별을 위한 맞춤 이름을 입력하세요.

6. "생성" 또는 "비밀번호 생성" 버튼을 클릭하십시오.

7. Google에서 고유한 앱 비밀번호를 생성합니다. 이메일 전송을 위해 애플리케이션에서 이 비밀번호를 사용할 것이므로 이 비밀번호를 기록해 두십시오.

8. 생성된 앱 비밀번호를 Next.js 애플리케이션의 SMTP 서버 구성에 사용하세요. 일반 Gmail 계정 비밀번호를 이 앱 비밀번호로 바꾸세요.

이렇게 하면 2FA가 활성화된 경우에도 애플리케이션이 Gmail 계정을 사용하여 이메일을 안전하게 보낼 수 있습니다.

Supabase를 사용하는 PostgreSQL

계속 진행하기 전에 프로젝트의 데이터베이스가 올바르게 작동하는지 확인해야 합니다. 이 데모에서는 Supabase PostgreSQL 데이터베이스를 사용하는 것이 좋습니다. Supabase 프로젝트를 시작하고 PostgreSQL 연결 URL을 얻으려면 다음 단계를 따르세요.

1. supabase.io에 접속하여 계정에 로그인하거나 계정이 없는 경우 새 계정을 만드세요.

2. 로그인하면 Supabase 대시보드로 이동됩니다. 새 프로젝트를 시작하려면 "새 프로젝트 만들기"를 클릭하세요.

3. 프로젝트 이름을 지정하고 현재 위치에서 가장 가까운 지역을 선택하세요. 나중에 필요하므로 비밀번호를 기억해 두세요.

4. 프로젝트를 생성하면 프로젝트 대시보드로 이동됩니다. 데이터베이스 설정에 액세스하려면 왼쪽 사이드바에서 "데이터베이스"를 클릭하세요.

5. "데이터베이스" 섹션에서 PostgreSQL 연결 URL을 찾을 수 있습니다. 이 URL에는 호스트, 포트, 데이터베이스 이름, 사용자 이름, 비밀번호 등 Supabase 프로젝트의 데이터베이스에 연결하는 데 필요한 모든 정보가 포함되어 있습니다. postgres://<사용자 이름>:<비밀번호>@<호스트>:<포트>/<데이터베이스> 형식으로 표시됩니다.

6. PostgreSQL 연결 URL을 복사하고 안전하게 유지하세요. 애플리케이션과 Supabase 데이터베이스 간의 연결을 설정하는 데 필요합니다.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

이제 'npx prisma generate' 명령을 실행하여 Prisma 클라이언트를 생성해 보겠습니다.

Prisma 클라이언트는 스키마를 기반으로 자동 생성된 데이터베이스 클라이언트입니다. 기본적으로 Prisma 클라이언트는 `node_modules/.prisma/client` 폴더에 생성되지만 [필요한 경우 사용자 정의 위치를 ​​지정](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

다음으로 초기 마이그레이션 생성을 진행하겠습니다. 다음 명령을 실행하십시오: `npx prisma migration dev`. 각 마이그레이션에 설명이 포함된 이름을 지정할 수 있습니다.

Prisma에서 마이그레이션은 시간이 지남에 따라 데이터베이스 스키마 조정을 관리하는 데 사용되는 방법입니다. 기존 데이터를 잃지 않고 데이터베이스 구조를 수정할 수 있습니다. 이러한 마이그레이션은 데이터베이스 스키마가 변화하는 애플리케이션의 요구 사항에 맞춰지도록 보장하므로 매우 중요합니다. Prisma의 마이그레이션 도구를 사용하면 이러한 변경 사항을 편리하게 버전화하고, 적용하고, 되돌릴 수 있어 팀워크가 단순화되고 다양한 환경에서 균일한 데이터베이스 스키마를 유지할 수 있습니다.

이제 데이터베이스를 확인하면 데이터베이스 섹션에 반영된 초기 마이그레이션의 변경 사항을 볼 수 있습니다.

초기 마이그레이션을 수행하여 마이그레이션 스크립트에 정의된 대로 데이터베이스 스키마에 수정 사항을 적용했습니다.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Prisma 어댑터로 NextAuthJS 설정하기

Next.js 애플리케이션에서 NextAuthJS는 와일드카드 또는 폴백 경로라고도 알려진 범용 경로를 사용하여 인증 요청을 관리합니다. 이 동적 경로는 Next.js의 파일 기반 라우팅 시스템을 사용하여 정의됩니다.

"**app**" 디렉터리 내에 "**api**"라는 폴더를 만듭니다. "**api**" 폴더 내에 "**auth**" 폴더를 생성합니다. "**auth**" 폴더 안에 "**[...nextauth]**"라는 포괄 경로를 폴더로 만듭니다. 마지막으로 포괄 경로 폴더 내에 "**route.ts**" 파일을 만들고 다음 코드를 추가합니다.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

포괄 경로 파일에서 NextAuthJS 라이브러리를 가져오고 인증 옵션, 공급자 및 구성을 설정합니다. NextAuthJS는 들어오는 요청의 구문 분석을 처리하고 필요한 인증 작업을 식별하며 지정된 옵션에 따라 적절한 논리를 실행합니다.

제공된 코드는 이메일 공급자를 사용한 인증을 위해 Prisma 어댑터로 NextAuthJS를 설정합니다. 각 진술을 설명해 보겠습니다.

1. 수입품:

• PrismaAdapter 및 **PrismaClient**는 각각 @next-auth/prisma-adapter 및 **@prisma/client**에서 가져옵니다. 이는 NextAuthJS를 Prisma와 통합하는 데 사용됩니다.

• **NextAuth**는 **next-auth**에서 가져오며 Next.js 애플리케이션에서 인증을 처리하기 위한 기본 라이브러리입니다.

• **EmailProvider**는 **next-auth/providers/email**에서 가져오며 이메일 기반 인증을 위한 공급자로 사용됩니다.

2. 프리즈마 설정:

• **PrismaClient**의 인스턴스는 **new PrismaClient()**를 사용하여 생성됩니다. 이를 통해 Prisma ORM 및 기본 데이터베이스와의 통신이 가능해집니다.

3. 인증 옵션:

• **authOptions**는 NextAuthJS에서 인증을 위한 구성을 정의하는 객체입니다.

• adapter 속성은 **PrismaAdapter**를 사용하여 NextAuthJS와 Prisma를 연결하는 **PrismaAdapter(prisma)로 설정됩니다.

• providers 배열에는 단일 공급자 **EmailProvider**가 포함되어 있습니다. 필요한 이메일 서버 세부 정보와 from 이메일 주소로 구성됩니다.

4. NextAuth 핸들러:

• NextAuth 함수는 **authOptions**를 인수로 사용하여 호출되어 인증 핸들러를 생성합니다.

• 결과 핸들러는 handler 변수에 할당됩니다.

5. 수출:

• **handler**는 HTTP GET 및 POST 요청을 모두 지원하기 위해 GET 및 **POST**로 내보내집니다.

이제 서버를 실행하고 기능을 테스트해 보겠습니다. 먼저 yarn dev를 실행하여 개발 서버를 시작합니다. 다음으로, 브라우저를 열고 'localhost:3000'을 방문하여 애플리케이션이 작동하는 모습을 확인하세요.

인증 기능을 테스트하려면 localhost:3000/api/auth/signin을 방문하세요. 여기에서 NextAuthJS의 마법을 경험하게 될 것입니다. NextAuthJS에 포함된 제공된 템플릿을 사용하면 비밀번호 없는 로그인 프로세스가 가능합니다. 사용해 보려면 유효한 이메일 주소를 입력하세요.

이메일을 제출하면 NextAuthJS가 비하인드 스토리 프로세스를 처리합니다. 먼저, 제공된 이메일 주소로 고유한 로그인 링크가 포함된 이메일을 생성하여 보냅니다. 이 링크는 사용자를 위한 보안 인증 토큰 역할을 합니다. 그런 다음 사용자가 링크를 클릭하면 NextAuthJS가 토큰의 유효성을 검사하고 사용자를 인증합니다.

이 비밀번호 없는 로그인 기능은 비밀번호가 필요하지 않아 보안과 사용자 경험을 향상시킵니다. 사용자는 이메일을 통해 받은 링크를 클릭하기만 하면 빠르고 안전하게 계정에 액세스할 수 있습니다. 이는 로그인 프로세스를 간소화하고 비밀번호 관련 취약점의 위험을 줄입니다.

사용자가 NextAuthJS에서 생성된 로그인 이메일을 클릭하고 인증을 받으면 원활한 로그인 경험을 촉진하기 위해 뒤에서 여러 작업이 수행됩니다.

1. 이메일 링크 유효성 검사: 사용자가 로그인 링크를 클릭하면 NextAuthJS는 링크에 포함된 인증 토큰의 유효성을 검사합니다. 이 토큰은 인증 프로세스의 보안과 무결성을 보장합니다.

2. 인증 프로세스: 토큰 검증에 성공하면 NextAuthJS가 사용자를 식별하고 인증 프로세스를 완료합니다. 제공된 토큰과 다단계 인증 등 구성된 추가 인증 요소를 기반으로 사용자의 신원을 확인합니다.

3. 세션 생성: 인증에 성공하면 NextAuthJS가 사용자를 위한 세션을 생성합니다. 세션은 사용자의 인증 상태를 나타내며 후속 요청에 대해 재인증할 필요 없이 보호된 리소스에 액세스할 수 있도록 하는 지속적인 상태입니다.

4. 쿠키: NextAuthJS는 세션을 관리하기 위해 사용자 브라우저에 보안 HTTP 전용 쿠키를 설정합니다. 이러한 쿠키는 여러 요청에 걸쳐 사용자의 인증 상태를 유지하는 데 중요한 역할을 합니다. 쿠키에는 일반적으로 인증 구성에 따라 세션 쿠키와 선택적으로 새로 고침 토큰 쿠키가 포함됩니다.

1. 세션 쿠키: 세션 쿠키에는 사용자 세션을 고유하게 식별하는 세션 식별자(예: 무작위로 생성된 문자열)가 포함되어 있습니다. 이는 NextAuthJS가 후속 요청을 올바른 세션 및 사용자와 연결하는 데 도움이 됩니다.

2. CSRF 토큰 쿠키: NextAuthJS는 CSRF 공격으로부터 보호하기 위해 CSRF(Cross-Site Request Forgery) 토큰 쿠키를 설정합니다. CSRF 토큰은 NextAuthJS에서 생성되어 쿠키에 저장되는 고유한 값입니다. 이는 사용자가 수행한 후속 요청의 신뢰성을 검증하고 확인하는 데 사용됩니다. 사용자가 양식을 제출하거나 민감한 작업을 수행할 때 CSRF 토큰은 요청 헤더 또는 본문에 포함되어 요청이 악의적인 소스가 아닌 인증된 사용자의 세션에서 시작되었는지 확인합니다.

3. 콜백 URL 쿠키: NextAuthJS는 인증 흐름으로 리디렉션되기 전에 사용자가 액세스하려고 했던 원래 URL을 저장하기 위해 콜백 URL 쿠키를 설정합니다. 이 쿠키는 NextAuthJS가 인증 성공 후 사용자를 원하는 페이지로 다시 리디렉션하는 데 도움이 됩니다. 일반적인 랜딩 페이지 대신 사용자를 의도한 목적지로 원활하게 돌려보내 원활한 사용자 경험을 보장합니다.

NextAuthJS는 안전한 HTTP 전용 쿠키를 사용하여 인증 상태가 안전하고 변조 방지되도록 보장합니다. 쿠키는 암호화되어 악의적인 행위자의 무단 액세스나 수정을 방지합니다.

NextAuthJS와 Prisma 어댑터를 Next.js 애플리케이션에 성공적으로 통합하는 데 성공했습니다! NextAuthJS가 제공하는 용이성과 적응성을 통해 이제 안정적인 인증 시스템을 갖게 되었습니다.

이 가이드에 사용된 코드는 아래 링크된 GitHub 저장소(https://github.com/codelabsacademy/next-auth-guide)를 확인하세요.

그런데 왜 여기서 멈추나요? 웹 개발에 열정이 있고 기술을 향상시키고 싶다면 웹 개발 부트캠프에 지원해 보세요. 우리의 부트캠프는 역동적인 웹 개발 세계에서 탁월한 능력을 발휘하는 데 필요한 지식과 실용적인 기술을 갖춘 포괄적인 학습 경험을 제공합니다.

부트캠프에 참여하면 최첨단 기술에 대한 실무 경험을 쌓고, 실제 프로젝트에 참여하고, 업계 전문가로부터 맞춤형 지침을 받을 수 있습니다. 귀하가 초보자이건 숙련된 개발자이건 상관없이 저희 프로그램은 귀하의 웹 개발 기술을 다음 단계로 끌어올릴 수 있도록 설계되었습니다.

웹 개발 여정을 가속화할 수 있는 이 기회를 놓치지 마십시오. 지금 웹 개발 부트캠프를 신청하세요 흥미로운 웹 개발 분야에서 잠재력을 최대한 발휘해 보세요. 함께 놀라운 디지털 경험을 구축하고 웹의 미래를 만들어 갑시다.