react-google-login clears the cookie/session information in my app

Question

I have setup authentication in my app using https://www.npmjs.com/package/react-google-login. I am unable to figure out why the session/cookie information disappears in my application when I reload the page. That is logged in users reloading the page will be logged out :(

Here is my code in my application's Login component:

const Login = () => {
  const [user, setUser] = useContext(UserContext);

  const onSuccess = (response) => {
    axios.post(API_ONE, {
      name: response.profileObj.name,
    });

    axios.post(API_TWO, {
      email: response.profileObj.email,
    });

    navigate("/");
    setUser({
      id: response.profileObj.email,
      userLoggedIn: true,
    });
  };

  const { signIn } = useGoogleLogin({
    onSuccess,
    clientId: CLIENT_ID,
    isSignedIn: true
  });

  return (
    <div>
      <button onClick={signIn}></button>
    </div>
  );
};

export default Login;

I can confirm that react-google-login preserves the session information when I try to test the functionality in isolation in a simple demo application.

I spent significant time trying to figure out why this is happening but no luck yet. I would appreciate if someone could help me with any troubleshooting/debugging tips or suggest alternate ideas that I could do to achieve the authentication functionality and preserving the session on refresh.

EDIT:

1. In the simple demo app(https://github.com/Sivanesh-S/react-google-authentication) I opened the applications tab and network tab in parallel and then when I try to refresh after login, I can see the network requests to accounts.google.com. After this network requests, I can see the local storage, cookies and session information persist in the applications tab.

2. In my application when I try to refresh after login, I cannot see the network requests to accounts.google.com. The local storage, cookies and session information gets cleared in the applications tab

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "src/App.js",
  "dependencies": {
    "@reach/router": "^1.3.3",
    "axios": "^0.19.0",
    "react": "^16.13.1",
    "react-dom": "^16.12.0",
    "react-google-login": "^5.1.21",
    "react-router-dom": "^5.2.0",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.5",
    "parcel-bundler": "^1.12.4"
  },
  "scripts": {
    "dev": "parcel src/index.html",
    "clear-build-cache": "rm -rf .cache/ dist/",
    "format": "prettier \"src/**/*.{js, html}\" --write",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
  }
}

Answer 1

I guess this is related to parcel. I guess parcel is doing something here. So I recommend you to change your package.json to following.

"dev": "react-scripts start",

And please consider this line as well.

"clear-build-cache": "rm -rf .cache/ dist/",

All localstorages are saved somewhere in filesystem, but it looks like your building system clears them everytime.