How to integrate facebook-passport in react app with express api?

Question

I created express api server, which runs on localhost:5000 with react app running on localhost:3000. Now I'm trying to integrate facebook authentication.

I followed Scotch's tutorial about authenticatation using passport in order to integrate facebook authentication in my own app. I have cloned his repo, set up facebook login on facebook developers and it works correctly. Using his example I've tried to set up this flow in my app, but with no success. In firefox console I noticed one diffreance - when I click "login with facebook" in scotch's app, there are 3 requests:

1. http://localhost:8080/auth/facebook
2. https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http://localhost:8080/auth/facebook/callback&scope=public_profile,email&client_id=CLIENT_ID
3. http://localhost:8080/auth/facebook/callback?code=A_LOT_OF_CHARS

In my app:

1. http://localhost:5000/auth/facebook
2. https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http://localhost:5000/api/oauth/facebook/callback&scope=public_profile,email&client_id=CLIENT_ID
3. https://www.facebook.com/v2.12/dialog/oauth?redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Foauth%2Ffacebook%2Fcallback#=

So there is a difference in third request - Scotch is redirect to his callback, but in my app I got a link to message

The parameter app_id is required

on facebook page.

How should I configure react to make it work?

Answer 1

Do you have redirect route in your express app yet? Something like this.

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/login' }),
  function(req, res) {
    // Successful authentication, redirect home.
    res.redirect('/');
 });

You can read the documentation here https://github.com/jaredhanson/passport-facebook#readme if you are still stuck. Hope it helps