Next.js에서 서버 액션(Server Actions)과 JWT 인증 구현하기

 

• Next.js의 서버 액션을 활용한 사용자 인증 흐름
• JSON Web Token(JWT)을 사용한 로그인 및 인증 관리
• 클라이언트에서 인증된 사용자 정보를 유지하는 방법
• npm install jsonwebtoken bcryptjs

app/actions.js (서버 액션을 활용한 인증)

'use server';

import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';

const users = [
  { id: 1, username: 'user1', password: bcrypt.hashSync('password1', 10) },
];

const SECRET_KEY = process.env.JWT_SECRET;

export async function loginUser(formData) {
  const username = formData.get('username');
  const password = formData.get('password');

  const user = users.find((u) => u.username === username);
  if (!user || !bcrypt.compareSync(password, user.password)) {
    return { error: '잘못된 로그인 정보' };
  }

  const token = jwt.sign({ id: user.id, username: user.username }, SECRET_KEY, {
    expiresIn: '1h',
  });

  return { token };
}

export async function verifyToken(token) {
  try {
    return jwt.verify(token, SECRET_KEY);
  } catch (error) {
    return null;
  }
}

 

app/page.js (JWT 기반 로그인 UI)

import { loginUser } from './actions';
import { useState } from 'react';

export default function Home() {
  const [token, setToken] = useState('');
  const [error, setError] = useState('');

  async function handleLogin(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const response = await loginUser(formData);

    if (response.token) {
      setToken(response.token);
      setError('');
    } else {
      setError(response.error);
    }
  }

  return (
    <div>
      <h1>JWT 로그인</h1>
      <form onSubmit={handleLogin}>
        <input type="text" name="username" placeholder="아이디" required />
        <input type="password" name="password" placeholder="비밀번호" required />
        <button type="submit">로그인</button>
      </form>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {token && <p>토큰: {token}</p>}
    </div>
  );
}

 

환경 변수 설정 파일: .env.local

JWT_SECRET=your-secret-key

 

 

• Next.js의 서버 액션을 활용하면 API 없이도 인증을 간편하게 구현 가능
• JWT를 활용한 사용자 세션 유지 방법 및 보안 고려 사항 설명