Create-react-app: How to integrate passport middleware into create-react-app?

[Nina0408]

Hi There,

My app is using create-react-app for front-end and express+nodejs for API service. In development mode, they are running on different server. front-end is running on 3000 port, back-end is running on 3001 port.

Now I want to integrate OAuth authentication server such as passport-facebook with my app, so when user visits localhost:3000, passport-facebook will check the authentication first, if not granted, It will redirect to facebook's login page.

Above is my requirement, but I don't know how to route the every request such localhost:3000/* to passport middleware firstly, since it uses webpack-dev-server.

For express, I know how to do it as below, but for create-react-app part, I don't know how to add middleware.
_var app = express();
app.use(passport.initialize());
app.use(passport.session());

No sure if I describe my question clearly, please advice. Thanks.

[Nina0408]

Anyone can help? Thanks!

[Timer]

This should give you all you need:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

[Nina0408]

Hi Timer,

Thanks for your answering, I still have no idea how to do with passport.js, let me describe my question in another way:

I have a requirement to authorize the user based on passport strategy.

• React app created by create-react-app

• passport.js such as passport-facebook

I just know how passport js works with express only.

Since I have created app using CREATE-REACT-APP all configuration is auto generated and unable to integrate passport js in same.

Do you know how to configure passport with react app created by CREATE-REACT-APP?

Thanks!

[Timer]

If your Node server is running on port 3001, add a proxy option in your package.json:

{
  "proxy": "http://localhost:3001"
}

As for how to configure passport and use it in practice, please read their docs -- that's out of scope of us.

[jesper-bylund]

Hi @Timer ,
this solution really doesn't work. I understand it's beyond the scope of CRA, but there must be some way of wrapping the CRA dev server in express instead of the other way around?

[heriwahyudianto]

looking solution for this problem too

[MattSidor]

I had the same problem. What ended up working for me was explicitly defining my Express routes in the "proxy" field of package.json:

"proxy": {
  "/api": {
    "target": "http://localhost:8080/"
  },
  "/auth": {
    "target": "http://localhost:8080/"
  }
}

Seems redundant, but for some reason it works for me.

[iamdidev]

@MattSidor to avoid "redundancy" you can use 'http-proxy-middleware package and make a file in src/setupProxy.js with a content:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy(['/api', '/auth'], { target: `http://localhost:8080` }));
};