Next.js Discord

Discord Forum

Setting cookies from external API fetch in Server Action

Unanswered
Pixiebob posted this in #help-forum
Open in Discord
PixiebobOP
Hi, I'm new the the App router and I'm trying to grasp how to setup authentication with an external API. After a thorough read of the docs, I can't seem to figure out what is the "right" way to accomplish this.

## My problem:
I have a form, which is a Server Component. From this form I am calling a Server Action that is called login.
In the login action, I call the authentication endpoint using fetch. The resulting response contains a Set-Cookie header containing a session cookie. This cookie should be saved to the browser to be used in subsequent API calls.

## What I have tried so far
1. Parsing the Set-Cookie Response header, and setting the cookie manually with the cookie function from next/headers. This works but it feels over-complicated.
2. Creating some kind of middleware with a Route Handler. But from my understanding it doesn't help in this situation because, in the end, it is still called from the server. Also, an additional network call will occur.

## What I think I should do
After these attempts I am under the impression that I should call the login endpoint directly from the client and not do it from a Server Action? Am I correct in this assessment?

Any help appreciated, thanks!

17 Replies

PixiebobOP
Here is my code that works but that seems over-complicated:

function parseSetCookieHeader(cookies: string[]): ParsedSetCookieHeader {
  // Parsing the `Set-Cookie` headers
}

async function proxyCookies(headers: Headers) {
  const cookieStore = await cookies();
  const setCookieHeader = headers.getSetCookie();
  const parsedCookieHeaders = parseSetCookieHeader(setCookieHeader);
  for (const { key, value, options } of parsedCookieHeaders) {
    cookieStore.set(key, value, options);
  }
}

async function fetchForwardCookies(url: string, options: RequestInit = {}) {
  const res = await fetch(url, {
    credentials: 'include',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    ...options,
  });
  await proxyCookies(res.headers);
  return res.json();
}

export async function login(formData: FormData) {
  const result = await fetchForwardCookies('https://example.com/login', {
    method: 'POST',
    body: JSON.stringify({
      login: formData.get('login'),
      password: formData.get('password'),
    }),
  });
}
PixiebobOP
Anyone?
PixiebobOP
bump
Great Spotted Woodpecker
Did you see this example? I used this to do my authentication
https://nextjs.org/learn/dashboard-app/adding-authentication
PixiebobOP
Hi, thanks for your answer. Yes I have seen this document but I'm not using NextAuth, I'm more interested in understanding the fundamentals in order to implement my solution.
Thanks anyway, I'm starting to have a clearer picture of the whole Middleware / Server Actions/ Server vs Client Components concepts.
Large oak-apple gall
@Pixiebob , did u found some solution to hendle cookie on server components?
PixiebobOP
Hey @Large oak-apple gall, you want to pass the cookies from a server-side fetch to the client right?
I used the solution above, I can share the parseSetCookieHeader function if you want, or you can fetch directly from the client
Large oak-apple gall
Nops, my problem is with the session cookie. If it's expired i can't remove the cookie during SSR without having an API proxy to call my API
PixiebobOP
So the session is potentially expired and your API response should remove the cookie from the browser?
If I understood correctly, maybe you should do it with the middleware, difficult to say without an example
@Large oak-apple gall Nops, my problem is with the session cookie. If it's expired i can't remove the cookie during SSR without having an API proxy to call my API
LuisLl
Yes you can’t do that on the server while rendering the page, to delete cookies you need to do it inside Server actions or Route Handlers
PixiebobOP
Or refresh the session in the middleware and redirect to the login if it's expired I guess
Large oak-apple gall
Yes, if I perform a GET request from the browser (client-side) to check session, the cookies are removed correctly, but if I check the session through the page like e.g.:

export const getSession = cache(async () => {
  try {
    const response = await serverAPI
      .get('auth/sessions', {
        headers: await headers(),
      })
      .json<InitialSession>()
    return response
  } catch (error) {
    // I want to remove cookie here
  }
})


but the rendering of the page occurs on the server, and even when I set the request to include credentials, the cookies aren't removed. I know that cookies can only be removed via server actions or route handlers, and because of this, I made a proxy API call. All I want to know if there's some other approach to handle this.
in the middleware I only check if the session token exist
To avoid requests in middleware
PixiebobOP
What benefit would you get from fetching the session from the component versus middleware?