6

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

Sylar
  • 11,422
  • 25
  • 93
  • 166

5 Answers5

15

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 react-cookie@1.0.5, 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.
tony.hokan
  • 541
  • 5
  • 7
  • Ive installed v2 and got `TypeError: Cannot read property 'load' of undefined` – Sylar May 22 '17 at 11:49
  • It's funny how I can set and load what I set but cannot load the one set by passport: `connect.sid` – Sylar May 22 '17 at 20:42
  • 1
    Thanks for the tip. `express-session` had it as `httpOnly` so I disabled it with `cookie: { httpOnly: false }` – Sylar May 23 '17 at 05:52
  • yes they have changed. I personally liked the previous version, it was simple. Now you have to use wrapper CookiesProvider and withCookie. – imdzeeshan Apr 04 '18 at 06:28
  • whats the non library way of doing this? just got irked with lot of libraries out there. – Tukaram Bhosale Oct 04 '21 at 17:19
5

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.

NotGapsong
  • 51
  • 4
  • 1
    The aim is to use axios to send the cookie as a header to my server as that's how I know who the user is – Sylar May 22 '17 at 13:16
  • you just have to google how to set up credentials 'same-origin' with axios and everything will get handled for you. If you set that parameter the cookie will get send with the connect.sid = 12345. After that the passport.session() method will translate the cookie data into req.user data for you. And you dont have to handle the authentification on your own. passport deals with it. – NotGapsong May 22 '17 at 16:04
  • I'll get back to you after some searching. Thanks – Sylar May 22 '17 at 20:26
1

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);
Patrik Beck
  • 2,455
  • 1
  • 19
  • 24
0

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

ZEE
  • 5,669
  • 4
  • 35
  • 53
  • 1
    Not sure I follow. Im getting `TypeError: _reactCookie.Cookies.get is not a function` – Sylar May 22 '17 at 08:31
0

You should be able to access cookies by using document.cookie even while using passportjs on the backend from a react app. I was able to access document.cookies using passport-local strategy with a react app. There is no need for installing react-cookie.

Once you've fixed that problem, then you can simply split the cookies like the following example below, and dynamically retrieve your desired cookie:

const cookies = document.cookie.split(';');

for (let i = 0; i < cookies.length; i++) {
  if (cookies[i].startsWith('connect.sid=s%3A')) {
    //.. Do what you want with connect.sid cookie
    break;
  }
}
alhosainy altaher
  • 1
  • 2