CODEWITHSUNDEEP
javascriptreactjsnext.jscookiesnext.js13
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

Cookies Not Being Set in Production in Next.js App

I'm working on a Next.js application where I'm setting a cookie after a successful login. The cookie is supposed to store an authentication token. This works as expected in my local development environment, but when deployed to production, the cookie is not being set.

Here's the function I use to set the cookie:

import Cookies from 'js-cookie';

async function saveCookie(token) {
    Cookies.set('auth_token', token, {
        httpOnly: process.env.NODE_ENV !== 'development',
        expires: 60,
        secure: process.env.NODE_ENV !== 'development',
        sameSite: 'lax',
        path: '/',
    });
}

In production, the login functionality works, and the API returns a token as expected. However, the auth_token cookie does not appear in the browser's cookie storage.

Attached is a screenshot showing that the user is logged in (indicating the token is received), but the cookie is not visible in the browser's cookies.

enter image description here

I have deployed the frontend on Netlify with an environment variable NODE_ENV=production.

Why is the cookie not being set in the production environment, despite other parts of the application running as expected?

Upvotes: 4

Views: 4373

Answers (3)

Bloody Kheeng
Bloody Kheeng

Reputation: 1

on my side this first option was failing then i resorted to only setting the expiration and not it works fine

this failed to work in production

Cookies.set("refresh_token", response.data.data.refresh_token, { expires: 7, secure: true, sameSite: "Strict" });

but this works well

Cookies.set("refresh_token", response.data.data.refresh_token, { expires: 7 });

my full code

'use client'
import axios from "axios";
import Cookies from "js-cookie"; // Client-side cookies

// Set new headers (Client-side only)
export function setNewHeaders(response?: any) {
// console.log("🚀 ~ setNewHeaders ~ response:", response)

    if(response?.data?.refresh_token){
        // Cookies.set("refresh_token", response.data.data.refresh_token, { expires: 7, secure: true, sameSite: "Strict" });
        Cookies.set("refresh_token", response.data.data.refresh_token, { expires: 7 });
    }

    if(response?.data?.access_token ){
        Cookies.set("access_token", response.data.access_token, { expires: 7 });
        axiosAPI.defaults.headers.Authorization = `Bearer ${response.data.access_token}`;
    }
}

Upvotes: 0

Matthew FW
Matthew FW

Reputation: 106

The httpOnly flag means that the cookie is not accessible from any client side scripts, this includes browser local storage displays. It is still being sent to the server because the login is working, so you have nothing to worry about.

Upvotes: 0

Robert S
Robert S

Reputation: 846

I believe you may need to set the expires time for one day

1 Day = 24 Hrs = 246060 = 86400.

and same site set the none and also set domain name then it works

Cookies.set('auth_token', token, { domain: 'here name', expires: 1/86400, secure: true, sameSite: 'None', path: '/', });

I hope this solution resolves your issue.

Upvotes: 2

Related Questions