Http only cookies with app router

Unanswered

Dan posted this in #help-forum

2024-02-02T20:24:20.000Z

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

@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.

Ray

2024-02-02T20:32:11.000Z

"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

@Ray ts "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

DanOP

2024-02-02T20:42:53.000Z

@Dan Click to see attachment

Ray

2024-02-02T20:47:53.000Z

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;

@Ray oh change the name of the variable ts "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;

DanOP

2024-02-02T20:51:35.000Z

Here's a more descriptive error from the logs

@Dan Here's a more descriptive error from the logs

Ray

2024-02-02T20:55:53.000Z

add this line newHeaders.delete('Content-Length')

@Ray add this line `newHeaders.delete('Content-Length')`

DanOP

2024-02-02T20:57:28.000Z

ok yea now it works "as expected". I get unauthorized when i try to access protected route. So still same as my original issue ðŸ˜„

@Dan ok yea now it works "as expected". I get unauthorized when i try to access protected route. So still same as my original issue ðŸ˜„

Ray

2024-02-02T20:57:59.000Z

how do you access the protected route?

DanOP

2024-02-02T20:59:23.000Z

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

Ray

2024-02-02T21:00:04.000Z

are you talking about the protected route of the external api?

DanOP

2024-02-02T21:00:07.000Z

yup

Ray

2024-02-02T21:00:28.000Z

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

DanOP