웹 개발에서 사용자 인증은 필수적인 요소입니다. 사용자가 안전하게 시스템에 접근할 수 있도록 하고, 개인정보를 보호하는 것이 매우 중요하다. 이번 강좌에서는 Next.js와 Nest.js를 사용하여 사용자 인증을 구현하는 방법을 자세히 살펴보겠습니다.
1. 프로젝트 설정
사용자 인증 시스템을 구현하기 위해 두 가지 프레임워크인 Next.js와 Nest.js를 사용할 것입니다. Next.js는 프론트엔드 프레임워크로 서버 사이드 렌더링(SSR)과 정적 웹사이트 생성을 지원합니다. 반면 Nest.js는 Node.js 기반의 백엔드 프레임워크로, 현대적인 서버 애플리케이션을 구축하는 데 적합합니다.
1.1 Nest.js 초기 설정
npm i -g @nestjs/cli
nest new backend
cd backend
npm install @nestjs/passport passport passport-local @types/passport-local bcrypt @types/bcrypt
npm install --save @nestjs/jwt passport-jwt @types/passport-jwt
1.2 Next.js 초기 설정
npx create-next-app frontend
cd frontend
npm install axios
2. Nest.js에서 사용자 인증 API 구현
Nest.js에서는 사용자 인증을 구현하기 위해 Passport.js와 JWT(JSON Web Token)를 사용할 것입니다.
2.1 User 엔티티 생성
먼저 User 엔티티를 생성합니다. 다음은 user.entity.ts 파일의 코드입니다.
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';
@Entity()
export class User {
@PrimaryGeneratedColumn()
id: number;
@Column({ unique: true })
email: string;
@Column()
password: string;
}
2.2 UserService 및 UserModule 생성
import { Injectable } from '@nestjs/common';
import { User } from './user.entity';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import * as bcrypt from 'bcrypt';
@Injectable()
export class UserService {
constructor(
@InjectRepository(User)
private userRepository: Repository,
) {}
async create(userDto: { email: string; password: string }): Promise {
const hashedPassword = await bcrypt.hash(userDto.password, 10);
const user = this.userRepository.create({ ...userDto, password: hashedPassword });
return this.userRepository.save(user);
}
async findByEmail(email: string): Promise {
return this.userRepository.findOne({ where: { email } });
}
}
2.3 AuthModule 및 AuthService 생성
import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { JwtModule } from '@nestjs/jwt';
import { AuthService } from './auth.service';
import { LocalStrategy } from './local.strategy';
import { UsersModule } from '../users/users.module';
@Module({
imports: [
UsersModule,
PassportModule,
JwtModule.register({
secret: 'SECRET_KEY', // 비밀키 설정
signOptions: { expiresIn: '60s' }, // 토큰 유효 시간 설정
}),
],
providers: [AuthService, LocalStrategy],
})
export class AuthModule {}
2.4 로그인 및 회원가입 API 엔드포인트 추가
import { Controller, Post, Body, Req } from '@nestjs/common';
import { AuthService } from './auth.service';
@Controller('auth')
export class AuthController {
constructor(private readonly authService: AuthService) {}
@Post('register')
async register(@Body() userDto: { email: string; password: string }) {
return this.authService.register(userDto);
}
@Post('login')
async login(@Body() userDto: { email: string; password: string }) {
return this.authService.login(userDto);
}
}
3. Next.js의 사용자 인증 UI 구현하기
Next.js에서는 사용자 인증을 위한 로그인 및 회원가입 폼을 구현합니다. 사용자 입력을 처리하여 Nest.js 백엔드로 요청을 보내도록 합니다.
3.1 로그인 페이지 구현
import axios from 'axios';
import { useState } from 'react';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const response = await axios.post('/api/auth/login', { email, password });
// 로그인 성공 시 처리
};
return (
);
};
export default Login;
3.2 회원가입 페이지 구현
import axios from 'axios';
import { useState } from 'react';
const Register = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const response = await axios.post('/api/auth/register', { email, password });
// 회원가입 성공 시 처리
};
return (
);
};
export default Register;
4. 사용자 인증 상태 관리
로그인 이후에는 사용자의 인증 상태를 관리해야 합니다. Next.js에서는 Context API 또는 Redux와 같은 상태 관리 라이브러리를 활용할 수 있습니다.
4.1 Context API를 사용한 상태 관리
import { createContext, useContext, useState } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const login = (userData) => setUser(userData);
const logout = () => setUser(null);
return (
{children}
);
};
export const useAuth = () => useContext(AuthContext);
5. 마무리
이번 강좌에서는 Next.js와 Nest.js를 사용하여 사용자 인증 시스템을 구현하는 방법을 살펴보았습니다. 우리는 로그인, 회원가입, 로그아웃 API를 생성하고 프론트엔드에서는 사용자 인터페이스를 구성했습니다.
사용자 인증은 웹 애플리케이션에서 매우 중요한 기능입니다. 이를 통해 사용자의 개인정보와 데이터 안전성을 높일 수 있습니다. 추가적으로 JWT를 사용하여 인증 상태를 유지하고, Refresh Token과 같은 기능을 구현하면 더욱 안전한 인증 시스템을 만들 수 있습니다.
앞으로 이 시스템에 추가할 수 있는 기능들로는 비밀번호 찾기, OAuth 인증(구글, 페이스북 등), 사용자 권한 관리 등이 있습니다. 이러한 기능들을 통해 더 강력하고 유용한 인증 시스템으로 발전시킬 수 있습니다.