menu

Questions & Answers

I don't see cookies sent by the expressjs (passportjs) in the browser

So I have created a react app using vite and when I complete my authentication using passportjs I don't see any cookies in the browser. After trying all the available solutions I decided to create another react app using create-react app tool and tried authenticating and surprisingly now I see cookies in the browser. I didn't change anything in the backend code just used another tool to create react app. I don't know what is going on.

Do I have to make any changes in the vite config file to be able to see the cookies in the browser?. I tried everything, nothing seems to work with vite.

I tried ChatGpt too, He suggested some solution but that didn't help.

I didn't change anything in the vite config file at all.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


export default defineConfig({
  plugins: [react()],
  
})
Answers(1) :

Okay, finally, after playing with my code for hours, I figured out a solution that works. When I start my react app that is created using VITE, by default it runs on http://127.0.0.1:5173. When we create react app using create-react-app it runs on http://localhost:3000. I used to think both localhost and IP address 127.0.0.1 are same, but that is not the case there are substantial differences between localhost and 127.0.0.1. So decided to use --host flag that VITE gives us to expose other IP addresses.

yarn dev --host  

You see the output like this. Now react app is running on localhost, i.e. http://localhost:5173.

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.56.1:5173/
  ➜  Network: http://192.168.137.1:5173/
  ➜  Network: http://192.168.116.191:5173/

Then in the back-end code I replaced http://127.0.0.1:5173 with http://localhost:5173. And now I can see the cookie in the browser that is set by the passportJS. My authentication now works fine, there are no issues.