[#179] ✨ 미들웨어에서 토큰 갱신 (#190)

* [#179] 📦 install jsonwebtoken

* [#179] ✨ requestNewToken in middleware

* [#179] ♻️ refactor middleware

* [#179] 🐛 working on middleware token issue

* [#179] ♻️ refactor unused code

* [#179] ✨ add middleware deliver accessToken, refreshToken, and requestNewToken()

* [#179] ♻️ separate requestNewToken function

* [#179] ✨ add TokenApiResponse type

* [#179] ♻️ refactor and apply constants

* [#179] ♻️ delete duplicated code

* [#179] ♻️ change token expired time

---------

Co-authored-by: 장아영 <[email protected]>
Co-authored-by: KingNono1030 <[email protected]>

Author: 3 people

package.json

@@ -1,8 +1,10 @@
 {
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
+    "@types/jsonwebtoken": "^9.0.7",
     "clsx": "^2.1.1",
     "es-hangul": "^2.2.4",
+    "jsonwebtoken": "^9.0.2",
     "ky": "^1.7.2",
     "next": "^15.0.2",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+'use client'
+
 export default function protectedPage(): JSX.Element {
   return (
     <>

src/app/(pages)/protected/page.tsx

@@ -1,25 +1,48 @@
-import { NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 
+import { ApiResponse } from '@/types/api/ApiResponse.types'
+import { AccessTokenResponse } from '@/types/api/Auth.types'
 import { HTTPError } from 'ky'
 
 import { backendApi } from '@/services/api'
 
-export const POST = async (req: Request): Promise<NextResponse> => {
-  const { refreshToken } = await req.json()
+export const POST = async (req: NextRequest): Promise<NextResponse> => {
+  const body = await req.json()
+  const { oldAccessToken, refreshToken } = body
 
   try {
-    const { accessToken } = await backendApi
-      .post('refresh', { json: { refreshToken } })
-      .json<{ accessToken: string }>()
-    return NextResponse.json({ success: true, accessToken })
+    const {
+      result: { accessToken },
+    } = await backendApi
+      .post('v1/auth/new-token', {
+        json: { oldAccessToken, refreshToken },
+        headers: {
+          Authorization: `Bearer ${refreshToken}`, // 필요하다면 추가
+        },
+      })
+      .json<ApiResponse<AccessTokenResponse>>()
+
+    const res = NextResponse.json({ success: true, result: { accessToken } })
+
+    res.cookies.set('accessToken', accessToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 1800, // 30 minutes
+    })
+
+    console.log('새로운 토큰 갱신 성공')
+    console.log(accessToken)
+
+    return res // 성공 응답 반환
   } catch (error: unknown) {
-    console.error('토큰 갱신 에러:', error)
     if (error instanceof HTTPError) {
       const errorData = await error.response.json()
       return NextResponse.json(
         {
           success: false,
-          message: errorData.messassage || '토큰 갱신 실패',
+          message: errorData.message || '토큰 갱신 실패',
         },
         { status: error.response.status }
       )

src/app/api/auth/refresh/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server'
 
+import { ApiResponse } from '@/types/api/ApiResponse.types'
 import { SignInRequest, SignInResponse } from '@/types/api/Auth.types'
 import { HTTPError } from 'ky'
 

src/app/api/auth/sign-in/route.ts

@@ -0,0 +1,5 @@
+export const tokenBufferTime = 1 * 60 * 1000
+export const tokenExpiredTime = 2 * 60 * 1000
+
+export const middlewareBufferTime = 5 * 60
+export const middlewareExpiredTime = 60 * 60