Create React App proxy to express server for PassportJS not working

Question

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>

curl is properly proxying the calls from port 3000 to 5000
PassportJS process works properly when I go directly to the express server endpoint I created here: http://localhost:5000/auth/google

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/' }));
};

ivan7707 ivan7707 · Accepted Answer · 2021-02-10T23:49:55

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

Create React App proxy to express server for PassportJS not working

1 Answers