I have a React (CRA) Node JS application already deployed locally (using the create-react-app build script), I've implemented Google OAuth signin with passportjs and cookieSession for persistence.

The login works fine but there is a strange bug when I Logout and then try to log in again with google OAuth, it just redirects me to a blank page.

This is how I make the request to my google oauth endpoint:

window.open('https://localhost:3000/auth/google', "_self")

That endpoint then is taken by my API:

app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));

Doing some troubleshooting it seemed at first the culprit were the cookies because when I delete the site data before trying to login again... then the login works just fine.

However if I delete the cookies only (through the storage panel -> cookies -> delete all, in firefox) the bug still persists, it only disappears when I delete the site data entirely.

Moreover, The second time I try to login the request don't event reach my server.

What I've alredy tried:

1. Wrapping my login button inside an anchor tag and setting the anchor's tag href to the endpoint url.
2. Creating an anchor tag and assigning an href with the endpoint url and then clicking that new element programmatically.
   None of this worked, the issue still persists.
3. Fresh firefox profile: this is even weird, the bug appears the very first time I try to login with google in a newly created profile. Again I have to first click the clear cookies and site data button for it to work.
4. Incognito mode: The issue persists, again the first time I login it works but the second time it redirects me to a blank page and the request is not even reaching my server.

What could be the problem here?

CodePudding user response：

The issue was the service worker that cames with the creat-react-app template, however I didn't want to disable it completely as I want my app to be a PWA, so the next best thing was to disable the service-worker caching specifically for the page from which the user initiates the Google login (the page where the google button is).

For this I had to install the sw-precache package which allows you to modify the default service-worker that came with the create-react-app template (as you cannot directly modify it).

Then you have to create a config file at the root of your project and add these lines, in this case I call it sw-precache-config.js:

module.exports = {
  runtimeCaching: [
    {
      urlPattern: /<the route to ignore>/,
      handler: 'networkOnly'
    }
  ]
};

and then in the build script from your package json:

"build": "react-scripts build && sw-precache --config=sw-precache-config.js"