From 4e16e1b0f5faaa7fc01f615889e3cafed9905541 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:45:43 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20authToken=20=ED=81=B4=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EC=96=B8=ED=8A=B8=20=EC=BF=A0=ED=82=A4=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EC=BF=A0=ED=82=A4=EB=A1=9C=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 서버 컴포넌트에서 관리함으로서 클라이언트 환경에서 접근 못하게하기 위함 --- src/app/api/myfetch/index.ts | 10 ++++++---- src/app/layout.tsx | 10 ++++++++-- src/auth.ts | 10 +++++++++- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/app/api/myfetch/index.ts b/src/app/api/myfetch/index.ts index 7e5552d..dd2f0cc 100644 --- a/src/app/api/myfetch/index.ts +++ b/src/app/api/myfetch/index.ts @@ -1,4 +1,4 @@ -import { getAccessToken } from "@/libs" +import { useAuthStore } from "@/store/auth" import customFetch from "./customFetch" @@ -13,10 +13,12 @@ export const myFetch = customFetch({ request: async ([url, options], fetch) => { // 요청 인터셉터 로직 추가 (예: 로깅, 인증 토큰 추가) // console.log("Request Interceptor:", url, options) - const token = getAccessToken() - if (token && options) { + + const { accessToken } = useAuthStore.getState() + + if (accessToken && options) { const headers = new Headers(options.headers || {}) - headers.set("Authorization", `Bearer ${token}`) + headers.set("Authorization", `Bearer ${accessToken}`) options.headers = headers } return [url, options] diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b33de47..28cd6e5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,15 @@ import "@/styles/main.css" import type { Metadata } from "next" +import { cookies } from "next/headers" import ErrorHandlingWrapper from "@/common/ErrorHandlingWrapper" import NextAuthProvider from "@/common/NextAuthProvider" import { QueryProviders } from "@/common/QueryProviders" +import { ACCESS_TOKEN_KEY } from "@/constants" import { pretendard } from "@/font" -import AlertContainer from "@/store/AlertContext" +import { AlertProvider } from "@/store/alert" +import { AuthProvider } from "@/store/auth" export const metadata: Metadata = { title: "마푸-네컷사진 전용 앨범", @@ -41,13 +44,16 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode }>) { + const accessToken = cookies().get(ACCESS_TOKEN_KEY)?.value || null + return ( - + + {children} diff --git a/src/auth.ts b/src/auth.ts index 420e977..4668915 100644 --- a/src/auth.ts +++ b/src/auth.ts @@ -5,6 +5,8 @@ import KakaoProvider from "next-auth/providers/kakao" import { authLogin } from "@/app/api/signIn" import { ACCESS_TOKEN_KEY } from "@/constants" +import { useAuthStore } from "./store/auth" + export const { handlers: { GET, POST }, auth, @@ -26,7 +28,12 @@ export const { if (account?.access_token) { const authResponse = await authLogin(account.access_token) - cookies().set(ACCESS_TOKEN_KEY, authResponse.accessToken) + cookies().set(ACCESS_TOKEN_KEY, authResponse.accessToken, { + httpOnly: true, + sameSite: "lax", + path: "/", + maxAge: 30 * 24 * 60 * 60, // 30일 + }) const updatedAccount = { ...account, @@ -58,6 +65,7 @@ export const { events: { signOut() { cookies().delete(ACCESS_TOKEN_KEY) + useAuthStore.getState().clearAuth() return }, },