React에서 Authentication 처리하기

 

 

웹 애플리케이션에서 인증(Authentication)은 사용자 신원을 확인하고, 사용자별로 접근 가능한 리소스를 제한하는 핵심 기능입니다. React로 애플리케이션을 개발할 때는 SPA(Single Page Application)의 특성을 고려해 인증을 설계하고 구현해야 합니다. 이번 글에서는 React에서 인증을 처리하는 기본 개념과 구현 방법을 살펴보고, JWT(JSON Web Token) 기반 인증과 OAuth를 사용한 인증 예제를 소개합니다.

---

1. React에서 Authentication의 주요 개념

React에서 인증은 기본적으로 클라이언트 측에서 처리됩니다. 서버와의 통신을 통해 사용자를 인증하고, 인증 상태를 유지 및 관리합니다.

1.1 인증 흐름의 기본 단계

1. 로그인 요청: 사용자가 이메일, 비밀번호 등 자격 증명을 입력합니다.
2. 서버 인증: 입력된 정보를 서버에서 검증하고, 성공 시 인증 토큰(JWT 등)을 반환합니다.
3. 클라이언트 저장: 토큰을 로컬 스토리지, 세션 스토리지 또는 쿠키에 저장합니다.
4. 인증 상태 관리: 클라이언트에서 사용자 인증 상태를 유지하고, 필요한 API 요청에 토큰을 첨부합니다.
5. 로그아웃: 인증 정보를 삭제하여 인증 상태를 해제합니다.

---

2. React에서 인증 구현 방법

React에서 인증을 처리하는 방법은 여러 가지가 있지만, 아래 두 가지가 가장 일반적입니다.

2.1 JWT 기반 인증

JWT는 JSON 형식의 토큰으로 사용자 정보를 안전하게 인코딩하여 클라이언트와 서버 간 인증에 사용됩니다.

2.2 OAuth 인증

OAuth는 Google, Facebook, GitHub과 같은 외부 제공자 계정을 통해 인증하는 방식입니다. React 애플리케이션에서 소셜 로그인을 구현할 때 주로 사용됩니다.

---

3. 실습: JWT를 사용한 React 인증 구현

3.1 백엔드 준비

JWT 인증을 구현하려면 먼저 서버에서 로그인 요청을 처리하고 토큰을 발급하도록 설정해야 합니다. (예: Node.js/Express)

예제: JWT 토큰 발급 API

const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();
app.use(express.json());

const SECRET_KEY = "your_secret_key";

// Mock 사용자 데이터
const users = [{ username: "test", password: "1234" }];

app.post("/login", (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username && u.password === password);
  if (!user) {
    return res.status(401).json({ message: "Invalid credentials" });
  }

  const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: "1h" });
  res.json({ token });
});

app.listen(4000, () => console.log("Server running on port 4000"));

---

3.2 React 클라이언트 설정

React 애플리케이션에서 사용자는 로그인 화면을 통해 인증을 시도합니다. 성공적으로 토큰을 받으면 이를 저장하고 인증 상태를 관리합니다.

1) 로그인 컴포넌트

import React, { useState } from "react";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch("http://localhost:4000/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });

      if (!response.ok) throw new Error("로그인 실패");

      const { token } = await response.json();
      localStorage.setItem("token", token); // 토큰 저장
      alert("로그인 성공!");
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <h1>로그인</h1>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <input
        type="text"
        placeholder="아이디"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="비밀번호"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">로그인</button>
    </form>
  );
};

export default Login;

2) 인증 상태 관리

인증 상태를 글로벌하게 관리하려면 React Context 또는 상태 관리 라이브러리(Redux 등)를 사용할 수 있습니다.

import React, { createContext, useState, useContext } from "react";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(!!localStorage.getItem("token"));

  const login = (token) => {
    localStorage.setItem("token", token);
    setIsAuthenticated(true);
  };

  const logout = () => {
    localStorage.removeItem("token");
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

3) 보호된 라우트 구현

사용자가 인증되지 않은 상태에서 특정 페이지에 접근하지 못하도록 제한할 수 있습니다.

import React from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "./AuthContext";

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();

  return isAuthenticated ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

---

4. 실습: OAuth를 사용한 소셜 로그인 구현

Google OAuth를 사용한 인증을 예로 들어보겠습니다.

1) Google Cloud Console 설정

1. Google Cloud Console에서 프로젝트를 생성합니다.
2. OAuth 2.0 클라이언트 ID를 생성하고 리디렉션 URI를 설정합니다.
3. 클라이언트 ID를 복사합니다.

2) React에서 Google Login 버튼 추가

npm install react-google-login

import React from "react";
import { GoogleLogin } from "react-google-login";

const Login = () => {
  const handleSuccess = (response) => {
    console.log("Google Login Success:", response);
  };

  const handleFailure = (error) => {
    console.log("Google Login Failed:", error);
  };

  return (
    <div>
      <h1>Google Login</h1>
      <GoogleLogin
        clientId="YOUR_GOOGLE_CLIENT_ID"
        buttonText="Login with Google"
        onSuccess={handleSuccess}
        onFailure={handleFailure}
        cookiePolicy={"single_host_origin"}
      />
    </div>
  );
};

export default Login;

---

5. 실무에서의 Best Practices

1. 토큰 저장 위치:
   • 민감한 데이터는 localStorage 대신 HttpOnly Cookie에 저장해 보안을 강화합니다.
2. 토큰 갱신:
   • 짧은 만료 시간을 가진 액세스 토큰과 긴 만료 시간을 가진 리프레시 토큰을 사용해 인증 세션을 유지하세요.
3. 상태 관리:
   • 글로벌 상태 관리 도구를 사용해 인증 상태를 효율적으로 관리하세요.

---

결론

React 애플리케이션에서 인증을 구현하는 것은 보안과 사용자 경험 모두에서 중요한 과제입니다.
JWT 기반 인증과 OAuth 소셜 로그인을 사용해 다양한 인증 방식을 React 프로젝트에 통합해 보세요.
위에서 다룬 내용을 기반으로 실무 프로젝트에 적합한 인증 방식을 설계하고, 사용자 친화적인 인증 흐름을 만들어보시길 바랍니다!