[NextJS] JWT토큰을 이용하여 로그인 기능 구현하기

Admin 페이지를 제작하게 되어서 로그인 페이지를 제작할 일이 생겼습니다.

 

JWT란?

JWT는 JSON Web Token의 약자로, 웹에서 정보를 전송하기 위한 토큰 인증 방식입니다.

JWT는 정보를 JSON 객체로 표현, 이를 안전하게 전송하기 위해 Base64로 인코딩하여 문자열로 표현합니다.

 

JWT는 일반적으로 사용자 인증 정보, 클레임(Claim)과 그에 대한 서명(signature)으로 구성됩니다.

클레임은 토큰에 담기는 속성으로, 사용자에 대한 정보나 토큰의 유효 기간 등을 나타내며,

서명은 토큰이 변조되지 않았음을 확인하기 위한 부분입니다.

 

JWT는 크게 세 부분으로 나눠집니다:

 

Header / Payload / Signature

Header(헤더): JWT의 타입 및 사용된 해시 알고리즘 등의 정보를 담고 있습니다.

Payload(페이로드):

토큰에 담을 클레임(claim) 정보가 포함되어 있습니다. 클레임은 세 가지 타입으로 나뉩니다.

1. Registered Claims (등록된 클레임): 토큰에 대한 정보를 제공하는 표준 클레임 (예: iss, exp, sub 등).
2. Public Claims (공개 클레임): 충돌이 방지된 이름을 가진 클레임들로서, JWT를 사용하는 사람들 간의 공유를 위해 사용되는 것이 권장됩니다.
3. Private Claims (비공개 클레임): 클라이언트와 서버 간 협의된 사용자 지정 클레임입니다.

Signature(서명): 헤더의 인코딩 값, 페이로드의 인코딩 값, 그리고 비밀키를 사용하여 서명이 생성됩니다. 서명을 통해 토큰이 변조되지 않았음을 확인할 수 있습니다.

 

JWT는 클라이언트와 서버 간에 인증 정보를 안전하게 전달하기 위해 주로 사용되며, OAuth와 같은 프로토콜에서도 사용됩니다. 클라이언트가 서버로 로그인할 때 JWT가 발급되고, 이후의 요청에서는 발급된 JWT를 헤더에 실어 서버로 전송하여 인증을 유지합니다.

 

로그인 구현하기

사용자 정보를 토대로 jwt 토큰을 생성하는 간단한 코드입니다.

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();

app.post('/api/login', (req, res) => {
  // 사용자 인증 로직 수행

  // 예시로 사용자 정보를 토대로 JWT 생성
  const user = { id: 1, username: 'exampleUser' };
  const token = jwt.sign(user, 'your_secret_key');

  res.json({ token });
});

app.listen(3001, () => {
  console.log('Server is running on port 3001');
});

 

이 api를 바탕으로 프론트에서 수신하고 이를 저장까지 해보겠습니다.

// 클라이언트에서 로그인 처리 및 JWT 저장 예시
import { useState } from 'react';
import axios from 'axios';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const response = await axios.post('/api/login', { username, password });
      const { token } = response.data;

      // JWT 저장
      localStorage.setItem('token', token);

      // 로그인 후 필요한 동작 수행 (예: 페이지 이동 등)
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <div>
      <input type="text" placeholder="Username" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default LoginPage;

 

React 코드이며, 서버에 요청을 보내서 받아온 jwt토큰을 localStorage에 저장하는 코드입니다.

이러한 과정을 통해 localStorage에 있는 토큰과 서버의 토큰이 일치하다면 페이지 접근을 허용하는 protected 페이지

제작이 가능할 것이고,

localStorage에 토큰이 존재한다면 로그인이 성공한 것이기 때문에 다음 페이지로 넘어가게끔 구현 할 수 있습니다.