@ Using NextJS 13.3 with App Dir and API Routes.
I am currently working on implementing an authentication system using NextJS with my external NodeJS backend. The process involves the frontend sending credentials to the backend, which validates them and returns an accessToken and refreshToken. NextJS then creates a new JWT and encodes the user information, token, and refreshToken received from the backend.
For session validation, the middleware fetches the API route in NextJS, decodes the JWT to check if the accessToken from the backend is valid. If it has expired, the middleware attempts to refresh a new accessToken using the refreshToken. Once the new accessToken is received, the API sets the cookies and returns success=true. If the success is true, the middleware proceeds; if false, it redirects to the login page.
While this setup is functioning smoothly, there is a problem that needs addressing. When the backend sends the new accessToken to NextJS, the nextjs API sets the cookies, but it appears that the cookies are set only after the middleware response. As a result, when a user visits the page after refreshing the token, they encounter a forbidden error because the old cookie is still in use. A subsequent page refresh brings the new cookies along.
I would appreciate any assistance in resolving this issue and identifying where I might be going wrong.
Middleware:
import { NextResponse } from 'next/server';
import conf from '@/config/conf';
export async function middleware(request) {
const accessToken = request.cookies.get('accessToken')?.value;
const verifySessionResponse = await fetch(`${conf.BASE_URL}/proxy/auth/verify-session`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ accessToken: accessToken })
});
const json = await verifySessionResponse.json();
if (!json.success) {
return NextResponse.rewrite(new URL('/auth/login', request.url))
}
return NextResponse.next(verifySessionResponse);
}
export const config = {
matcher: '/dashboard/:path*'
}
Route API:
import conf from '@/config/conf';
import jwt from 'jsonwebtoken';
export async function POST(request) {
const { accessToken } = await request.json();
// Rest of the code...
}
I have exhausted all my options and efforts. All I want is for the API to set the cookies after receiving the new token and then continue uninterrupted.