How do I write a conditional for express-sessions login/logout in my main handlebars layout?

Question

I have my login/logout routes written in my controllers.

//LOGIN FORM
app.get('/login', function (req, res) {
    res.render('../views/signup-signin/login');
});

//LOGIN POST
app.post('/login', function (req, res) {
    User.find(req.body.username, function (user) {
        bcrypt.compare(req.body.password, user.password, function (err, result) {
            if (result) {
                req.session.currentUser = user.id;
                res.redirect('/');
            } else {
                res.redirect('/login');
            }
        });
    });
});

//LOGOUT
app.delete('/logout', function (req, res) {
    req.session.currentUser = null;
    res.redirect('/');
});

What I'm having trouble with is being able to write an if/else statement in my 'main.handlebars' layout that renders Sign Up/Login when req.session.currentUser = null, and Logout when req.session.currentUser = user.id

<div id="signin_up">
        <a href="/signup"><button>Sign Up</button></a>
        <a href="/login"><button>Login</button></a>
</div>

<form action="/logout" method="POST">
    <input type="hidden" name="_method" value="DELETE">
    <input type="submit" value="Logout">
</form>

I can't figure out how to get access to the sessions id and write this in a script tag in the 'main.handlebars' file.

Can anyone help me get this feature working?

Thanks ahead of time!

Answer 1

I have been dealing with an issue similar to what you are describing for a registration/login interface using Node/Express/Handlebars and I figured out a good solution where all you do is pass the needed session data as a variable in the route of the loading page.

As a note I am taking it you have sessions figured out.

The main thing you have to realize is that handlebars layouts/views (ie FileName.handlebars) are passed page (or dynamic) variables in the route.

So all you need to do is go to the route, figure out if your session is set, and then pass it as a variable to the loading page.

In handlebars, you access passed variables using:

{{variable}}

In the HTML

With this in mind, and going back to your issues, you need to create a handlebars conditional based on this variable, which would look like this.

{{#if variable}}
<!-- SHOW LOGIN -->
{{else}}
<!-- SHOW LOGOUT -->
{{/if}}

Then if your variable is set when the page loads you see the login, else you see the logout.

My personal issue was that I had administrative features in my layout that I obviously only wanted admins to see, so I worked it out this way in my route:

let admin;

if(req.session.type == "admin"){
    admin = "T";
}

res.render("account", {
    pageTitle:"Account Information",
    admin: admin
});

Then in the handlebars layout I did something like this:

{{#if admin}}
<!-- SHOW WHAT I NEED -->
{{/if}}

---

You could alternatively create the form code in the route and pass the HTML as a variable to the handlebars layout. I think this would be a pain to do, but it would be possible. However just so this is noted, if you want to pass HTML to a handlebars view you need to wrap it in 3 braces like so:

{{{HTMLVariable}}}

Otherwise I am pretty sure it is passed to the page with the HTML characters escaped.