How to access a browser cookie in a react app

This question is a bit popular but Im not having such luck. Im mostly a backend person so Im learning as I go along.

I have a cookie named connect.sid and value of 12345. I see this in my chrome dev tools.

In my react app I console logged document.cookie and localStorage.getItem('connect.sid'). Im getting null values. How to get the value of 12345?

Passportjs, using passport-github2 strategy, created this cookie. I need access to it so I could talk to my API.

Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Using react-cookie may be the easiest way to get cookie value. You can run npm install react-cookie, the v2 will be installed. If you only want to use a simple API only on the client, i will suggest to use v1. Just run npm install [email protected], add import cookie from 'react-cookie' to you file and use cookie.load('connect.sid') to get cookie value. You can check the README of v1 for detail.

If you still cannot get the cookie value, please confirm:

  1. the cookie is set to correct path like /, if you want your cookie to be accessible on all pages.
  2. the cookie is not httpOnly cookie, HttpOnly cookies aren’t accessible via JavaScript.

Method 2

I know that answer is not exactly what you want, but
if you just want to authorize someone on the serverside i have an easy solution. Just add

credentials: ‘same-origin’

to your AJAX request. If you have done that the cookie will get send with your connect.sid to the server and the server will handle the authentification for you.

Method 3

Full example using the react-cookie v2.

You need to wrap your root component in and also the individual components where you want to access the cookies in withCookies(..). The cookies are then part of props.

client.js:

import {CookiesProvider} from "react-cookie";

<CookiesProvider>
  <App />
</CookiesProvider>

App.js:
import React from "react";
import {withCookies} from 'react-cookie';

class App extends React.Component {
  render() {
    const {cookies} = this.props;
    return <p>{cookies.get('mycookie')}</p>
  }
}

export default withCookies(App);

Method 4

You can start by npm install react-cookiethen import { Cookies } from 'react-cookie' and finally cookies.get('connect.sid'):

don’t forget to wrap your root app inside CookiesProvider something like so :

  <CookiesProvider>
    <App />
  </CookiesProvider>

You can find an example here


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x