I need to figure out how to send an HTTPOnly cookie using a fetch request in Next.js

Question

I need to figure out how to send an HTTPOnly cookie using a fetch request in Next.js

After finishing a comprehensive guide, I am now working on retrieving user details using a server component. However, even though the browser's cookie is there, it doesn't seem to be showing up in the request.

I decided to customize my profile page and convert it into a server component. However, after refreshing the page to start the fetch request, the token cookie is nowhere to be found. To confirm this, I included the following lines of code within the route handler:

const token = request.cookies.get("token")?.value || "";
console.log(token, "token");

javascript next.js cookies next.js13 httponly

Answer 1

Answer №1

If you're working with NextJS, it's recommended to utilize the cookies-next library https://www.npmjs.com/package/cookies-next

Give this a try:

setCookie('cookie_name', cookie_value, { httpOnly: true })

For fetch requests,

useEffect(() => {
    const setCookie = async () => {
      try {
        const response = await fetch('/api/set-cookie', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ cookieName: 'myCookie', cookieValue: 'cookieValue' })
        });

        if (response.ok) {
          console.log('Cookie set successfully');
        } else {
          console.error('Failed to set cookie');
        }
      } catch (error) {
        console.error('Error setting cookie:', error);
      }
    };

    setCookie();
  }, []);

If you prefer not to use a library:

const [cookies, setCookie] = useCookies(['token']);

  useEffect(() => {
    // Assuming 'token' is retrieved from somewhere
    const token = 'your_token_value';

    // Setting the 'token' cookie with the provided value and options
    setCookie('token', token, {
      httpOnly: true,
    });
  }, []);

Answer 2

If you're working with NextJS, it's recommended to utilize the cookies-next library https://www.npmjs.com/package/cookies-next

Give this a try:

setCookie('cookie_name', cookie_value, { httpOnly: true })

For fetch requests,

useEffect(() => {
    const setCookie = async () => {
      try {
        const response = await fetch('/api/set-cookie', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ cookieName: 'myCookie', cookieValue: 'cookieValue' })
        });

        if (response.ok) {
          console.log('Cookie set successfully');
        } else {
          console.error('Failed to set cookie');
        }
      } catch (error) {
        console.error('Error setting cookie:', error);
      }
    };

    setCookie();
  }, []);

If you prefer not to use a library:

const [cookies, setCookie] = useCookies(['token']);

  useEffect(() => {
    // Assuming 'token' is retrieved from somewhere
    const token = 'your_token_value';

    // Setting the 'token' cookie with the provided value and options
    setCookie('token', token, {
      httpOnly: true,
    });
  }, []);

I need to figure out how to send an HTTPOnly cookie using a fetch request in Next.js

Answer №1

Similar questions

Utilizing a Function's Return Value as a State in React - A Comprehensive Guide

Adding tween.js seems to have caused the button click event to stop triggering

What's the deal with integrating Supabase sessions into NextJS SSR/SGR?

Can integers be used as keys in a JavaScript object's storage?

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Providing dynamic string outputs depending on the current date using AngularJS

how can I include an AngularJS variable as a parameter in an onclick function?

Having trouble with Nextjs API Integration - encountering error 404

Enhance JQuery functionality using Typescript

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Utilizing Axios: Maintaining session continuity post successful authorization and including it in subsequent requests - testing in a browser-less environment

Troubleshooting: Custom JQuery function not functioning as expected

jqGrid is throwing an error: undefined is not recognized as a function

Finding mongoose in an array of objects nested within another object

Choosing specific rows in a kogrid by clicking on a button within a column

Having trouble with Angular minification not properly updating templates?

What is the best way to make changes to the DOM when the state undergoes a

Using Vue along with bootstrap-vue: Ensuring only one list element is expanded in a list (v-for) at any given time

Error message: JavaScript is unable to save data to an array retrieved from Ajax, resulting in

Next.js is currently unable to locate the requested page - Error 404: Page Not Found