JWT Authentication with cookies NestJS (App Router)

In the project, we have NestJS backend and NextJS frameworks for the frontend part.
Backend logic:

1. set auth-cookie as httpOnly cookies after the authentication request.
2. check for the auth-cookie for a Guarded request.

The backend part works fine and has been tested using Postman (localhost:4000). We implemented endpoints to be able to call locally on the same port as NextJS with the help of proxy server logic there (localhost:3000/api for backend calls).

For example, now we can make auth POST on http://localhost:3000/api/login to the same NextJS server instead of accessing the backend server from the client app. We expect cookies to be set right after NextJS server will receive response from POST localhost:4000/auth/login. So that a client is not related to the backend directly.

How to store these cookies on client side or reuse them for future?

src\app\api\login\route.ts

import { _POST } from "@/providers/POST";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest, response: NextResponse) {
  return _POST(request, "/auth/login");
}

This is the route for :3000/api/login with email + password credentials.

src\providers\POST.ts

import axios from "axios";
import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

export const _POST = async (request: NextRequest, url: string) => {
    /* 
        some configs 
    */
    
    let config = {
      method: "post",
      maxBodyLength: Infinity,
      url: backendURL + url,
      headers: {
        "Content-Type": "application/json",
     },
      data: data,
    };
    return axios
      .request(config)
      .then((response) => {
        const cookieStore = cookies();
        const tokenCookie = cookieStore.get("auth-cookie");
        console.log("tokenCookie", tokenCookie); // tokenCookie undefined
        console.log(JSON.stringify(response.data)); // successful authorization
        return NextResponse.json(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
};

Not sure how you are setting the Set-Cookie response header but this may be due to the Path attribute not being configured.

Have you tried this?

It would look something like this after a successful login on the server:

return new Response('Success', {
 status: 200,
 headers: {
  'Set-Cookie': `token=${YOUR_TOKEN}; HttpOnly; Path=/`,
 },
})

Hope this helps.