When I try to run, it say : Cannot read properties of undefined (reading 'firstName')

Question

I have been trying to solve this ise quite a few days and decided to get community help here.

I have been following the tutorial and here is the problem I face. When I try to get the value of req.user.Firstname in the below code, it threw an error of TypeError: Cannot read properties of undefined (reading 'name'). I am not sure what is going wrong here exactly. Below are the codes from my index.js,app.js file,User.js.

Note: I still render the dashboard page but without the firstName value.

App.js file

const path = require("path");
const express = require("express");
const dotenv = require("dotenv");
const mongoose = require("mongoose");
const morgan = require("morgan");
const exphbs = require("express-handlebars");
const connectDB = require("./config/db");
const passport = require("passport");
const session = require("express-session");
const MongoStore = require("connect-mongo");
const routes = require("./routes/index");
const authent = require("./routes/auth");
const bodyParser = require("body-parser");
const cookieSession = require("cookie-session");

//Loading the config
dotenv.config({ path: "./config/config.env" });

//Passport config
require("./config/passport")(passport);

//Coonecting to DB
connectDB();

const app = express();
app.use(express.json());

// Body parser
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//Morgan
if (process.env.NODE_ENV === "development") {
  app.use(morgan("dev"));
}

//Handlebars
app.engine(".hbs", exphbs.engine({ defaultLayout: "main", extname: ".hbs" }));
app.set("view engine", ".hbs");

//Session middleware
app.use(
  session({
    secret: "the secret",
    resave: false,
    saveUninitialized: false,
    // cookie: { secure: true },
    store: MongoStore.create({ mongoUrl: process.env.MONGO_URI }),
  })
);

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

//Static folder
app.use(express.static(path.join(__dirname, "public")));

//Routes
app.use("/", routes);
app.use("/auth", authent);

const PORT = process.env.PORT || 3000;

app.listen(
  PORT,
  console.log(
    `The server is running IN ${process.env.NODE_ENV} mode, on port ${PORT}`
  )
);

Index.js

const express = require("express");
const router = express.Router();

const { ensureAuth, ensureGuest } = require("../middleware/auth");

//Description Login/Landing page
//@route GET /
router.get("/", ensureGuest, function (req, res) {
  res.render("login", {
    layout: "login",
  });
});

//Description Dashboard page
//@route GET /dashboard
router.get("/dashboard", ensureAuth, function (req, res) {
  res.render("dashboard", {
    name: req.user.firstName,
  });
});

module.exports = router;

User model

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
  googleId: {
    type: String,
    // required: true,
  },
  displayName: {
    type: String,
    required: true,
  },
  firstName: {
    type: String,
    required: true,
  },
  familyName: {
    type: String,
    required: true,
  },
  image: {
    type: String,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model("User", UserSchema);

Passport.js

const GoogleStrategy = require("passport-google-oauth20").Strategy;
const mongoose = require("mongoose");
const User = require("../models/User");
require("https").globalAgent.options.rejectUnauthorized = false;

module.exports = function (passport) {
  passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: "http://localhost:3000/auth/google/callback",
      },
      async (accessToken, refreshToken, profile, done) => {
        console.log(profile);
        const newUser = {
          googleId: profile.id,
          displayName: profile.displayName,
          firstName: profile.name.givenName,
          familyName: profile.name.familyName,
          image: profile.photos[0].value,
        };

        try {
          let user = await User.findOne({ googleId: profile.id });

          if (user) {
            done(null, user);
          } else {
            user = await User.create(newUser);
            done(null, newUser);
          }
        } catch (error) {
          console.log(error);
        }
      }
    )
  );

  passport.serializeUser(function (user, done) {
    done(null, user.id);
  });

  passport.deserializeUser(function (user, done) {
    User.findById(user.id, function (error, user) {
      done(error, user);
    });
  });
};

Any ideas what I might have been doing wrong here? Thanks!