fix: modify jwt refresh logic

frontend/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  reactStrictMode: process.env !== 'production',
   env: {
     NEXTAUTH_URL: process.env.NEXTAUTH_URL
   }

frontend/src/app/(public)/login/_components/LoginForm.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input'
 import { LoginFormSchema } from '@/lib/forms'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { signIn } from 'next-auth/react'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
@@ -22,6 +22,7 @@ import type { z } from 'zod'
 export default function LoginForm() {
   const [isFetching, setIsFetching] = useState(false)
   const router = useRouter()
+  const searchParams = useSearchParams()
 
   const form = useForm<z.infer<typeof LoginFormSchema>>({
     resolver: zodResolver(LoginFormSchema),
@@ -40,7 +41,7 @@ export default function LoginForm() {
       })
 
       if (!res?.error) {
-        router.push('/')
+        router.replace(searchParams.get('callbackUrl') ?? '/console/dashboard')
       } else {
         toast.error('로그인 실패')
       }

frontend/src/app/error.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { useRouter } from 'next/navigation'
+
+interface Props {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error }: Props) {
+  const router = useRouter()
+
+  return (
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center gap-3 py-12">
+      <p className="mt-8 text-2xl font-extrabold">Something Went Wrong!</p>
+      <p className="mb-4 max-w-[36rem] text-lg font-semibold">
+        {error.message || 'Unknown Error'}
+      </p>
+      <Button variant="outline" onClick={router.refresh}>
+        Reload
+      </Button>
+    </div>
+  )
+}

frontend/src/lib/auth.ts

@@ -18,8 +18,8 @@ const getAuthToken = (res: Response) => {
   return {
     accessToken: Authorization,
     refreshToken,
-    accessTokenExpires: Date.now() + ACCESS_TOKEN_EXPIRE_TIME - 30 * 1000, // 29 minutes 30 seconds
-    refreshTokenExpires: Date.parse(refreshTokenExpires) - 30 * 1000 // 23 hours 59 minutes 30 seconds
+    accessTokenExpires: Date.now() + ACCESS_TOKEN_EXPIRE_TIME - 30 * 1000,
+    refreshTokenExpires: Date.parse(refreshTokenExpires) - 30 * 1000
   }
 }
 
@@ -75,7 +75,7 @@ export const authOptions: NextAuthOptions = {
   ],
   session: {
     strategy: 'jwt',
-    maxAge: 24 * 60 * 60 // 24 hours
+    maxAge: 7 * 24 * 60 * 60
   },
   callbacks: {
     jwt: async ({ token, user }: { token: JWT; user?: User }) => {
@@ -86,6 +86,32 @@ export const authOptions: NextAuthOptions = {
         token.refreshToken = user.refreshToken
         token.accessTokenExpires = user.accessTokenExpires
         token.refreshTokenExpires = user.refreshTokenExpires
+      } else if (token.accessTokenExpires <= Date.now()) {
+        const reissueRes = await fetch(API_BASE_URL + '/auth/reissue', {
+          headers: {
+            cookie: `refresh_token=${token.refreshToken}`
+          },
+          cache: 'no-store'
+        })
+
+        if (reissueRes.ok) {
+          const {
+            accessToken,
+            refreshToken,
+            accessTokenExpires,
+            refreshTokenExpires
+          } = getAuthToken(reissueRes)
+
+          token.accessToken = accessToken
+          token.refreshToken = refreshToken
+          token.accessTokenExpires = accessTokenExpires
+          token.refreshTokenExpires = refreshTokenExpires
+        } else {
+          return {
+            ...token,
+            error: 'RefreshAccessTokenError'
+          }
+        }
       }
       return token
     },
@@ -100,8 +126,12 @@ export const authOptions: NextAuthOptions = {
         accessTokenExpires: token.accessTokenExpires,
         refreshTokenExpires: token.refreshTokenExpires
       }
+      session.error = token.error
       return session
     }
+  },
+  pages: {
+    signIn: '/login'
   }
 }
 

frontend/src/lib/fetcher.ts

@@ -44,7 +44,7 @@ const fetcher = {
     if (!response.ok) {
       if (response.status === HttpStatus.UNAUTHORIZED && !retry) {
         const session = await auth()
-        if (session) {
+        if (session && !session.error) {
           // retry request
           return this.customFetch<T>(url, method, body, cache, true)
         }

frontend/src/middleware.ts

@@ -1,82 +1,9 @@
-import { ACCESS_TOKEN_EXPIRE_TIME, API_BASE_URL } from '@/lib/vars'
-import { encode, getToken } from 'next-auth/jwt'
-import { parseCookie } from 'next/dist/compiled/@edge-runtime/cookies'
-import { NextResponse, type NextRequest } from 'next/server'
+import { withAuth } from 'next-auth/middleware'
 
-const getAuthToken = (res: Response) => {
-  const Authorization = res.headers.get('authorization') as string
-  const parsedCookie = parseCookie(res.headers.get('set-cookie') || '')
-  const refreshToken = parsedCookie.get('refresh_token') as string
-  const refreshTokenExpires = parsedCookie.get('Expires') as string
-  return {
-    accessToken: Authorization,
-    refreshToken,
-    accessTokenExpires: Date.now() + ACCESS_TOKEN_EXPIRE_TIME - 30 * 1000,
-    refreshTokenExpires: Date.parse(refreshTokenExpires) - 30 * 1000
+export default withAuth({
+  pages: {
+    signIn: '/login'
   }
-}
+})
 
-const sessionCookieName = process.env.NEXTAUTH_URL?.startsWith('https://')
-  ? '__Secure-next-auth.session-token'
-  : 'next-auth.session-token'
-
-export const middleware = async (req: NextRequest) => {
-  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET })
-  if (req.nextUrl.pathname.startsWith('/console') && !token)
-    return NextResponse.redirect(new URL('/', req.url))
-
-  if (token && token.accessTokenExpires <= Date.now()) {
-    const reissueRes = await fetch(API_BASE_URL + '/auth/reissue', {
-      headers: {
-        cookie: `refresh_token=${token.refreshToken}`
-      },
-      cache: 'no-store'
-    })
-    if (reissueRes.ok) {
-      const {
-        accessToken,
-        refreshToken,
-        accessTokenExpires,
-        refreshTokenExpires
-      } = getAuthToken(reissueRes)
-      const newToken = await encode({
-        secret: process.env.NEXTAUTH_SECRET as string,
-        token: {
-          ...token,
-          accessToken,
-          refreshToken,
-          accessTokenExpires,
-          refreshTokenExpires
-        },
-        maxAge: 24 * 60 * 60 // 24 hours
-      })
-      req.cookies.set(sessionCookieName, newToken)
-      const res = NextResponse.next({
-        request: {
-          headers: req.headers
-        }
-      })
-      res.cookies.set(sessionCookieName, newToken, {
-        maxAge: 24 * 60 * 60,
-        secure: process.env.NODE_ENV === 'production',
-        httpOnly: true,
-        sameSite: 'lax'
-      })
-      return res
-    } else if (reissueRes.status == 401) {
-      req.cookies.delete(sessionCookieName)
-      const res = NextResponse.next({
-        request: {
-          headers: req.headers
-        }
-      })
-      res.cookies.delete(sessionCookieName)
-      return res
-    }
-  }
-  return NextResponse.next({
-    request: {
-      headers: req.headers
-    }
-  })
-}
+export const config = { matcher: ['/console/:path*'] }

frontend/src/types/next-auth.d.ts

@@ -10,13 +10,15 @@ interface Token {
   refreshToken: string
   accessTokenExpires: number
   refreshTokenExpires: number
+  error?: string
 }
 
 declare module 'next-auth' {
   interface User extends DefaultUser, UserData, Token {}
   interface Session extends DefaultSession {
     user: UserData
     token: Token
+    error?: string
   }
 }