using passport-facebook with reactjs and node.js

Question

I am using passport-facebook with ReactJS front-end and NodeJS backend. I am calling the facebook login page using href tag as that's the only way but struggling to send the response back to the front end and set the session identifier in the cookie. Does anyone have any experience with this?

Adding some code as the question in itself didn't make much sense -

So on the React side, I am calling the facebook login using href tag like this -

<a href="https://localhost:3001/api/auth/facebook" class="btn btn-primary"><span class="fa fa-facebook"></span> Login with Facebook</a>

This calls the passport code placed in my server.js -

router.get('/auth/facebook', passport.authenticate('facebook', {
  scope: ['public_profile', 'email']
}));

As per the callback set in my Facebook App, this gets called -

router.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/login' }),
  function (req, res) {
    console.log('req.user - ' + req.user);
  res.redirect(`http://localhost:3000/profile`);
  });

Now, if I use res.redirect, I am not able to set the session in the cookie. In my local authentication flow, I can send the response from server.js to front-end using res.json and I can do all that before rendering the component.

Also, how do I store the url end-point where the user actually wanted to go so that I can redirect to that after the login is successful? Again, it was pretty straightforward in the local authentication.

Thanks, Abhishek

Answer 1

If your backend is on the same server with your front end

let's say your front end is on localhost:3000 and your backend is on localhost:8080

you need to proxy your backend into localhost:3000/api and then you can access your session

check this link

If your backend is on other server

you need to manually request to facebook using react-facebook-login

After getting all the responses send it manually to backend and force login using passport.authenticate()

Answer 2

I'm trying to figure out a similar problem, I'm using what feels like a very clunky workaround described in more detail here -- basically I'm sending the userId and token back to the client in the route params at the end of the callback function (e.g. res.redirect(`${CLIENT_URL}/user/${userId}`), then pulling the userId out of the client route on the front end to save to Redux, then making ANOTHER call to the server with the userId to return the token.

For the second part (redirecting to the url the user attempted to access before being prompted to log in), I'm saving the desired redirect url to localStorage when they attempt to load a protected route, and then pulling it out later when the /user/ route is loaded on the client after successful social auth. All explained in more detail here

This does work, although it does NOT feel like a good answer, and I'd love to hear from anybody who figured out a better way to do this....