문제:

이 블로그 About페이지에서 내 전화번호는 로그인 후 확인할 수 있게 해놓았다. 그런데 로그인해도 전화번호가 안 보인다.. (개발 환경에선 제대로 로드된다.)

로그인 안 해도 페이지 접근은 되나 로그인 하면 보안 처리된 정보를 볼 수 있는 페이지를 만드는 방법:

1. HttpOnly를 쓰는 경우, 서버 컴포넌트에서 accessToken을 추출하여 로그인 유무를 판단한다.

지금 내 블로그에서 사용한 방법이다. 서버 컴포넌트에선 httpOnly쿠키라도 접근이 가능하며, 이는 브라우저에 은닉되어있어 보안적으로 안전하다.

내 블로그의 예시:

import AboutInner from "@/components/pages/about/aboutInner";
import { cookies } from "next/headers";

...

export default async function AboutPage({
params: { locale },
}: AboutPageProps) {
const cookieStore = cookies();
const accessToken = cookieStore.get("accessToken")?.value;

return <AboutInner isAuthenticated={!!accessToken} locale={locale} />;
}

다만, 유효기간이 지난 stale한 엑세스토큰인데 있기만 하다고 들여보내주면 안 된다.

나는 토큰이 있다면 무조건 fresh하게 유지하고, stale하다면 완전히 제거하기 위해서

Next Middleware에서 아래처럼 토큰관리하는 로직을 구축하였다.

import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";
import { NextRequest } from "next/server";
import { jwtVerify } from "jose";
import { END_POINTS } from "./services";

const intlMiddleware = createMiddleware(routing);

export default async function middleware(request: NextRequest) {
const accessToken = request.cookies.get("accessToken")?.value;
const refreshToken = request.cookies.get("refreshToken")?.value;

// 토큰이 있으면 검증하고 필요시 재발급
if (accessToken || refreshToken) {
try {
// 유효기간 검증
} catch (error) {
// 재갱신도 실패한다면 stale한 토큰 완전 삭제
}
}

// 토큰이 없거나 검증 완료 후 그대로 진행
return intlMiddleware(request);
}

export const config = {
// API 경로 제외하고 모든 경로에 적용
matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

2. 클라이언트 사이드 호출을 통해 인증정보를 가져오기

SPA앱에서 사용자에 따라 동적으로 데이터를 패칭해오기 위해 익히 쓰이는 방법이다. 정적페이지 데이터에는 보안에 민감한 정보를 일체 안 넣고, 클라이언트 사이드에서 토큰을 가지고 호출해서 알아내는 방법이다.

하여튼 서버컴포넌트에서 토큰을 검증하는 현재의 방식을 사용하고 있고, 개발환경에서는 토큰 검증 로직이 제대로 동작하는데, 상용환경에선 로그인이 되어도 노출되지 않는 상황이 발생하였다.

그래서 디버깅을 시도하면서 서버 컴포넌트에서 추출한 cookie에 로그를 찍어보니 undefined가 나온다는걸 알 수 있었다. 그래서 혹시 토큰 자체가 없는건가? 싶었지만 백엔드 앱에선 토큰을 제대로 받아서 검증이 잘 되고 있었다. (인증이 필요한 API들은 비로그인 시에는 제대로 401에러가 나오고 있었다.)

상황 설명:

프론트:bumang.xyz(Next.js App Router)

API:api.bumang.xyz(NestJS)

로그인/인증은 잘 되는데,About 페이지에서 서버 측cookies()가 항상 빈 값.

개발환경(백/프론트 모두 localhost일 때)에선 보이는데,프로덕션에서 일관되게 실패.

원인: Nest.js API서버에서 쿠키 Domain 미설정(= 호스트 전용)

지금까지 Nest서버에서 로그인 시 Set-Cookie를 할 때 domain 속성을 따로 설정을 하지 않았었다. (이러는게 보안적으로는 제일 좋다고도 한다.)

도메인을 명시하지 않으면 요청했던 호스트의 주소가 쿠키를 조회할 수 있는 유일한 목적지가 된다.

그래서 이 경우 내 baseUrl인 api.bumang.xyz를 향하는 요청이어야지만 쿠키를 추출할 수 있는 것이다.

host-only=api.bumang.xyz

그러나 서버컴포넌트에서 쿠키를 추출하는 것은 API 서버로 요청을 보내는게 아닌, 정적페이지 데이터를 가져오는 것이므로 기존 설정으로는 쿠키 추출이 안 되던 것이었다.

function getCookieOptions(isProduction: boolean = false) {
return {
httpOnly: true,
secure: isProduction,
sameSite: 'lax' as const,
domain: isProduction ? 'bumang.xyz' : undefined, // 서브도메인 공유 추가
path: '/',
};

그래서 위처럼 domain 속성을 제대로 명시해두면(bumang.xyz), 이 도메인을 공유하는 모든 서브도메인에서 (bumang.xyz, api.bumang.xyz) 쿠키를 제대로 추출할 수 있게 된다.

도메인 간 공유를 설정하고 나서 제대로 쿠키추출 후 인증 로직이 작동하는 모습: