Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Express, Handlebars show flash messages

I'm using Node with express and handlebars. I have a login form, and should display a login error message to a user. My code is as follows: Validation (using passport):

...
else if (password != user.password) {
            return done(null, false, req.flash('message', 'Wrong password'));
...

In routes I got this:

app.post('/sign-in', passport.authenticate('local', {
        successRedirect : '/', // redirect to the home page
        failureRedirect : '/sign-in', // redirect back to the signup page if there is an error
        failureFlash : true // allow flash messages
    }));

Then to render my handlebars template,

app.get('/sign-in', function(req, res) {
        res.render("signin.handlebars", {layout: 'users.handlebars', action: 'Sign in', message: req.flash('message'),
                    csrf: 'CSRF token goes here' });
    })

Problem is, the flash message ain't shown as required when a wrong password is entered.

Edit: My express setup is:

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('models', __dirname + '/models');
app.use(express.static(__dirname + '/public'));     // set the static files location /public/img will be /img for users
app.use(cookieParser());
app.use(expressSession({secret:'somesecrettokenhere', resave: true, 
                        saveUninitialized: true, }));
app.use(passport.initialize());
app.use(passport.session());
//app.use(session({ store: new RedisStore }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(flash());
app.use(morgan("dev"));
app.disable('x-powered-by');
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
});
like image 559
Denny Avatar asked Aug 29 '14 08:08

Denny


People also ask

How do I show flash messages in Express?

To implement flash messages in NodeJs with connect-flash module, you need to install the required dependencies using the command. Express: Required by the library connect-flash to run. Express-session: to create a session whenever a message is flashed, so that the user can be redirected to a particular page.

What is a flash message Express?

The express-flash module exposes getter and setter methods for a flash message of the form, { flash: { type: 'type', message: 'message' }} and depends on the express-session module. The method req. flash(type, message) sets the value of a new flash message and adds it to an array of messages of the same type.

What does express HandleBars do?

HandleBars can be used to render web pages to the client side from data on the server-side. To use handlebars in express, we need to store HTML code into a . hbs extension in the 'views' folder in the source directory as hbs looks for the pages in the views folder.


2 Answers

I solved it btw like so: ...

if (!user) {
            return done(null, false, {
                message: 'The email you entered is incorrect'
            });

... That encodes the message in JSON. Then in routes I got:

app.get('/sign-in', function(req, res) {
        res.render("signin.handlebars", {layout: 'users.handlebars', action: 'Sign in', ***error: req.flash('error')***,
                    csrf: 'CSRF token goes here' });
    })

Then in my handlebars template:

{{#if error}}
    <div class="alert alert-danger">{{error}}</div>
{{/if}}
like image 121
Denny Avatar answered Oct 13 '22 00:10

Denny


You need to add a global variable in your index.js

app.use((req, res, next)=>{
  app.locals.success = req.flash('success')
  next();
});

Then in your route you add the message

req.flash("success", "Your message");

Finally you .hbs

{{#if success}}
{{success}}
{{/if}}
like image 41
degs Avatar answered Oct 13 '22 01:10

degs