As I implement passport's Google OAuth2.0 strategy, I realized I need the callback to hit the server, then from there, I can redirect to a different page depending on if the user needs to finish setting up their account or if their account is already setup.

The problem is that when a redirect to say /api/auth/google/callback, the react app seems to capture it and just loads a blank screen. Even when my backend server is off which hosts the frontend, I still managed to get a blank page (I'm guessing just because everything is cached).

I believe I have everything in the correct order: handle API requests first, then send off the static react app files.

// Initialize Passport
app.use(passport.initialize());
app.use(passport.session());

passport.use(localStrategy);
passport.use(googleStrategy);

app.use('/api', apiRouter);

// serve react app 
app.use(express.static(path.join(__dirname, '../../frontend/dist')));

app.get('*', (req: Request, res: Response) => {
  res.sendFile(path.join(__dirname, '../../frontend/dist/index.html'));
});

I tried configuring a proxy in the vite config file, but that only seems to work in development. Any thoughts? Is this even possible?