React Node Unable to pass cookie to the browser (crocs error)

For some reason I am unable to store cookie in my browser.

This is the first time I am working with React And NodeJS

My React application is working on localhost:3000 and NodeJS application on localhost:8080

The Git repository for the same happens to be this

So, I am successfully able to login, store the credentials in DB and probably serialise and de-serialise.

I am not sharing the code for Google Strategy and serialise and de-serialise since I believe that problem doesn’t presist here (In case you think that you would need to view it click here

This Google redirect returns at following callback

   router.get("/google/callback", passport.authenticate('google', { failureRedirect: "/", session: false }), (req, res) => {


      res.redirect("http://localhost:3000/")
  })

JavaScript
​x
 
   router.get("/google/callback", passport.authenticate('google', { failureRedirect: "/", session: false }), (req, res) => {
​
​
      res.redirect("http://localhost:3000/")
  })
​

In my server.js (main file, I start node server by doing node server.js), I am doing this to store cookie

app.use(cors({
  credentials: true,
  origin: ['http://localhost:3000'] // here goes any Frontend IP Adress
}))

//We are setting cookie here 
app.use(cookieSession({
  maxAge: 24*60*60*1000, //cookies is valid for a day
  keys: ['fgfhfjhfad'] 
}))  


app.use(passport.initialize())
app.use(passport.session())

JavaScript
 
app.use(cors({
  credentials: true,
  origin: ['http://localhost:3000'] // here goes any Frontend IP Adress
}))
​
//We are setting cookie here 
app.use(cookieSession({
  maxAge: 24*60*60*1000, //cookies is valid for a day
  keys: ['fgfhfjhfad'] 
}))  
​
​
app.use(passport.initialize())
app.use(passport.session())
​

And then when I do this in my react frontend

 componentWillMount() {
         axios.get("http://localhost:8080/",  {withCredentials: true}).then(response => {
             console.log(response)
         }).catch(error => {
             console.log(error)
         })
    }

JavaScript
 
 componentWillMount() {
         axios.get("http://localhost:8080/",  {withCredentials: true}).then(response => {
             console.log(response)
         }).catch(error => {
             console.log(error)
         })
    }
​

Where my localhost:3000/ looks like this

app.get("/", (req, res) => {
  if (req.user) {
    if (req.isFormFilled) {
      res.redirect("http://localhost:3000/home")
    } else {
      res.json(req.user)
    }
  } else {
  res.json("user does not exsist")
  }
})

JavaScript
 
app.get("/", (req, res) => {
  if (req.user) {
    if (req.isFormFilled) {
      res.redirect("http://localhost:3000/home")
    } else {
      res.json(req.user)
    }
  } else {
  res.json("user does not exsist")
  }
})
​

It always log res.json("user does not exsist") but if I directly go to localhost:3000 in my browser, I can see my req.user < [See: update below question]

Ps; I am enabling cross-origin request in my browser

[Question:] Can someone please help me in finding out what I could be doing wrong?

[Update:] It appears we might be having crocs error, I have changed my code and I am getting this as an error in frontend

Access to XMLHttpRequest at ‘localhost:8080’ from origin ‘localhost:3000’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

If I remove {withCredentials: true} in my axios request the above error disappears but then it logs user does not exsist in response.data

Answer

So send Cookies via REST its neccecary to:

Set Cors serverside:

app.use(cors({
    'allowedHeaders': ['sessionId', 'Content-Type'],
    'exposedHeaders': ['sessionId'],
    'credentials': true,
    'origin': ['http://[FRONTEND-IP]:[FRONTEND-PORT]', 'http://[ALTERNATIVE-FRONTEND-IP]:[FRONTEND-PORT]'],
}))

JavaScript
 
app.use(cors({
    'allowedHeaders': ['sessionId', 'Content-Type'],
    'exposedHeaders': ['sessionId'],
    'credentials': true,
    'origin': ['http://[FRONTEND-IP]:[FRONTEND-PORT]', 'http://[ALTERNATIVE-FRONTEND-IP]:[FRONTEND-PORT]'],
}))
​

For Frontend you need to setup a call like this:

fetch('http://[API-IP]:[API-PORT]/call', {credentials: 'include'}).then((result) => {
    return result.json()
}).then((data) => {
    //Do something
});

JavaScript
 
fetch('http://[API-IP]:[API-PORT]/call', {credentials: 'include'}).then((result) => {
    return result.json()
}).then((data) => {
    //Do something
});
​

you can also use fetch asynchronous:

async function loadData() {
    let response = await fetch(
        'http://[API-IP]:[APi-PORT]/call', 
        {credentials: 'include'}
    );
    return response.json();
}

JavaScript
 
async function loadData() {
    let response = await fetch(
        'http://[API-IP]:[APi-PORT]/call', 
        {credentials: 'include'}
    );
    return response.json();
}
​

this, of course, applies to using a rest service with json bodies. If you rely on another structure than json, you need to parse your response manually.

Also, An interested article on web about cors https://50linesofco.de/post/2017-03-06-cors-a-guided-tour

Advertisement

Answer