'I'm working on a CRUD system which include login and registration form. I'm unable to retrieve user first_name or last_name after successful login

Below are codes for my Register Controller, Register Route, Login Controller, Login Route and my Home page(handlebars) where i would like to display user first name etc.... Everything is working fine but it is not displaying user information after successful login

Registration controller

const mysql = require('mysql');
const bcrypt = require('bcrypt');

require('dotenv').config();

// View login
function register(req, res){
    if(req.session.loggedin != true){
        res.render('register');
    }else{
        res.redirect('/')
    }
}

// Connection Pool (Database credentials)
const pool = mysql.createPool({
    connectionLimit : 100,
    host            : process.env.DB_HOST,
    user            : process.env.DB_USER,
    password        : process.env.DB_PASS,
    database        : process.env.DB_NAME,
});

function registerUser(req, res){

    const data = req.body;

    pool.getConnection((err, connection) => {
        if(err) throw err; // Throw an error if no connection
        console.log('Connected as ID' + connection.threadId);

        // Select from database to check for existing user
        connection.query('SELECT * FROM register WHERE email = ?', [data.email], (err, rows) => {
            // When done
            connection.release();
            if(rows.length > 0){
                res.render('register', {rows, exist: 'User already created' });
            }else{

                //Hash password
                bcrypt.hash(data.password, 12).then (hash => {
                    data.password = hash;
                    console.log(hash);

                    pool.getConnection((err, connection) => {
                        if(err) throw err; // Th row an error if no connection
                        console.log('Connected as ID' + connection.threadId);

                        //insert into register table
                        connection.query('INSERT into register SET first_name = ?, last_name = ?, email = ?, password = ? ', [data.first_name, data.last_name, data.email, data.password], (err, rows) => {
                            // When done
                            connection.release();
                            if(!err){
                                res.render('register', { alert: 'Account created successfully' });
                            }else{
                                console.log(err);
                            }
                        });
                    });
                })
            }
        });
    });
}

module.exports = {
    register,
    registerUser
};

Registration Route

const express = require('express');
const registerController = require('../controllers/registerController');

const registerRouter = express.Router();

//Router
registerRouter.get('/register', registerController.register);
registerRouter.post('/register', registerController.registerUser);

module.exports = registerRouter;

Login Controller

const mysql = require('mysql');
const bcrypt = require('bcrypt');



// View login
function login(req, res){
    if(req.session.loggedin != true){
        res.render('login');
    }else{
        res.redirect('/')
    }
}

require('dotenv').config();

// Connection Pool (Database credentials)
const pool = mysql.createPool({
    connectionLimit : 100,
    host            : process.env.DB_HOST,
    user            : process.env.DB_USER,
    password        : process.env.DB_PASS,
    database        : process.env.DB_NAME,
});

function auth(req, res){

    const data = req.body;

    pool.getConnection((err, connection) => {
        if(err) throw err; // Throw an error if no connection
        console.log('Connected as ID' + connection.threadId);

        // Select from database to check for existing user
        connection.query('SELECT * FROM register WHERE email = ?', [data.email], (err, rows) => {
            // When done
            connection.release();
            if(rows.length > 0){
                //res.render('register', {rows, exist: 'User already created' });
                rows.forEach(element => {
                    bcrypt.compare(data.password, element.password, (err, isMatch) =>{

                        if(!isMatch){
                            res.render('login', { error: 'Incorrect Password' });
                        }else{
                           req.session.loggedin = true;
                           req.session.name = element.name;
                           res.redirect('/');
                        }
                    });
                });
            }else{
                res.render('login', { error: 'User does not exist' });
            }
        });
    });
}

function logout(req, res){
    if(req.session.loggedin == true){
        req.session.destroy();
    }
    res.redirect('/login');
}

module.exports = {
    login,
    auth,
    logout
};

Login Route

const express = require('express');
const loginController = require('../controllers/loginController');

const loginRouter = express.Router();

//Router
loginRouter.get('/login', loginController.login);
loginRouter.post('/login', loginController.auth);
loginRouter.get('/logout', loginController.logout);

module.exports = loginRouter;

app.js

const express = require('express');
const exphbs = require('express-handlebars');
const bodyPaser = require('body-parser');
const mysql = require('mysql');
const session = require('express-session');

// Require user route
//const homeRouter = require('./server/routes/homeRoute');
const userRouter = require('./server/routes/userRoute');
const loginRouter = require('./server/routes/loginRoute');
const registerRouter = require('./server/routes/registerRoute');


require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3000;

// Parsing middleware
// Parse application/x-www-form-urlencoded
app.use(bodyPaser.urlencoded ({ extended: false }));

// Parse application/json
app.use(bodyPaser.json());

//static files
app.use(express.static('public'));

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

// Connection Pool (Database credentials)
const pool = mysql.createPool({
    connectionLimit : 100,
    host            : process.env.DB_HOST,
    user            : process.env.DB_USER,
    password        : process.env.DB_PASS,
    database        : process.env.DB_NAME,
});

//custom code remove at any time if error is encountered
app.use(session({
    secret: 'secret',
    resave: false,
    saveUninitialized: true,
    //cookie: { secure: true }
}));

// end custom code remove at any time if error is encountered

// Database connection
pool.getConnection((err, connection) => {
    if(err) throw err; // Throw an error if no connection
    console.log('Connected as ID' + connection.threadId);
});

//Routes
//app.use('/', homeRouter);
app.use('/', userRouter);
app.use('/', loginRouter);
app.use('/', registerRouter);

app.get('/', (req, res) => {
    //res.render('home');
    if(req.session.loggedin == true){
        res.render('home', {name: req.session.first_name});
        
    }else{
        res.redirect('/login')
    }
});


app.listen(PORT, () =>{
    console.log(`Listening on PORT: ${PORT}...`);
});

home.hbs

<div class="bg-light p-5 rounded">
    <h1>User Management System</h1>
    <h3>Welcome {{name}}</h3>
    <p class="lead">This example is a quick boostrap design to illustrate the implementation of User Management System using Express, Handlebars and Mysql.</p>
    <a class="btn btn-sm btn-info" href="/users" role="button"><i class="bi bi-view-list"></i> View all users</a>
    <a class="btn btn-sm btn-success" href="/add-user" role="button"><i class="bi bi-person-plus"></i> Add a user</a>
</div>


Solution 1:[1]

Okay.... I figured it out... I went through the code again... The mistake was in Login Controller

    if(!isMatch){
      res.render('login', { error: 'Incorrect Password' });
    }else{
     req.session.loggedin = true;
     req.session.first_name = element.first_name;
     res.redirect('/');
   }

The name didn't correspond with the column name in my database hence not displaying the name

And further made the correction in all affected areas including the home.hbs

I can now display user details after successful login

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Innocent Ikart