I just included express sessions in my application. I am setting req.session.user=user in my server.js. I am also sending it to my /welcome route, which represents my homepage. I am currently using react router to show my components on the client side as the user navigates. However, after implementing express sessions, I want to express /welcome route to load my WelcomeUser component with the information about the user available through req.session.user object. My main motive is to send the express req.session.user to the WelcomeUser component, so I can create a profile page for my user. I was looking for solutions and I found the use of fetchAPI to get the data from an express route. A workaround is to have a different route like /getsession in my server.js and fetch the session from that URL in componentDidMount lifecycle method, but I don't know if it's the most optimal way to do this. The following are the relevant part of my code.
This is the express route that that is similar to my react-router route that I am using to show my component. In other words, /welcome route in my react router calls callback(null, WelcomeUser) to show the component.
app.get('/welcome', function (req, res, next) {
if(!req.session.user){
res.status(401).send();
}else{
console.log("********THIS IS THE USER SESSION******* : "+ req.session.user);
// res.status(200).send( "We are here" );
res.status(200).render( './WelcomeUser.js' );
}
});
The following is my react router:
component: Base,
childRoutes: [
{
path: '/',
component: HomePage
},
{
path: '/welcome',
getComponent: (location, callback) => {
if (*some_login_mechanism_to_identify_if_user_is_loggedin*){
callback(null, WelcomeUser);
}
else
{
callback(null, HomePage);
}
}
}, ***morecode***
The following is my local authentication. You can see I am setting req.session.user=user; here I am using passport local strategy for this one.
function(req, email, password, done) {
process.nextTick(function() {
if(!req.user) {
User.findOne({'local.email': email}, function(err, user) {
if(err) {
console.error(err);
return done(err);
}
if(user) {
return done(null, false, {errMsg: 'email already exists'});
}
else {
var newUser = new User();
newUser.username = req.body.username;
newUser.email = email;
newUser.password = password;
req.session.user=newUser;
newUser.save(function(err) {
if(err) {
if(err.message == 'User validation failed') {
return done(null, false, {errMsg: 'Please fill all fields'});
}
return done(err);
}
return done(null, newUser);
});
}
});
}
The following is one of my social authentication routes:
function(req, accessToken, refreshToken, profile, done) {
process.nextTick(function() {
if(!req.user) {//confirm that user not loggedin
User.findOne({'social.google.id': profile.id }, function(err, user) {
if (err) {
console.error('There was an error accessing the dbase', err.message);
return done(err);
}
if (user) {
req.session.user=user;
return done(null, user);
}
else {
var newUser = new User();
// variables to set my user information from profile variable
req.session.user=newUser;
newUser.save(function(err) {
if (err) {
console.error(err);
return done(err);
}
return done(null, newUser);
});
}
}
);
}
All of these codes are present in their separate files. For example, login is present in the local-login file and social login is present in the google-login file. The following is my code to redirect to the /welcome route after authenticating my user.
app.get('/auth/google/callback',
passport.authenticate('google', { failureRedirect: '/' }),
function(req, res) {
res.redirect('/welcome'); // this was loading the component from the react router, before I added app.get('/welcome') route in my server.js
});
This code was working fine before I had my app.get(/welcome) route in my server.js. After adding the app.get(/welcome) in my server.js, it seems like express is overriding my /welcome route result from react router and only showing "we are here" (I commented it out in my express welcome route) in the homepage.