PassportJS and ReactJS

Question

I'm trying to use PassportJS with a NodeJS server that is used by a ReactJS UI. I'm having trouble getting my Facebook strategy to work. So far it looks like I'm setting it up right:

Setup in server/app.js file

function generateOrFindUser(accessToken, refreshToken, profile, done){
  if(profile.emails[0]){
    User.findOneAndUpdate(
      {email:profile.emails[0].value},
      {
        name:profile.displayName || profile.username,
        email: profile.emails[0].value,
        photo: profile.photo[0].value
      },
      {
        upsert:true
      },
      done
    );
  }else{
    var noEmailError = new Error("Cannot login to Career Playbook as because of this service's email privacy settings.");
    done(noEmailError, null);
  }
}
console.log(process.env.REACT_APP_FB_ID,process.env.REACT_APP_FB_SECRET);
passport.use(new FacebookStrategy({
  clientID: process.env.REACT_APP_FB_ID,
  clientSecret:process.env.REACT_APP_FB_SECRET,
  callbackURL:'http://localhost:3030/api/auth/login/facebook/return',
  profileFields:['id','displayName','photos','email']
},
generateOrFindUser)
);

passport.serializeUser((user,done)=>{
  done(null,user._id);
});

passport.deserializeUser((userId,done)=>{
  User.findById(userId,done);
});

//--------------ACTIVATE SESSION----------------------
app.use(session({
  secret:'pug love',
  resave: true,
  saveUninitialized:true,
  store:new MongoStore({
    mongooseConnection:db
  })
}));

//make user ID available in templates
app.use(function(req,res,next){
  res.locals.currentUser = req.session.userId;
  next();
});


//setup passport
app.use(passport.initialize());
app.use(passport.session());

Route setup in server/routes/authRoutes.js

authRoutes.get('/login/facebook', function(req, res, next) {
  passport.authenticate('facebook',{scope:["email"]});
});

//GET /auth/facebook/return
authRoutes.get('/login/facebook/return',
  passport.authenticate('facebook', { failureRedirect: '/' }),
  function(req, res) {
    // Successful authentication, redirect home.
    console.log("SUCCESS");
    res.redirect('http://localhost:3000');
  });
'''

React code in src/views/login.js
```javascript
  render(){
    return (

        <div className="card jLogin">
          <div className="card-header">
            <h4>Login</h4>
          </div>
          <div className="card-block">
            <a href="http://localhost:3030/api/auth/login/facebook">Login</a>
          </div>

        </div>

    );
  }
'''

Here's the project on Github under the "social login" branch:
https://github.com/justincrich/career-playbook/tree/social-login

Thanks for your help!

Welcome to the Treehouse Community

Looking to learn something new?

Justin Rich

Justin Rich

PassportJS and ReactJS