Email 인증 구현하기 - Better_Auth, Next.js, Resend를 활용한 모던 웹 개발

2024-11-28 18:17:21

webdevtypescriptprogrammingbeginners

모던 웹 애플리케이션에서 이메일 인증 구현하기

이 글에서는 최적의 기술 스택을 활용하여 이메일 인증 시스템을 현대적인 웹 애플리케이션에 통합하는 방법을 알아봅니다. 웹 개발 초보자부터 전문가까지 유용한 이 가이드를 통해 사용자의 이메일 인증을 요구하는 안정적인 애플리케이션 구축법을 배워보세요.

필요 기술 스택 소개

여기서 사용할 기술 스택을 소개합니다:

Better_Auth v1: 경량의 확장 가능한 TypeScript 인증 라이브러리입니다.
Next.js: 서버 사이드 렌더링이 가능한 React 프레임워크입니다.
Prisma: 효율적인 데이터베이스 상호작용을 위한 현대적인 ORM입니다.
Shadcn: 빠른 UI 개발을 위한 유틸리티 중심 컴포넌트 라이브러리입니다.
TailwindCSS: 주로 사용되는 유틸리티 퍼스트 CSS 프레임워크입니다.

선행 조건

이메일 인증 시스템을 구현하기 전에 다음의 준비물이 필요합니다:

Node.js (LTS 버전) 설치
npm, yarn, pnpm 중 하나의 패키지 매니저 (본 가이드에서는 pnpm을 사용합니다)
PostgreSQL 데이터베이스 인스턴스 (로컬 또는 Supabase, PlanetScale과 같은 호스팅 서비스)

로컬 환경에서 작업하는 경우, Docker를 활용하면 좋습니다. 또한 TypeScript, Next.js 및 Prisma을 다루는 기본적인 지식이 필요합니다.

Resend 서비스 설정

이메일 검증은 Resend라는 트랜잭션 이메일 서비스와 함께 구현할 것입니다.

Resend SDK 추가하기

프로젝트에 Resend 패키지를 추가합니다:
```
pnpm add resend
```
API 키 받기
- Resend에 방문하여 계정에 로그인합니다.
- 'API Keys' 메뉴로 이동하여 새로운 키를 생성합니다.
- 생성한 API 키를 .env 파일에 추가합니다:
```
RESEND_API_KEY=your-api-key-here
```

Resend 헬퍼 생성

Resend를 위한 재사용 가능 코드 구조를 생성합니다.

import { Resend } from "resend";

export const resend = new Resend(process.env.RESEND_API_KEY);

Email 인증 통합

Better_Auth는 이메일 인증을 쉽게 지원합니다.

Email 인증 설정

src/lib/auth.ts 파일을 열고, 이메일 인증 설정을 다음과 같이 수정합니다:

emailVerification: {
    sendOnSignUp: true,
    autoSignInAfterVerification: true,
    sendVerificationEmail: async ({ user, url }) => {
      await resend.emails.send({
        from: "Your Company <no-reply@yourdomain.com>",
        to: user.email,
        subject: "Email Verification",
        html: `Please verify your email by clicking the link: ${url}`,
      });
    },
}

UI 컴포넌트 업데이트

이메일 인증 워크플로우를 관리할 수 있도록 UI 컴포넌트를 업데이트해야 합니다.

SignIn 컴포넌트 업데이트

src/components/auth/sign-in.tsx 파일을 열고 다음 코드를 사용합니다:

"use client"
import React from 'react';
import { useAuthState } from '@/hooks/useAuthState';
import { signIn } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';

const SignIn = () => {
    const router = useRouter();
    const { setError, setSuccess } = useAuthState();

    const onSubmit = async (data) => {
        try {
            await signIn.email({
                email: data.email,
                password: data.password
            });
            setSuccess("로그인 성공");
            router.replace('/');
        } catch (error) {
            if (error.status === 403) {
                setError("이메일을 확인해주세요");
            } else {
                setError(error.message);
            }
        }
    };

    // 구성요소 렌더링 코드
};

export default SignIn;

마무리

이 가이드를 통해, 이메일 인증 시스템을 완벽하게 구성하고, 안전한 사용자 관리를 구현하는 방법을 배웠습니다. 모던 웹 애플리케이션에서 사용자 인증은 필수적인 요소이며, 이로서 여러분의 서비스가 한층 더 안정적이고 신뢰할 수 있게 될 것입니다.

R_11