[#119] ✨ 로그인 미들웨어 생성 (토큰 재발급 및 권한 설정) (#124)

* [#119] ♻️ change refreshToken maxAge

* [#119] ✨ create middleware

* [#119] 🗑️ remove axios

* [#119] 🗑️ remove auth api

* [#119] ✨ create middleware for refreshToken

* [#119] ♻️ change backend_api -> backend_base_url

* [#119] 🚚 change middleware location

* [#119] 🗑️ remove `auth.ts` file

---------

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

Author: yellowjang

package.json

@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
-    "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "next": "^15.0.2",
     "react": "^18.3.1",
@@ -82,7 +81,5 @@
     "overrides": {
       "@types/node": "22.9.0"
     }
-  },
-  "name": "",
-  "version": ""
+  }
 }

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

@@ -0,0 +1,7 @@
+export default function protectedPage() {
+  return (
+    <>
+      <div>인증되어야만 접근 가능한 페이지</div>
+    </>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server'
+
+const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL
+
+export const POST = async (req: Request): Promise<NextResponse> => {
+  const { refreshToken } = await req.json()
+
+  try {
+    const response = await fetch(`${BACKEND_BASE_URL}/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken }),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      return NextResponse.json(
+        {
+          success: false,
+          message: errorData.message || 'Token refresh failed',
+        },
+        { status: response.status }
+      )
+    }
+
+    const { accessToken } = await response.json()
+
+    return NextResponse.json({ success: true, accessToken })
+  } catch (error: any) {
+    console.error('Token refresh error:', error)
+    return NextResponse.json(
+      { success: false, message: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

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

@@ -1,8 +1,10 @@
 import { NextResponse } from 'next/server'
 
+const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL
+
 export const POST = async (req: Request): Promise<NextResponse> => {
   const { email, password } = await req.json()
-  const response = await fetch('http://43.202.50.174:8080/v1/auth/sign-in', {
+  const response = await fetch(`${BACKEND_BASE_URL}/v1/auth/sign-in`, {
     headers: { 'Content-Type': 'application/json' },
     method: 'POST',
     body: JSON.stringify({ email, password }),
@@ -33,7 +35,7 @@ export const POST = async (req: Request): Promise<NextResponse> => {
     secure: true,
     sameSite: 'strict',
     path: '/',
-    maxAge: 86400,
+    maxAge: 1209600,
   })
 
   return res

src/middleware.ts

@@ -0,0 +1,55 @@
+import { type NextRequest, NextResponse } from 'next/server'
+
+console.log('Middleware is running')
+export const config = {
+  matcher: ['/protected/:path*'],
+  // 인증이 필요한 사이트
+}
+
+export async function middleware(req: NextRequest) {
+  console.log('Middleware is running')
+  console.log('Requested URL:', req.nextUrl.pathname)
+  console.log('Headers:', req.headers)
+  const cookies = req.headers.get('cookie')
+  const accessToken = cookies?.match(/accessToken=([^;]*)/)?.[1]
+  const refreshToken = cookies?.match(/refreshToken=([^;]*)/)?.[1]
+
+  if (!accessToken) {
+    console.log('Access Token is missing')
+    if (!refreshToken) {
+      console.log('Refresh Token is also missing. Redirecting to /sign-in')
+      return NextResponse.redirect(new URL('/sign-in', req.url))
+    }
+
+    try {
+      const refreshResponse = await fetch(`/api/auth/refresh`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ refreshToken }),
+      })
+
+      if (!refreshResponse.ok) {
+        console.error('Failed to refresh Access Token. Redirecting to /sign-in')
+        return NextResponse.redirect(new URL('/sign-in', req.url))
+      }
+
+      const { accessToken: newAccessToken } = await refreshResponse.json()
+
+      const res = NextResponse.next()
+      res.cookies.set('accessToken', newAccessToken, {
+        httpOnly: true,
+        secure: true,
+        sameSite: 'strict',
+        path: '/',
+        maxAge: 3600,
+      })
+      console.log('Access Token refreshed successfully')
+      return res
+    } catch (error) {
+      console.error('Middleware Error', error)
+      return NextResponse.redirect(new URL('/sign-in', req.url))
+    }
+  }
+  console.log('Access Token is valid. Keep going')
+  return NextResponse.next()
+}

src/services/auth/auth.ts

@@ -10,3 +10,4 @@ export const SignUp = async (data: SignUpRequest): Promise<Response> => {
     body: JSON.stringify(data),
   })
 }
+ 

tsconfig.json

@@ -24,6 +24,6 @@
     },
     "types": ["react", "jest", "node", "@storybook/react"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/middleware.ts"],
   "exclude": ["node_modules"]
 }