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

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

---

✅ 인증 흐름 요약

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

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

---

🔐 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 필수	서버에서 직접 관리
관리	직접 만료/삭제 필요	세션 미들웨어에서 자동 관리

---

🧑‍💻 마무리

Remix로 인증 기능을 구현해보면서, **쿠키가 단순히 값 저장이 아니라 "로그인 상태를 유지하는 핵심"**이라는 것을 직접 체감할 수 있습니다.

👉 Firebase와의 연동, 쿠키 설정, 유저 인증까지 전 과정을 직접 구현해보며 쿠키의 동작 원리와 역할을 자연스럽게 익혀보세요.