React fetch and Adonis Session using cookies


#1

Hi, Im trying to use Adonis session cookie based with react fetch.

I can see that fetch is passing the Cookie header (using credentials: ‘include’) on the request but when I try to access session.get(‘key’) is null.

Does anyone tried this before?

I’m trying a mix of basic auth with sessions.

Thanks

PS. this is using two independent apps: adonis for server and CRA for client


#2

Since you said that you have two different apps, I do hope they will be on running on different ports.

And cookies are sent by browsers for same domain only

Can u share why you want to use sessions with a json api server and react client?


#3

Thanks Virk,

I created a repo that will serve as a framework to develop web apps using Adonis and React:

Currently, it is using basic auth to simply authenticate a user that tries to access the API. The idea is to maintain the 2 apps seperate, so the client app can be deployed in any other server, but for now I just build the client app and copy the build to adonis public folder.

I suppose that sessions based on cookie should work this way because Adonis is serving the React app build from its public folder.


#4

Okay that makes sense, yes sessions on same host and port should work fine. I will take a look at it.

But also I would recommend keeping API away from sessions, since it will cause all sorts of restrictions when tightly coupled.

Can I use the repo you shared to reproduce the bug?


#5

Sure, no problem!

Thank you so much :slight_smile:


#6

Bump. Any news about this Virk? Thank you!


#7

Hey sorry for getting late on this. Can you share the code snippet where you are making the fetch request?


#8

Back,

Let me attach a screenshot.

Before the request on the screenshot, I set session.put(‘foo’, ‘bar’) to set a session var.

On the screenshot, we can see the cookie on the request. Also, the null in the console is the result of console.log(session.get('foo'))

I’m just using the parameter “credentials”: “include” in fetch API.


#9

Ok, I think I got it.

I was also setting a cookie in react application (using react-cookie), which was also being sent to the server, which would not recognise correctly the session.

Virk can you please confirm that once the cookie is set on the server-side and sent to the client, it cannot be changed (or add other cookies) because the cookie sent back to the server cannot identify the current session?

Once this is confirmed, this thread can be closed.

Still, if there is another strategy for identify the client session after adding cookies in react app it would be very appreciated.


#10

Nope, setting cookies on frontend will never invalidate the session cookie, until you are not modifying it.

I infact tried reproducing the issue and all seems to be working fine on my end. Here’s a sample repo, in which it works fine. https://github.com/thetutlage/adonis-session-cookie

Feel free to clone the repo and share the use case where it doesn’t work.

  1. I have used axios.
  2. I have used js-cookie.

#11

Thanks Virk. Yes everything is fine with Adonis and I got it working with react, fetch and even with different domains (using config/cors.js).

Something was invalidating my session and I can only think that was something to do with cookies (or my browser cache)…

If you have any spare time can you create a branch on that repo demonstrating how to invalidate de session with cookies? If not, just don’t bother with this counter-example.

Thank you man, Adonis is great! :slight_smile:


#12

Hi,

I am trying to working with react + adonis but having difficulty in routing…

This is my components/main.js code

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Posts from './Posts';
import About from './About';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' components={Posts} />
      <Route path='/about' components={About} />
    </Switch>
  </main>
)

and this my index.js code

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from './components/App'

ReactDOM.render(
<Router>
  <App />
</Router>
, document.getElementById('root'))

but client side links are not working, its still throwing on server side.

can you help me in this?


#13

I am also facing.How Response header once logged get from react ,so that i can pass in every request. virk.please reply friend