Passport-facebook, Node, Express, React: log in successful, but req.user and req.session.passport are undefined

27 Views Asked by At

I'm creating a facebook clone using react, node, and express. I'd like users to be able to log in with real facebook accounts, and am using passport-facebook to implement that.

I am able to successfully log in (facebook redirects to my callback url; I can access req.user and req.session.passport in the middleware attached to my auth/facebook/callback route). This redirects to my react client, which then sends a request to my API. When I console.log req.user and req.session.passport in my API at this point, both are undefined. My serialize and deserialize functions appear correct, but are not called as I would expect (on log in, neither serialize nor deserialize were called).

I've been stumped by this for a while, and have spent a full day attempting solutions. I read through the passport documentation, reviewed my passport configuration, app.js middleware setup, and have attempted all the solutions suggested on stack overflow's top questions related to the keywords (MERN, passport-facebook, req.user undefined, etc.).

Github repo links, then code below. Thank you, any and all, for your time.

API repo (dev branch): https://github.com/maahsnd/fakebookAPI Front end repo (dev branch): https://github.com/maahsnd/fakebookFrontEnd

`//app.js, passport strategy
const createError = require('http-errors');
const express = require('express');
const session = require('express-session');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const passport = require('passport');
const FacebookStrategy = require('passport-facebook');
const User = require('./models/User');
const cors = require('cors');
require('dotenv').config();
require('./mongoConfig');

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const postsRouter = require('./routes/posts');

const app = express();

// Session middleware
app.use(
  session({
    secret: process.env.SECRET_KEY,
    saveUninitialized: true,
    resave: true,
    cookie: {
      secure: true,
      sameSite: 'none'
    }
  })
);

app.use(
  cors({
    origin: 'http://localhost:5173',
    credentials: true
  })
);
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Initialize Passport middleware
app.use(passport.initialize());
app.use(passport.session());

// Passport Configuration
passport.use(
  new FacebookStrategy(
    {
      clientID: process.env.FACEBOOK_APP_ID,
      clientSecret: process.env.FACEBOOK_APP_SECRET,
      callbackURL: 'https://localhost:3000/auth/facebook/callback/',
      profileFields: ['displayName']
    },
    async (accessToken, refreshToken, profile, done) => {
      try {
        const user = await User.findOne({ username: profile.displayName });
        if (user) {
          return done(null, user);
        }
        if (!user) {
          const newUser = new User({
            username: profile.displayName,
            friends: [],
            posts: [],
            friendRequests: []
          });
          await newUser.save();
          return done(null, newUser);
        }
      } catch (err) {
        return done(err);
      }
    }
  )
);

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/posts', postsRouter);

passport.serializeUser((user, done) => {
  console.log('SERIALIZE, PARAM---->' + user);
  done(null, user._id);
});

passport.deserializeUser(async (id, done) => {
  console.log('DESERIALIZE, PARAM---->' + id);
  try {
    const user = await User.findById(id).exec();
    done(null, user);
  } catch (err) {
    done(err);
  }
});

// Error handling middleware
app.use(function (err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  console.error('err:' + err);
});

module.exports = app;


// route called by fb after login
router.get(
  '/auth/facebook/callback/',
  passport.authenticate('facebook', {
    failureRedirect: 'http://localhost:5173/login',
    failureMessage: true
  }),
  function (req, res) {
    req.login(req.user, function (err) {
      if (err) {
        return next(err);
      }
      console.log('req.user passport--->' + req.user);
      console.log('req.session.passport passport--->' + req.session.passport);
    });
    res.redirect('http://localhost:5173/' + req.user._id);
  }
);`
0

There are 0 best solutions below