facebook-passport with react-redux on node.js backend

Question

I'm sorry if this question has been asked before, We've researched and watch a few tutorials but none seem to clear our doubts on how to handle the user on the client side.

We're trying to authenticate with facebook (or any other strategy provider) using passport on Node.js, by triggering the flow from a React/Redux app, where I want to allow access to certain components when the user is logged in.

Our flow is working as it's supposed to be.

1. We start the express backend on port 8080, initialize passport with cookie-session:

    const app = express();
    // Use JSON for req.body
    app.use(bodyParser.json());
    // Set up cookies for passport logged in sessions
    app.use(cookieSession(settings.cookies));
    // Initialize passport
    app.use(passport.initialize());
    app.use(passport.session()); // Calls serializeUser & deserializeUser
    // Share static files
    app.use(express.static(path.join(__dirname, '../build')));
    // Register  routes
    app.use('/auth', authRouter);

2. The user clicks on the log in button on one of our components, which point to the /auth/facebook API

            render() {
        return (<div className="container">
            <h3>You need to be logged in to see this</h3>
            {/*Using a fetch onClick does not work because of CORS, use <a> */}
            <a href="https://localhost:8080/auth/facebook">
                <button >LOGIN WITH FACEBOOK</button>
            </a>
            </div>)}

3. Our express app exposes the routes for the passport flow on 'auth' :

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

//Facebook will redirect the user to this URL after approval.  
router.get('/facebook/callback', passport.authenticate('facebook'), (req, res) => {
    res.redirect('/dashboard');
});

3. A pop up for the Facebook Login shows, the user is redirected to the /facebook/callback endpoint.

It is at this point the frontend is correctly directed to the Dashboard component. We can see in the developer console the cookie with the auth is set. But We don't know how to access the User information that lies within the req.user on the backend.

We want to access the user information before displaying other components that use this data. The entry point app.js uses React Routes like:

  render() {
    return (
      < BrowserRouter >
        <div className='App'>
          <Layout title={'Passport Demo'}>
            <Route exact path='/' render={() => { return (<h1>This would be home</h1>) }} />
            {/* Hide other components unless logged in */}
            {this.state.isLoggedIn ?
              <div>
                <Route path='/dashboard' component={Home} />
                <Route path='/explore' component={Explore} />
              </div> : <Login />
            }
          </Layout>
        </div>
      </BrowserRouter >
    );
  }

How can we set the isLoggedIn and user data state after a successful redirect from Facebook? -- Ideally using redux actions and reducers.

How can we pass the user data from the backend to the frontend?

If the solution was to create a new route /users just to fetch the data, I would still need to access the userID/token to make the request with fetch or axios, how is this done?.

Thanks in advance.

Answer 1

I have been facing the same issue. I got the solution right now. Let take your front end is in localhost:3000 and backend is in localhost:9000 You had set the callback URL of facebook as localhost:9000/facebook/callback, right?

You need to change that to localhost:3000/login/social (just an example to show that you need to change callback URL to front end route). So this route will get the user details just like you have been receiving in backend( localhost:9000/facebook/callback ). And Now from localhost:3000/login/social fetch a post request to backend URL(ie, localhost:9000/facebook/callback ) containing the user details you have received from Facebook.

Now, Instead of redirecting from backend, res.send(token), so that you can receive the token in frontend. And then redirect