Get cookie with react
ReactjsSessionCookiesExpress SessionReact CookieReactjs Problem Overview
I need to know if my user is connected or not. For that I want to read the cookies that I set in the server side with express-session :
app.use(session({
secret: 'crypted key',
resave: false,
saveUninitialized: true,
cookie: { secure: false } // Put true if https
}))
app.post('/connect_user', (req, res) => {
req.session.cookie.username = req.body.username
findUserData('username', req.body.username, req, (userData) => {
req.session.cookie.id = userData.id
req.session.cookie.username = userData.username
res.redirect('/profil')
})
})
I tried to use react-cookie
but it doesn't work even though I copy-pasted the npm react-cookie
docs example:
import React from 'react';
import Landing from './Landing';
import Home from './Home';
import Profil from './Profil';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { instanceOf } from 'prop-types';
import { Cookies } from 'react-cookie';
class App extends React.Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
constructor(props) {
super(props);
const { cookies } = props;
this.state = {
username: cookies.get('username')
};
}
render() {
console.log(this.state.name)
let homePage = (!this.state.username) ? <Landing/> : <Home/>
return (
<Router>
<div>
<Route exact path='/' component={homePage}></Route>
<Route path='/profil' component={Profil}></Route>
</div>
</Router>
)
}
}
export default App;
It's weird because document.cookie
renders the correct result, but I don't know how handle it:
PHPSESSID=0nv9ic8h7pv2b63lu4v7eg3mop; user_id=21; username=Ugo; SL_G_WPT_TO=fr; SL_GWPT_Show_Hide_tmp=undefined; SL_wptGlobTipTmp=undefined
Reactjs Solutions
Solution 1 - Reactjs
You can use js-cookie
package and can install it using npm install js-cookie --save
command.
import React from 'react';
import Cookies from 'js-cookie';
class App extends React.Component {
this.state = {
username: Cookies.get('username')
}
// more code....
}
Documentation : https://github.com/js-cookie/js-cookie
Solution 2 - Reactjs
If all you want is to get the cookie value by key, I would suggest using plain javascript without any dependencies.
In this example, it gets the cookie value by the key "username" with the help of Regex.
let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");
Solution 3 - Reactjs
I'd recommend using universal-cookie
as its simpler to use. Mind you, cookies have nothing to do with React. They are stored on the browser and you could use the browser's default API to get cookies.
Here is an example how you can use universal-cookies
import React from 'react';
// other imports...
import Cookies from 'universal-cookie';
const cookies = new Cookies();
class App extends React.Component {
this.state = {
username: cookies.get('username')
}
// more code....
Solution 4 - Reactjs
There is no need for a third party npm package. You can use plain JS to extract the cookie. Here is a custom function for that:
function getCookie(key) {
var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
return b ? b.pop() : "";
}
Solution 5 - Reactjs
You can also use the method below without any 3rd party package as documented in developer.mozilla.org :
document.cookie
.split('; ')
.find(row => row.startsWith('YOUR-COOKIE='))
.split('=')[1];
You must keep in mind that If YOUR-COOKIE
does not exist, you will encounter an error like Cannot read property .split() of undefined
.
Solution 6 - Reactjs
I hope this function may help:
function getCookie(name) {
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
Solution 7 - Reactjs
cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
console.log(cookie('test'))