From 22ced3a6ae2260e73ad97e7e1d639b53fe74d599 Mon Sep 17 00:00:00 2001 From: "jihoon87.lee" Date: Thu, 5 Feb 2026 09:38:42 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=9D=B8=EC=A6=9D=20=ED=9D=90?= =?UTF-8?q?=EB=A6=84=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .vscode/settings.json - chatgpt 확장 자동 실행 비활성화 설정 추가 app/auth/callback/route.ts - OAuth 콜백 처리 개선: 에러 메시지 매핑 함수 사용 및 리다이렉트 로직 정리 app/auth/confirm/route.ts - 이메일 인증(토큰 검증) 라우트 신규 구현: recovery 쿠키 설정 및 안전한 리다이렉트 처리 app/forgot-password/page.tsx - UI 텍스트/플레이스홀더 정리, 메시지 렌더링 조건부 처리 app/reset-password/page.tsx - 리셋 페이지 접근/세션 검증 로직 정리 및 UI 문구/아이콘 변경 features/auth/actions.ts - 에러 처리 통합(getAuthErrorMessage 사용), 서버 액션 주석 정리 - 비밀번호 재설정 플로우 반환값을 객체로 변경하고 recovery 쿠키 삭제/로그아웃 처리 features/auth/components/reset-password-form.tsx - 클라이언트 폼: updatePassword 결과 처리 개선, 라우터 리다이렉션 및 에러 메시지 표시 개선 features/auth/constants.ts - 인증 관련 상수(에러 메시지, 코드/상태 매핑, 라우트, 검증 규칙, 쿠키 이름) 신규 추가 features/auth/errors.ts - Supabase Auth 에러를 한글 메시지로 변환하는 유틸 추가 features/auth/schemas/auth-schema.ts - zod 스키마 메시지 문구 정리 및 포맷 통일 utils/supabase/middleware.ts - 세션/쿠키 갱신 및 라우트 보호 로직 개선, recovery 쿠키 기반 리다이렉트 처리 추가 utils/supabase/server.ts - 서버용 Supabase 클라이언트 초기화 함수 추가 (쿠키 읽기/쓰기 처리) --- .vscode/settings.json | 3 + app/auth/callback/route.ts | 29 +++-- app/auth/confirm/route.ts | 98 ++++++++-------- app/forgot-password/page.tsx | 40 +++---- app/reset-password/page.tsx | 55 ++------- features/auth/actions.ts | 89 ++++++--------- .../auth/components/reset-password-form.tsx | 52 ++++----- features/auth/constants.ts | 107 +++++++++++++++++- features/auth/errors.ts | 30 +++++ features/auth/schemas/auth-schema.ts | 53 +++------ utils/supabase/middleware.ts | 54 +++++---- utils/supabase/server.ts | 32 ++---- 12 files changed, 342 insertions(+), 300 deletions(-) create mode 100644 features/auth/errors.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index e69de29..c269e49 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "chatgpt.openOnStartup": false +} \ No newline at end of file diff --git a/app/auth/callback/route.ts b/app/auth/callback/route.ts index 40e207f..604d5f9 100644 --- a/app/auth/callback/route.ts +++ b/app/auth/callback/route.ts @@ -1,24 +1,20 @@ -import { createClient } from "@/utils/supabase/server"; +import { createClient } from "@/utils/supabase/server"; import { NextResponse } from "next/server"; import { AUTH_ERROR_MESSAGES, AUTH_ROUTES } from "@/features/auth/constants"; +import { getAuthErrorMessage } from "@/features/auth/errors"; /** - * [인증 콜백 라우트 핸들러] - * - * Supabase 인증 이메일(회원가입 확인, 비밀번호 재설정 등) 및 OAuth(소셜 로그인) - * 리다이렉트될 때 호출되는 API 라우트입니다. + * OAuth/??? ?? ?? ?? */ export async function GET(request: Request) { const { searchParams, origin } = new URL(request.url); - // 1. URL에서 주요 직접 파라미터 및 에러 추출 const code = searchParams.get("code"); const next = searchParams.get("next") ?? AUTH_ROUTES.HOME; const error = searchParams.get("error"); const error_code = searchParams.get("error_code"); const error_description = searchParams.get("error_description"); - // 2. 인증 오류가 있는 경우 (예: 구글 로그인 취소 등) if (error) { console.error("Auth callback error parameter:", { error, @@ -28,7 +24,6 @@ export async function GET(request: Request) { let message: string = AUTH_ERROR_MESSAGES.DEFAULT; - // 에러 종류에 따른 메시지 분기 if (error === "access_denied") { message = AUTH_ERROR_MESSAGES.OAUTH_ACCESS_DENIED; } else if (error === "server_error") { @@ -40,31 +35,33 @@ export async function GET(request: Request) { ); } - // 3. code가 있으면 세션으로 교환 (정상 플로우) if (code) { const supabase = await createClient(); const { error: exchangeError } = await supabase.auth.exchangeCodeForSession(code); if (!exchangeError) { - // 세션 교환 성공 - 원래 목적지로 리다이렉트 const forwardedHost = request.headers.get("x-forwarded-host"); const isLocalEnv = process.env.NODE_ENV === "development"; if (isLocalEnv) { return NextResponse.redirect(`${origin}${next}`); - } else if (forwardedHost) { - return NextResponse.redirect(`https://${forwardedHost}${next}`); - } else { - return NextResponse.redirect(`${origin}${next}`); } + + if (forwardedHost) { + return NextResponse.redirect(`https://${forwardedHost}${next}`); + } + + return NextResponse.redirect(`${origin}${next}`); } - // 세션 교환 실패 시 로그 및 에러 메시지 설정 console.error("Auth exchange error:", exchangeError.message); + const message = getAuthErrorMessage(exchangeError); + return NextResponse.redirect( + `${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(message)}`, + ); } - // 4. code가 없거나 교환 실패 시 기본 에러 페이지로 리다이렉트 const errorMessage = encodeURIComponent( AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK, ); diff --git a/app/auth/confirm/route.ts b/app/auth/confirm/route.ts index 9865a7b..7915598 100644 --- a/app/auth/confirm/route.ts +++ b/app/auth/confirm/route.ts @@ -1,76 +1,84 @@ -import { createClient } from "@/utils/supabase/server"; -import { AUTH_ERROR_MESSAGES } from "@/features/auth/constants"; +import { createClient } from "@/utils/supabase/server"; +import { + AUTH_ERROR_MESSAGES, + AUTH_ROUTES, + RECOVERY_COOKIE_MAX_AGE_SECONDS, + RECOVERY_COOKIE_NAME, +} from "@/features/auth/constants"; +import { getAuthErrorMessage } from "@/features/auth/errors"; import { type EmailOtpType } from "@supabase/supabase-js"; -import { redirect } from "next/navigation"; -import { type NextRequest } from "next/server"; +import { NextResponse, type NextRequest } from "next/server"; -// ======================================== -// 상수 정의 -// ======================================== - -/** 비밀번호 재설정 후 이동할 경로 */ -const RESET_PASSWORD_PATH = "/reset-password"; - -/** 인증 실패 시 리다이렉트할 경로 */ -const LOGIN_PATH = "/login"; - -// ======================================== -// 라우트 핸들러 -// ======================================== +const RESET_PASSWORD_PATH = AUTH_ROUTES.RESET_PASSWORD; +const LOGIN_PATH = AUTH_ROUTES.LOGIN; /** - * [이메일 인증 확인 라우트] - * - * Supabase 이메일 템플릿의 인증 링크를 처리합니다. - * - 회원가입 이메일 확인 - * - 비밀번호 재설정 - * - * @example Supabase 이메일 템플릿 형식 - * {{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery + * 이메일 인증(/auth/confirm) 처리 + * - token_hash + type 검증 + * - recovery 타입일 경우 세션 쿠키 설정 후 비밀번호 재설정 페이지로 리다이렉트 */ export async function GET(request: NextRequest) { + // 1) 이메일 링크에 들어있는 값 읽기 const { searchParams } = new URL(request.url); - // ========== 파라미터 추출 ========== + // token_hash: 인증에 필요한 값 + // type: 어떤 인증인지 구분 (예: 가입, 비밀번호 재설정) const tokenHash = searchParams.get("token_hash"); const type = searchParams.get("type") as EmailOtpType | null; - const rawNext = searchParams.get("next"); - // 보안: 외부 URL 리다이렉트 방지 (상대 경로만 허용) - const nextPath = rawNext?.startsWith("/") ? rawNext : "/"; + // redirect_to/next: 인증 후에 이동할 주소 + const rawRedirect = + searchParams.get("redirect_to") ?? searchParams.get("next"); - // ========== 토큰 검증 ========== + // 보안상 우리 사이트 안 경로(`/...`)만 허용 + const safeRedirect = + rawRedirect && rawRedirect.startsWith("/") ? rawRedirect : null; + + // 일반 인증이 끝난 뒤 이동할 경로 + const nextPath = safeRedirect ?? AUTH_ROUTES.HOME; + // 비밀번호 재설정일 때 이동할 경로 + const recoveryPath = safeRedirect ?? RESET_PASSWORD_PATH; + + // 필수 값이 없으면 로그인으로 보내고 에러를 보여줌 if (!tokenHash || !type) { - return redirectWithError(AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK); + return redirectWithError(request, AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK); } + // 2) Supabase에게 "이 링크가 맞는지" 확인 요청 const supabase = await createClient(); const { error } = await supabase.auth.verifyOtp({ type, token_hash: tokenHash, }); + // 확인 실패 시 이유를 알기 쉬운 메시지로 보여줌 if (error) { - console.error("[Auth Confirm] verifyOtp 실패:", error.message); - return redirectWithError(AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK); + console.error("[Auth Confirm] verifyOtp error:", error.message); + const message = getAuthErrorMessage(error); + return redirectWithError(request, message); } - // ========== 검증 성공 - 적절한 페이지로 리다이렉트 ========== + // 3) 비밀번호 재설정이면 재설정 페이지로 보내고 쿠키를 저장 if (type === "recovery") { - redirect(RESET_PASSWORD_PATH); + const response = NextResponse.redirect(new URL(recoveryPath, request.url)); + response.cookies.set(RECOVERY_COOKIE_NAME, "1", { + httpOnly: true, + sameSite: "lax", + secure: process.env.NODE_ENV === "production", + maxAge: RECOVERY_COOKIE_MAX_AGE_SECONDS, + path: "/", + }); + return response; } - redirect(nextPath); + // 4) 그 외 인증은 기본 경로로 이동 + return NextResponse.redirect(new URL(nextPath, request.url)); } -// ======================================== -// 헬퍼 함수 -// ======================================== - -/** - * 에러 메시지와 함께 로그인 페이지로 리다이렉트 - */ -function redirectWithError(message: string): never { +// 로그인 페이지로 보내면서 에러 메시지를 함께 전달 +function redirectWithError(request: NextRequest, message: string) { const encodedMessage = encodeURIComponent(message); - redirect(`${LOGIN_PATH}?message=${encodedMessage}`); + return NextResponse.redirect( + new URL(`${LOGIN_PATH}?message=${encodedMessage}`, request.url), + ); } diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx index e111adc..e439111 100644 --- a/app/forgot-password/page.tsx +++ b/app/forgot-password/page.tsx @@ -1,4 +1,4 @@ -import FormMessage from "@/components/form-message"; +import FormMessage from "@/components/form-message"; import { requestPasswordReset } from "@/features/auth/actions"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -15,58 +15,46 @@ import Link from "next/link"; /** * [비밀번호 찾기 페이지] * - * 사용자가 이메일을 입력하면 비밀번호 재설정 링크를 이메일로 발송합니다. - * 로그인/회원가입 페이지와 동일한 디자인 시스템 사용 - * - * @param searchParams - URL 쿼리 파라미터 (에러 메시지 전달용) + * 사용자가 비밀번호를 잊어버렸을 때 재설정 링크를 요청하는 페이지입니다. + * - 이메일 입력 폼 제공 + * - 서버 액션(requestPasswordReset)과 연동 */ export default async function ForgotPasswordPage({ searchParams, }: { - searchParams: Promise<{ message: string }>; + searchParams: Promise<{ message?: string }>; }) { - // URL에서 메시지 파라미터 추출 const { message } = await searchParams; return (
- {/* ========== 배경 그라디언트 ========== */}
- {/* ========== 애니메이션 블러 효과 ========== */}
- {/* ========== 메인 콘텐츠 ========== */}
- {/* 에러/성공 메시지 */} - + {message && } - {/* ========== 비밀번호 찾기 카드 ========== */} - {/* 아이콘 */}
- 🔑 + MAIL
- {/* 페이지 제목 */} - 비밀번호 찾기 + 비밀번호 재설정 - {/* 페이지 설명 */} - 가입하신 이메일 주소를 입력하시면 + 가입한 이메일 주소를 입력하시면 비밀번호 재설정 링크를 + 보내드립니다.
- 비밀번호 재설정 링크를 보내드립니다. + 메일을 받지 못하셨다면 스팸함을 확인해 주세요. - {/* ========== 폼 영역 ========== */} - {/* 비밀번호 재설정 요청 폼 */}
- {/* ========== 이메일 입력 필드 ========== */}
- {/* ========== 재설정 링크 발송 버튼 ========== */}