Flash messages handlebars - node.js

Question

How do i print out flash messages in handlebars. Like i want to print out a helper message to the user if they enter a wrong login.
Routes:
router.post('/register-user', async (req, res, next) => {
let newUser = req.body
try {
if (await userCheck.userCheck(newUser)) {
const userExists = await User.exists({ username: req.body.username })
if (userExists) {
req.session.email = req.body.username;
res.redirect('/apikey')
console.log("User exists")
} else {
try {
req.session.email = req.body.username;
await userFacade.addUser(newUser)
console.log("New user")
res.redirect('/apikey')
} catch (err) {
console.log(err)
}
}
} else {
req.flash("error", "Something went wrong during login, please try again.");
res.redirect('/')
}
} catch (error) {
console.log(error)
}
})
I have the flash message "error", but how do i show that on the page only if its set? Like if u were to use useStates in React.
I tried something like this:
{{#if error}}
{{error}}
{{/if}}
App.js
//Express session
app.use(session({
secret: process.env.SESSION_SECRET,
saveUninitialized: true,
resave: true
}));
//Flash
app.use(flash());
//Routes
app.use('/', require('./routes/index'))

Answer 1

In order to render the value you have saved to the flash store you would need to retrieve it from the store by calling req.flash using the same key that you used to save the value: req.flash('error'). You would then need to assign the returned value to a member of the data object you are passing to your render call in your GET handler for the / path - as this is the path you redirect your users to when you call res.redirect('/').
Your GET handle for / may become something like the following:
app.get('/', (req, res) => {
res.render('index', { error: req.flash('error') });
});
Note: The result of calling req.flash('error') is an array. Your template will work because Handlebars stringifies array values, but {{#each error}}{{this}}{{/each}} would produce the same result when error is an array with a single element. If error were to have multiple elements, the {{error}} in your template would print all elements joined with commas, as in error 1,error 2,error 3.