How to show Login UI message in express handlebar with passport.js LocalStrategy

Steps

1. Install npm dependencies
2. Setting in the user router
3. Passport.js configuration in LocalStrategy
4. Create a handlebar partial template and insert in view

Install Dependencies

Install npm dependencies with npm install if you’ve haven’t installed.

Setting in the user router

message: req.flash(‘error’)

Add {message: req.flash(‘error’)} as login route local variable in the login route controller

badRequestMessage

badRequestMessageto change the “Missing credentials” default message

Passport.js configuration in LocalStrategy

Return error message with return done(null, false, { message: 'That email is not registered' })

Create a handlebar partial template and insert in view

The handlebar has condition helper, you can use it with:

message is an array, if message exists, show the alert message.

Here, I made up the alert message with bootstrap 4.0 dismissing alert.

Create partial in the path views/partials/

Then, you can insert a partial template with {{>partial}}

🔗Reference:

stackoverflow_passport-js-missing-credentials