Next.js Discord

Discord Forum

Http only cookies with app router

Unanswered
Dan posted this in #help-forum
Open in Discord
Avatar
DanOP
I am using an external api that is sending back http only cookie for authentication. Is it possible to make use of these with server components / server actions?

Here is the login code:

"use server"

export async function serverSignIn(): Promise<ServerSignInResponse> {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: "test@test.com",
        password: "password",
      }),
      credentials: "include",
    }
  );

  if (!res.ok) {
    throw new Error(res.statusText);
  }

  return (await res.json()) as ServerSignInResponse;


When I try to access a protected route, I get unauthorized. In swagger though, it works fine.

25 Replies

Avatar
Ray
"use server"

import { headers } from 'next/headers'

export async function serverSignIn(): Promise<ServerSignInResponse> {

  const headers = new Headers(headers())
  headers.set("Accept", "application/json")
  headers.set("Content-Type", "application/json")

  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
    {
      method: "POST",
      headers,
      body: JSON.stringify({
        email: "test@test.com",
        password: "password",
      }),
      credentials: "include",
    }
  );

  if (!res.ok) {
    throw new Error(res.statusText);
  }

  return (await res.json()) as ServerSignInResponse;

try forwarding the header like this
Avatar
DanOP
Image
Avatar
Ray
oh change the name of the variable
"use server"

import { headers } from 'next/headers'

export async function serverSignIn(): Promise<ServerSignInResponse> {

  const newHeaders = new Headers(headers())
  newHeaders.set("Accept", "application/json")
  newHeaders.set("Content-Type", "application/json")

  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
    {
      method: "POST",
      headers: newHeaders,
      body: JSON.stringify({
        email: "test@test.com",
        password: "password",
      }),
      credentials: "include",
    }
  );

  if (!res.ok) {
    throw new Error(res.statusText);
  }

  return (await res.json()) as ServerSignInResponse;
Avatar
DanOP
Image
Here's a more descriptive error from the logs
Image
Avatar
Ray
add this line newHeaders.delete('Content-Length')
Avatar
DanOP
ok yea now it works "as expected". I get unauthorized when i try to access protected route. So still same as my original issue 😄
Avatar
Ray
how do you access the protected route?
Avatar
DanOP
I'm just wondering if it is possible because I haven't really seen any material about it

The solution I've tried that works is manually setting the cookie in the server action and then forwarding the cookie as a header to each request that is protected route
is that the only way? 🤔 seems odd way to go about it
Avatar
Ray
are you talking about the protected route of the external api?
Avatar
DanOP
yup
Avatar
Ray
are you fetching/accessing them on client side or server side?
if you access them on client side, all you need is set the cookies to the browser
Avatar
DanOP
server
Avatar
Ray
then you will need to forward the header like this
Avatar
DanOP
that still gives me 401 though?
Avatar
Ray
do you see the cookies begin set on the browser?
Avatar
DanOP
nope
Avatar
Ray
so its 401 lol
you need to authenticate with the external api then set the cookies
Avatar
DanOP
so basically this?
Avatar
Ray
yes
Avatar
DanOP
alright. Just wanted to make sure I'm on the right track here. Thanks
Avatar
Ray
no prob