spent a couple of days attempting to set up a proxy for my react app to my express backend where I am using passportjs for gooogle social auth.
react dev server on PORT 3000 express server on PORT 5000
When I click on the button, it reloads the page, but does not start the passportJS google auth process (i.e. does not redirect to the oauth2 flow).
<Button href='/auth/google'> Link Button </Button>
Key code pieces are below that should allow proxy to work from react frontend to express passportJS Oauth2 flow.
package.json
"proxy": "http://localhost:5000"
app.js
<a href="auth/google/" target="">
<Button> Link Button </Button>
</a>
server.js
app.get('/auth/google',
passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
'openid'] }),
);
setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy('/auth', { target: 'http://localhost:5000/' }));
};
I did not end up needing the package.json proxy entry. These are all of the pieces together that got everything to work as expected.
I have the front end application in a /client directory which is where I used create react app.
From package.json in the create react app (client directory) I deleted this as the http-proxy-middleware seems to require commonjs imports "type": "module",
setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy('/auth/google', { target: 'http://localhost:5000/' }));
};
App.js using material UI button
<Button href="/api/auth/google" variant="contained" color="primary">
Index.js for passportJS config and express server
in the passportGoogle.strategy options set this to be consistent with the rest of the config
callbackURL: `/api/auth/google/callback`
app.get('/api/auth/google',
passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
'openid'] }),
);
app.get('/api/auth/google/callback',
passport.authenticate('google', { failureRedirect: '/failed' }),
function(req, res) {
res.redirect('http://localhost:3000');
}
);
Google console
URIs
http://localhost:3000
Authorized redirect URIs
http://localhost:3000/api/auth/google/callback