How to read cookies with react?

Question

I have a cookie on my browser and I want to read it with react, I use it like that:

import Cookies from 'js-cookie';
console.log(Cookies.get('cookieName1'));

when I run it, I get undefined on the console, but, the cookieName1 have a value on my cookies.

How can I fix it ?

can your print just Cookies.get(); and show us what you see there...? — Arup Rakshit
– Arup Rakshit, Commented Aug 13, 2019 at 14:14
Are you sure the cookie is visible to JavaScript? A cookie set by a server can be marked as HttpOnly which means that it is not visible from JavaScript — NineBerry
– NineBerry, Commented Aug 13, 2019 at 14:14
Can you run console.log(document.cookie) and tell us what you get. — Mark
– Mark, Commented Aug 13, 2019 at 14:20
@CodeLover Show us what you see there in developer tools. All the properties of the cookies — NineBerry
– NineBerry, Commented Aug 13, 2019 at 14:55

Vipin Yadav · Accepted Answer · 2019-08-13 15:20:21Z

2

I have used js-cookies which works well.

import cookies from "js-cookies";

const secure = window.location.protocol === 'https'

to set value in cookie use below code

cookies.setItem("API_TOKEN", "hello", undefined, "/", undefined, secure)

to get value from cookie use below code

cookies.getItem("API_TOKEN")

to remove cookie use below code

cookies.removeItem('API_TOKEN')

edited Aug 13, 2019 at 15:20

answered Aug 13, 2019 at 14:32

Vipin Yadav

1,1236 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rich C Over a year ago

js-cookie 3.0.1 uses get instead of getItem.

Aryan Arif · Accepted Answer · 2024-02-27 17:56:09Z

1

if a cookie is marked as HttpOnly, it is not accessible on the client-side using JavaScript. The HttpOnly flag is a security feature for cookies that restricts them from being accessed by client-side scripts. This is done to mitigate the risk of cross-site scripting (XSS) attacks, where an attacker injects malicious scripts into a website, and those scripts attempt to steal sensitive information, such as cookies.

answered Feb 27, 2024 at 17:56

Aryan Arif

112 bronze badges

Collectives™ on Stack Overflow

How to read cookies with react?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related