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
@Dan 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: javascript "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.
Avatar
"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
@Dan Click to see attachment
Avatar
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
@Dan Here's a more descriptive error from the logs
Avatar
add this line newHeaders.delete('Content-Length')
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
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
are you talking about the protected route of the external api?
Avatar
DanOP
yup
Avatar
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
DanOP
that still gives me 401 though?
Avatar
@Dan that still gives me 401 though?
Avatar
do you see the cookies begin set on the browser?
Avatar
DanOP
nope
Avatar
so its 401 lol
you need to authenticate with the external api then set the cookies
Avatar
yes
Avatar
DanOP
alright. Just wanted to make sure I'm on the right track here. Thanks