react-cookie
Universal cookies for React
universal-cookie
Universal cookies for JavaScript
universal-cookie-express
Hook cookies get/set on Express for server-rendering
Universal cookies for React
Universal cookies for JavaScript
Hook cookies get/set on Express for server-rendering
I can't believe this is actually a problem with the library, but is there some condition in my application that could be causing behavior like what I'm observing in this console screenshot?
https://www.dropbox.com/s/805pyfznabpyr54/Screenshot%202016-02-02%2012.57.18.png?dl=0
Other pages in the application appear to be working as expected.
I am using universal-cookie
and am experiencing this problem when instantiating it. I'm doing the same thing as the example:
import Cookies from 'universal-cookie';
const cookies = new Cookies();
https://github.com/reactivestack/cookies/blob/a97969a9755f2a7fc5977a448a97f0fd39ac3a3c/packages/universal-cookie/src/Cookies.ts#L14
When trying to consume this package with rollup and <script type="module" />
having mixed imports means that require
is not defined.
Currently have react version 16.7.0, just updated react-cookies to 3.0.8. After updating and restarting client, getting above error and UI doesn't load. Screenshot attached. Thank you
Hi,
with this code:
var express = require('express');
var router = express.Router();
var reactCookie = require('react-cookie');
router.get('/', function(req, res) {
reactCookie.plugToRequest(req, res);
someFuncWithCallback( function() {
var cookie = reactCookie.load("somecookie");
});
});
If two people request this route at the same time and the callback gets called first for the 1st user, the cookie
will be the cookie of the second user.
Because you store the rawCookies
globally in your script, instead of using a different rawCookies
for each request, the first request will call plugToRequest() that will write rawCookies
, and the second request will overwrite it... and by the time node.js has reached cookie.load()
, it will return the second cookie to the first user, or viceversa...
How do I read cookies on server?
I save cookie in action creator:
cookie.save('userId', userId);
How do I load it on server? I know that I can access cookies in req.cookies
but I want to keep the logic in the right place. I do not want to edit server.js file.
When I do console.log(cookie.load('userId')
I get undefined in server console.
hi I upgrade to the latest version[1.0.1] but there's something problem. I didn't see what's difference between the older version, but I saw IS_NODE
always true both in browser or node environment. It might be the problem why cookie.parse wasn't executed.
https://github.com/thereactivestack/react-cookie/blob/master/src/cookie.js#L13
Hi,
I would like to know out to use it in jest environment once I'm getting this error:
Cannot read property 'cookie' of undefined at Cookies._updateBrowserValues (/home/bla/app/node_modules/universal-cookie/lib/Cookies.js:47:55)
I tried to set the cookie in the test like this, before calling the usage in app, but it didn't work:
import Cookies from 'universal-cookie'
const cookieHandler = new Cookies()
cookieHandler.set('foo', {}, { path: '/' });
Thanks
const [cookies, setCookie, removeCookie] = useCookies();
setCookie('key', value, {
path: '/',
maxAge: 86400 * 365,
});
removeCookie('key');
Sometime cookie does not removing
The useCookies
hook appears to be stateful rather than updating the global context. Is that intentional?
// This function component never updates
function Parent() {
const [cookies, setCookie, removeCookie] = useCookies(['test']);
if (cookie.test === 'test') {
return <Child2 />;
} else {
return <Child />;
}
}
function Child() {
const [cookies, setCookie, removeCookie] = useCookies(['test']);
useEffect(() => {
setCookie('test', 'test', { path: '/' });
});
return null;
}
I implemented one of those GDPR cookie banners. When you click a button it dismisses the banner and sets a cookie so we know not to show it again.
Here’s the code (I’ve simplified it a bit for clarity):
const CookieConsent = () => {
const [cookies, setCookie] = useCookies([storageKey])
const value = typeof cookies[storageKey] === "undefined" ? null : cookies[storageKey]
const dismissed = JSON.parse(value)
const dismiss = () => {
setCookie(storageKey, true)
}
if (dismissed) {
return null
}
return <>
<Message>{text}</Message>
<Button onClick={dismiss}>OK</Button>
</>
}
This all works when testing manually, but for some reason it doesn’t seem to work when I write an automated test for it.
test("hidden after being dismissed", () => {
let { queryByText, getByText } = render(
<CookiesProvider>
<CookieConsent />
</CookiesProvider>
)
fireEvent.click(getByText("OK"))
expect(queryByText(text)).not.toBeInTheDocument()
})
As best I can tell, when setCookie
is called in the click handler, it’s not re-rendering the component.
Is there something I’m doing wrong or is this a bug?
Im trying to set up a darkmode cookie but i cant seem to get it working without problems
Im sharing this because I believe that there are possibly others with the same problem.
Im getting an Uncaught TypeError: cookies.get is not a function
im using react-cookie 4.1.1
import "./Settings.css"
import { Link } from "react-router-dom"
import { Box, FormControlLabel, Switch } from "@mui/material"
import React, { useEffect, useState } from "react"
import { useCookies } from "react-cookie";
export function Settings(){
const[cookies, setCookie, removeCookie] = useCookies(["darkmodeCookie"])
setCookie("darkmodeCookie", false)
function handleChange(){}
let getVal = cookies.get("darkmodeCookie");
return(
<div>
<h1>Settings</h1>
<ul>
<h1>{getVal}</h1>
<h3>Ansicht</h3>
<li><Box><FormControlLabel label="darkmode" control={<Switch onChange={handleChange} checked={true}/>}/></Box></li>
<h3>Privatsphäre</h3>
<li>test <Link to="/settings/cookies" ><p className="moreInfoLink">mehr Erfahren</p></Link></li>
</ul>
</div>
)
}
End of Settings.js
import {withCookies} from "react-cookie"
function App() {
function CookiePopUp(){ // use after the render of the app return, useEffect not working try: componentDidMount
const [cookieConsent, setConsentCookie] = useState(Cookies.get('cookieConsent') || 'undetermined');
const handleAccept = () => {
Cookies.set("consentCookie", "accepted", { expires: 365 });
setConsentCookie("accepted");
}
if (cookieConsent === 'accepted') {
return null;
}else{
return (
<div className="PopUpConsentCookie">
<p>Diese Website nutzt Cookies um die Benutzererfahrung zu verbessern</p>
<button onClick={handleAccept}>Accept</button>
</div>);
}
}
let persID = JSON.parse(localStorage.getItem("currentUser"));
// https://www.youtube.com/watch?v=vYL2wfmF3OQ für die menü leiste menu icon benutzen
return (
<>
<Routes>
<Route path="/settings" element={<Settings />} />
</Routes>
</>
)
}
export default withCookies(App);
End of App.js
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { CookiesProvider } from 'react-cookie';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<CookiesProvider>
<App />
</CookiesProvider>
</BrowserRouter>
</React.StrictMode>
);
Thank you for any help, and im sorry for any incovinience if the issue is caused by a mistake i made
Promise callback actually has no effect because it has been executing in-place synchronously. https://github.com/reactivestack/cookies/blob/4d12ae55e91a04d958b9c17f94ba152c951730a3/packages/universal-cookie/src/Cookies.ts#L21-L23 If it intended to be executed asynchronously, it should be rewritten like
Promise.resolve().then(() => {
this.HAS_DOCUMENT_COOKIE = hasDocumentCookie();
});
or unwrapped at all.
Hello,
I have a problem:
const cookies = new Cookies();
The problem is: it duplicates. I can see 2 cookies "accessToken". What do I do wrong? Thank you in advance.
I am getting the cookie by
const ACCESS_TOKEN = 'access_token' as string;
function AppRouter(): JSX.Element {
const [cookie, setCookie] = useCookies([ACCESS_TOKEN]);
useEffect(() => {
console.log(cookie);
}, [cookie]);
From the applications tab we can see the access_token But looks like it is not appeared when I use react-cookie
Is it a bug?
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| express (source) | 4.17.2
-> 4.17.3
| | | | |
qs before 6.10.3, as used in Express before 4.17.3 and other products, allows attackers to cause a Node process hang for an Express application because an __ proto__ key can be used. In many typical Express use cases, an unauthenticated remote attacker can place the attack payload in the query string of the URL that is used to visit the application, such as a[proto]=b&a[proto]&a[length]=100000000. The fix was backported to qs 6.9.7, 6.8.3, 6.7.3, 6.6.1, 6.5.3, 6.4.1, 6.3.3, and 6.2.4 (and therefore Express 4.17.3, which has "deps: [email protected]" in its release description, is not vulnerable).
v4.17.3
===================
__proto__
keys📅 Schedule: Branch creation - "" (UTC), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.
Hey all, we are seeing the cookie not properly added to the browser if you redirect to the path via client side navigation.
Example: cookie params
{
domain: CONFIG.cookieDomain,
expires: null,
path: `/super-secret-page`,
sameSite: 'lax',
secure: true,
}
Repro:
/regular-page
, set a cookie on click of a button with path: '/'
/super-secret-page
path
set as aboveExpected:
Actual:
Is this behavior by design? If so, would you provide more information around how path
is compared?
universal-cookie
: Remove only usage of CommonJS require"sideEffects": false
universal-cookie
: JSDOM is now using the real browser cookiesuniversal-cookie
: You can specify your cookie parsing functionuniversal-cookie
: Add support for explicit None
value on sameSite
attributeuniversal-cookie
: Add support for generic type with reading cookies (#222)universal-cookie
: Disable accessing browser cookies on JSDOM (#227)react-cookie
: Add WrappedComponent
static property when using withCookies
(#225)react-cookie
: Fix display name to include the original component nameuniversal-cookie
: Remove useless testing variablereact-cookie
: Memoize setCookie/removeCookie so that it doesn't change unnecessarilyreact-cookie
: Go back to withCookies orignial typereact-cookie
: Fix useCookies when switching back to original valuereact-cookie
: Fix documentationreact-cookie
: Add useCookies to support React hooksreact-cookie
: Revert breaking change on withCookies typingreact-cookie
: Fix wrong typing on CookiesProviderreact-cookie
: Fix memory leak on server-side renderingFix the build (was missing important files)
Source code(tar.gz)universal-cookie
: Trim j: prefix so we can deserialize cookies serialized by expressreact-cookie
: Fix TypeScript typesaddChangeListener(cb)
and removeChangeListener(cb)
on Cookies
(universal-cookies)allCookies
props when using withCookies
to get all the cookieswithCookies
re-render when a cookie changeJavaScript Cookie A simple, lightweight JavaScript API for handling cookies Works in all browsers Accepts any character Heavily tested No dependency S
sessionstorage The sessionStorage API is amazing and super useful when you need to store data temporarily in the browser. We used to abuse cookies for
angular-cookie Lightweight Angular module for access to cookies Installation You can install angular-cookie via bower bower install angular-cookie Ot
vue-cookie A Vue.js plugin for manipulating cookies tested up to Vue v2.0.5 Installation Install through npm npm install vue-cookie --save Include in
react-native-storage This is a local storage wrapper for both react native apps (using AsyncStorage) and web apps (using localStorage). ES6 syntax, pr
React Firebase Material-UI insta reels app Website link : here P.S :- Open the website in laptop or desktop browsers This website is made for my learn
Store your data in the world's fastest and most secure storage, powered by the blockchain technology.
Client Web Storage Browser storage interface for IndexedDB, WebSQL, LocalStorage, and in memory data with basic Schema and data validation. Installati
Basket.js is a script and resource loader for caching and loading scripts using localStorage ##Introduction for the Non-Developer Modern web applicati
ngStorage An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage. Differences
secure-ls Secure localStorage data with high level of encryption and data compression. LIVE DEMO Features Secure data with various types of encryption
enhanced-web-storage A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy. How to Start import
The perfect combination: local business shopping and crypto. Get passive income and support local businesses.
Linode Object Storage JS Module A javascript based module to access and perform operations on Linode object storage via code. Code Guardian Installing
Expirable storage About The Project Expirable data storage based on localStorage and sessionStorage. Getting Started To get a local copy up and runnin
Awesome Books: refactor to use JavaScript classes In this project, We add the links to the applications into the final project Getting Started if you
To Do List A simple To Do List online application that allows users to save, and manipulate their to-dos, and save their list when application is clos
PDX Tools PDX Tools is a modern EU4 save file analyzer that allow users to view maps, graphs, and data tables of their save all within the browser. If
Simple Load More This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all e
Auth-Flow This project is a simple user authentication system that uses Express.js and MongoDB to store user data. The system allows users to sign up