How to send cookies and headers in app dir

Hello. I have an index page in the pages directory. I want to do the same thing but using the app dir

const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
  const { data } = useSwr(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
    fetcher,
    { fallbackData }
  );

  if (data) {
    return <div>Welcome! {JSON.stringify(data.name)}</div>;
  }

  return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log({ header: context.req.headers });

  const data = await fetcher(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
      ...context.req.headers,
    }
  );
  return { props: { fallbackData: data } };
};

const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
  const { data } = useSwr(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
    fetcher,
    { fallbackData }
  );

  if (data) {
    return <div>Welcome! {JSON.stringify(data.name)}</div>;
  }

  return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log({ header: context.req.headers });

  const data = await fetcher(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
      ...context.req.headers,
    }
  );
  return { props: { fallbackData: data } };
};

Basically, I'm sending a request to an express server. Which verifies the user using their access/refresh token gotten from the request cookies/header. I want to do the same in in appdir. I tried this:

async function getUser(){
  const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
  //@ts-ignore
  return data | "no-data"
}

export default async function Home() {
  const data = await getUser()
  return (
    <p>Welcome {data.name}</p>
  )
}

async function getUser(){
  const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
  //@ts-ignore
  return data | "no-data"
}

export default async function Home() {
  const data = await getUser()
  return (
    <p>Welcome {data.name}</p>
  )
}

But it doesn't send the cookies/headers to the server. For context. fetcher is just an axios call to get data

import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
  try {
    const { data } = await axios.get<T>(url, {
      headers,
      withCredentials: true,
    });

    return data;
  } catch (e) {
    return null;
  }
};

export default fetcher;

import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
  try {
    const { data } = await axios.get<T>(url, {
      headers,
      withCredentials: true,
    });

    return data;
  } catch (e) {
    return null;
  }
};

export default fetcher;

3 Replies

cornflour•2y ago

from my understanding, you are trying to take the header sent from the client to send to the remote server. If so, you can use the cookies() and headers() methods from next/headers to get cookies and headers respectively

import { cookies, headers } from 'next/headers'
const Home = async () => {
  const myCookie = cookies().get('my-cookie-key')
  const headers = headers()
  const response = await getUser(myCookies, headers) // do whatever here
  return <>...</>
}

import { cookies, headers } from 'next/headers'
const Home = async () => {
  const myCookie = cookies().get('my-cookie-key')
  const headers = headers()
  const response = await getUser(myCookies, headers) // do whatever here
  return <>...</>
}

ComplexlityOP•2y ago

Not exactly. So I could access the headers in the getUser function. My issue now is, I'm trying to send a fetch request to my express server with the headers. But when I send the fetch request, I doesn't have the headers for some reason

async function getUser() {
  const headersList = headers()
  console.log(headersList)

  const url = `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`;
  const data = await fetch(url, {
    headersList,
    credentials: 'include'
  })
  //@ts-ignore
  return data | "no-data"
}

async function getUser() {
  const headersList = headers()
  console.log(headersList)

  const url = `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`;
  const data = await fetch(url, {
    headersList,
    credentials: 'include'
  })
  //@ts-ignore
  return data | "no-data"
}

ComplexlityOP•2y ago

I found out the solution

Gaming

Programming

How to send cookies and headers in app dir