Creating cookie in API route handler

[amirmasoodi]

I use the app router, and I call API routes with built-in fetch (including credentials). I want to create a cookie for access token in authentication logic. The problem is the cookie isn't created in the POST handler (I use NextResponse to return a json response, and I use the cookies() function to handle cookies). I wrote a logic for creating cookies in the GET handler and when I called in the browser it created a cookie, so I found out this issue comes by the POST handler and fetch, but I don't know what it is!

[icyJoseph]

Did you specify a SameSite option for your cookie? Try to make it strict, or lax, IIRC chrome has some issue with cookies SameSite none, and POST requests.... but it was for redirects I think, not post request, anyway try it.

I'd like to see how you set cookie, some pseudo-code, and also, in the devTools, of your browser, when the POST request arrives, you should be able to see the Set-Cookie header on the response, does that have values you expect?

[amirmasoodi]

I should add that I created a custom http function as a server action. Here is the code :

'use server';

// Custom HTTP Function
export default async function http(method, url, data = null, customHeaders = {}) {

    // Convert Method To Upper Case
    method = method.toUpperCase();

    // Send Request
    const response = await fetch(url, {
        method,
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            ...customHeaders
        },
        ...(data && {
            body: JSON.stringify(data)
        }),
        credentials: 'include'
    });

    // Return Response
    return await response.json();

}

I use this function in server components & client components to call my API routes.

Here is my POST handler code, which contains the way I create cookies.

// imports ...

export default async function POST(req) {

    /**
     * 
     * Login Logics ...
     * 
     */

    // Set Access Token Cookie
    (await cookies()).set('token', token, {
        maxAge: 2 * 60 * 60,
        sameSite: 'lax',
        httpOnly: true,
        secure: process.env.APP_DEBUG === 'false',
        path: '/',
    });

    // Show Success
    return NextResponse.json({
        statusCode: 200,
        payload: {
            message: 'Logged In !',
        },
    }, { status: 200 });

}

Unfortunately I cannot run my project right now to check out the response headers

[icyJoseph]

Right, here you have two different HTTP requests. Within your server action, you have scope to set the cookie back to the browser, however, you "fork", a new HTTP request, to your API route/Router handler, where you set cookies, but that'd be setting the cookies on the request that was forked, not the request that started from the browser.

You are just collecting the json body payload, of the forked request, dropping the Set-Cookie header it might have had, and terminating the request. You'd need to collect the Set-Cookie from the forked response, and the append that to what you send down... or, could you... just do this?

⚠️⚠️⚠️ Not Recommended, this will make TS fight you ⚠️⚠️
    // Send Request
    return fetch(/* stuff */);

No, TS will give you a nightmare, trying to work with useActionState and such, don't do that.

[icyJoseph]

Something like this:

"use server";
import { cookies } from "next/headers";
import setCookieParser from "set-cookie-parser";

export async function fork() {
  const response = await fetch("http://localhost:3009/api/foo", {
    method: "POST",
  });

  const data = await response.json();

  const store = await cookies();

  setCookieParser(response.headers.getSetCookie()).forEach((cookie) => {
    store.set({ ...cookie, sameSite: "strict" });
  });

  return data;
}

Used set-cookie-parser, with @types/set-cookie-parser as well, there was some issue with the sameSite typing 🤷

[icyJoseph]

Or, maybe you don't need that extra jump to the API endpoint, you are already on the server within that server action, why not do everything there. You'll save up an HTTP jump out to the internet and back.

[amirmasoodi]

Well, initially, I implemented all my logic as server actions. I created a custom session class and structured my app to function as a full-stack application. However, I encountered multiple issues. First, I don’t know how to cache server action calls (which I think is happening because I’m a newbie in Next.js). Second, all my protected routes (which require authentication) became dynamic because my session system relies on cookies, and the cookies() function is inherently dynamic.