SPA에서 안전하게 로그인 기능 구현하기 – JWT, 토큰 저장, 보안 전략까지

date

Mar 3, 2025

slug

spa-authentication-guide

author

status

Public

tags

Etc

summary

type

Post

thumbnail

category

updatedAt

Aug 3, 2025 01:50 PM

로그인 기능 구현 시, 어떤 고민들이 있었나요?

📌 다룰 내용

1. 인증(Authentication) vs 인가(Authorization)

2. JWT(Json Web Token) 왜 쓰고 어떤 점을 주의해야 할까?

3. Access/Refresh Token 어디에 저장해야 안전할까?

4. HttpOnly 쿠키가 왜 전송이 안될까? 그리고 해결 전략

5. 인증 흐름: 로그인부터 토큰 갱신까지

6. Axios로 자동 토큰 갱신, race condition 없이 처리하기

7. 마무리

1. 인증 vs 인가 – 개념부터 짚고 가자

2. JWT(Json Web Token) 왜 쓰고 어떤 점을 주의해야 할까?

JWT란?

Header.Payload.Signature

Payload에는 다음과 같은 클레임(Claims)이 포함됩니다.

⚠️ Payload는 Base64URL로 인코딩만 되어 있습니다.

즉, 누구나 내용은 읽을 수 있으므로 민감한 정보는 절대 넣지 마세요.

장점과 단점

서명(Signature) 알고리즘

3. Access/Refresh Token 어디에 저장해야 안전할까?

흔한 안티패턴

localStorage.setItem('accessToken', token);
localStorage.setItem('refreshToken', refreshToken);

• localStorage: XSS 공격에 무방비

• refreshToken도 localStorage에 저장: 재사용 공격 위험

추천 전략

Access Token을 memory-only로 저장하면 XSS 대응은 강해지지만

페이지 새로고침 시 상태 초기화 문제도 함께 고려해야 합니다.

4. HttpOnly 쿠키가 왜 전송이 안될까? 그리고 해결 전략

😵 왜 쿠키가 전송되지 않을까?

📛 예시: 서로 다른 Origin일 때 생기는 문제

프론트엔드: https://app.my-service.com
백엔드 API: https://api.my-service.com

• 브라우저는 위 둘을 서로 다른 Origin으로 인식

• 이 상태에서 인증 요청을 보내면
• SameSite=Strict일 경우 → 쿠키 전송 차단
• SameSite=None; Secure이더라도 → 서버가 CORS 설정을 하지 않았다면 401 에러

해결 전략: 브라우저가 같은 Origin처럼 인식하게 만들자

브라우저 관점에서 "같은 Origin"이란?

protocol + domain + port가 모두 동일해야 함

예: ALB(Application Load Balancer)로 경로 기반 분기

https://example.com/app       → 프론트 앱  
https://example.com/api/user → API 서버

• 브라우저 입장에서 동일 Origin → 쿠키 자동 전송 가능

• SameSite=Strict 설정도 안전하게 사용 가능

• CORS 설정 자체가 필요 없어짐

만약 도메인을 분리해야 한다면?

1. 쿠키는 SameSite=None; Secure로 설정

2. 백엔드 서버에서 아래와 같은 CORS 헤더를 응답에 포함

Access-Control-Allow-Origin: https://app.my-service.com
Access-Control-Allow-Credentials: true

• 가능한 한 동일 Origin 구조로 통합해서 문제 자체를 없애는 게 가장 안정적

• 프록시, ALB, nginx 등에서 경로 기반 라우팅을 활용

• 다른 도메인을 쓸 경우에는 CORS 정책을 제대로 설정하고, 브라우저 호환성을 꼭 테스트

5. 인증 흐름: 로그인부터 토큰 갱신까지

sequenceDiagram
    participant Client
    participant API_Server
    participant Auth_Server

    Client->>API_Server: [1] 요청 (Access Token 포함)
    API_Server-->>Client: [2] 401 Unauthorized

    Client->>API_Server: [3] Refresh Token으로 갱신 요청
    API_Server->>Auth_Server: [4] Refresh Token 검증
    Auth_Server-->>API_Server: [5] 새 Access Token 발급
    API_Server-->>Client: [6] 토큰 전달

    Client->>API_Server: [7] 재요청 (Access Token 포함)
    API_Server-->>Client: [8] 정상 응답

6. Axios로 자동 토큰 갱신, race condition 없이 처리하기

요구사항

• Access Token 만료 시 → 자동으로 Refresh API 요청

• 동시에 여러 요청이 401을 받아도 → 단 한 번만 갱신

• 갱신 실패 시 → 모든 대기 요청 실패 처리

• 무한 루프 방지 → _retry 플래그 활용

구현 코드

let isRefreshing = false;
let refreshSubscribers: ((token: string) => void)[] = [];

const onRefreshed = (token: string) => {
  refreshSubscribers.forEach((cb) => cb(token));
  refreshSubscribers = [];
};

instance.interceptors.response.use(
  (res) => res,
  async (error: AxiosError) => {
    const original = error.config as RetryableRequest;
    if (error.response?.status === 401 && !original._retry) {
      original._retry = true;

      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          refreshSubscribers.push((token) => {
            if (token) {
              original.headers.Authorization = `Bearer ${token}`;
              resolve(axios(original));
            } else {
              reject(error);
            }
          });
        });
      }

      isRefreshing = true;
      try {
        const { accessToken } = await authService.refresh();
        onRefreshed(accessToken);
        isRefreshing = false;

        original.headers.Authorization = `Bearer ${accessToken}`;
        return axios(original);
      } catch (refreshError) {
        onRefreshed('');
        isRefreshing = false;
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  },
);

• 토큰 만료 시 사용자 입장에서 끊김 없는 UX 제공

• 서버에 중복 refresh 요청을 보내지 않음

• 갱신 실패 → 한 번에 로그인 만료 처리 가능 (예: 토스트 안내, 리디렉션 등)

🔚 마무리하며

어디에 저장할 것인가? 언제, 어떻게 갱신할 것인가? 어떤 위협을 어떻게 막을 것인가?

📚 참고자료

• CSRF Prevention Cheat Sheet

• MDN Set-Cookie