feat: authToken 클라이언트 쿠키에서 서버 쿠키로 상태 변경

서버 컴포넌트에서 관리함으로서 클라이언트 환경에서 접근 못하게하기 위함
YAPP-Github · Aug 11, 2024 · 4e16e1b · 4e16e1b
1 parent 84b74cb
commit 4e16e1b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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 (
     <html lang="ko" className={`${pretendard}`}>
       <body className={pretendard.className}>
         <NextAuthProvider>
           <QueryProviders>
             <ErrorHandlingWrapper>
-              <AlertContainer />
+              <AlertProvider />
+              <AuthProvider accessToken={accessToken} />
               {children}
             </ErrorHandlingWrapper>
           </QueryProviders>

diff --git 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
     },
   },