Blog

회원 인증을 구현하며 알아보는 섹션과 쿠키의 역할 (Remix 포폴 실전 예시)

👁️ 17회 읽음

2025. 6. 13.

#쿠키
#세션
#프론트엔드
#웹보안
#Remix
#Firebase
#회원인증
#인증로직

웹 서비스에서 로그인 기능을 직접 구현하다 보면 "쿠키"와 "세션" 개념을 마주치게 됩니다.

이번 글에서는 Remix 기반 포트폴리오 프로젝트에서 실제 구현한 로그인 기능을 예로 들어, 쿠키와 세션의 역할을 설명드리겠습니다.

✅ 인증 흐름 요약

Remix + Firebase 기반 인증은 다음 순서로 이루어집니다:

사용자가 이메일/비밀번호 입력 → Firebase Auth 로그인
Firebase에서 받은 idToken을 서버에 전달
Remix 서버에서 이 토큰을 검증하고 사용자 정보를 쿠키에 저장
이후 요청마다 쿠키를 읽어 로그인 상태 유지

🔐 Remix에서 사용한 핵심 로직

1. 로그인 시 쿠키 생성

// auth.server.ts
export const userSession = createCookie('auth', {
  httpOnly: true,
  path: '/',
  maxAge: 60 * 60 * 24, // 1일
  secure: true,
});

export async function loginAndSetSession(request: Request, idToken: string) {
  const decoded = await verifyIdToken(idToken); // Firebase에서 토큰 검증
  return redirect('/', {
    headers: {
      'Set-Cookie': await userSession.serialize({
        email: decoded.email,
        uid: decoded.uid,
      }),
    },
  });
}

2. 페이지 접근 시 로그인 여부 확인

// root.tsx or any loader
export async function loader({ request }: LoaderFunctionArgs) {
  const session = await userSession.parse(request.headers.get('Cookie'));
  return json({ user: session || null });
}

🍪 쿠키란?

클라이언트(브라우저)에 저장되는 정보
요청마다 자동으로 포함됨 (Cookie: auth=...)
Remix에서는 createCookie()로 쉽게 설정 가능

👉 인증 토큰 또는 유저 정보를 저장하는 데 적합

👉 보안상 httpOnly, secure, path, maxAge 옵션 설정이 중요

🧠 세션은 Remix에서 어떻게 다뤄?

createCookie()로 만든 쿠키 자체가 "세션 역할"을 수행
우리가 따로 서버 세션 DB를 운영하진 않지만, 쿠키 안에 인증 정보를 넣고 로그인 상태를 판별

즉, Remix에서는 "쿠키 = 인증 세션"이라고 볼 수 있습니다.

✅ 로그인 흐름 요약 (Remix 포폴 예시)

단계	설명
1	Firebase Auth로 로그인
2	받은 토큰을 Remix 액션에서 검증
3	유저 정보를 쿠키에 저장 (`Set-Cookie`)
4	이후 모든 요청에서 쿠키를 통해 로그인 상태 확인
5	로그아웃 시 쿠키 삭제 (`userSession.destroy()`)

🔒 로그아웃 구현

export async function logout(request: Request) {
  return redirect('/', {
    headers: {
      'Set-Cookie': await userSession.destroy(),
    },
  });
}

📦 쿠키 vs 세션 정리

항목	Remix 구현 기준 쿠키	전통적인 세션
저장 위치	클라이언트 브라우저	서버 (Memory/DB)
용도	인증 정보 보관	사용자 상태 보관
보안	`httpOnly`, `secure` 필수	서버에서 직접 관리
관리	직접 만료/삭제 필요	세션 미들웨어에서 자동 관리