Authenticate with Sessions : Node Guide

Authenticate with Sessions

Armed with an understanding of sessions and cookies we'll now return to the main application. When we left it we had a registration and login but the pages weren't actually been secured.

Applying Sessions to the Film App

In the film application install the express-sessions module with:

npm install express-session

In the entry src/index.ts file import the module and add it to the middleware:

SNIPPET: src/index.ts
 

  import session from 'express-session';
...
// Configure session middleware
app.use(
  session({
    secret: process.env.SESSION_SECRET || 'your-secret',
    resave: false,
    saveUninitialized: false,
  })
);

Note: The importance of the middleware is important. Ensure that the above is before the middleware calling the routes.

An improvement on the previous example we will store the secret in the environmental variables. Add a secret to your .env file.

Create the Session Property

In the src/controllers/logincontrollers method of loginUser set a session variable in the successfuly try block, before the existing redirect to the cms route.

SNIPPET: src/controllers/logincontrollers
 

  ...
req.session.login = true;
res.redirect('/cms');
...

Creating an Authentication Script

Create a new file of src/authenticate.ts with the following:

src/authenticate.ts
 

  import { Request, Response, NextFunction } from 'express';

// Middleware to check if user is logged in
export function auth(req: Request, res: Response, next: NextFunction): void {
  // Check if the session variable 'login' exists and is set to true
  if (req.session.login === true) {
    // User is logged in, proceed to the next middleware/route handler
    next();
  } else {
    // User is not logged in, redirect to the login page or show an error
    res.redirect('/login'); // Adjust the login route URL as per your application
  }
}

This will export a auth method that will return a boolean if the req.session.login is true. This makes applying authenticaion easy to mulitple pages.

Limiting Access to Pages

In the src/index.ts import the auth method with:

Call these before routes you need to protect, ie all the cmsroutes with:

Here we reap the benefits of separating routes as all the CMS routes are now protected from unauthorized acceess. The auth method is called and if it returns false the cmsroutes are not added to the application and thus secure.

Updating the Views

We want uses to login/register if not, and be able to logout if logged in. We'll change the views accordingly. Edit the src/views/partials/head.ejs adding the following to the navigation links:

SNIPPET: src/views/partial/head.ejs
 

  <% if (loggedIn) { %>
              <li><a href="/cms">CMS</a></li>
              <li><a href="/logout">Logout</a></li>
              <% } else { %>
              <li><a href="/register">Register</a></li>
              <li><a href="/login">Login</a></li>
              <% } %>

For the above to work all the routes associated with loginroutes and logincontrollers will need to be send a loggedIn value of false.

In all render() methods in and src/routes/loginroutes.ts and src/controllers/logincontrollers send a value of:

... along with other values associated with each render. For example exisingUser becomes:

SNIPPET: src/controllers/logincontrollers
 

  const existingUser = await User.findOne({ email });
    if (existingUser) {
      res.render('register', { title: "Register", error: 'User already exists', loggedIn: false });
      return;
    }

This is done because when viewing any of these renders the user shouldn't be logged in, but in the process of trying.

Any render() methods in the src/routes/routes.ts should also be send the loggedIn value but based on req.session.login so the logic in the src/view/partials/head.ejs can be applied.

All render() methods in src/routes/routes.ts should have the following added:

For example the home page route of / should now appear as:

SNIPPET: src/routes/routes.ts
 

  router.get("/", async (req: Request, res: Response) => {
try {
const data = await dataController.getNewestFilms();
res.render("index", { "title": "Sheffield Streaming", "films": data , "loggedIn": req.session.login});
} catch (err) {
 res.status(404).send("Page not found");
}
  });

... toggling the display in the partial.

Logging Out

Add a logout route to the src/routes/loginroutes.ts.

SNIPPET: src/routes/loginroutes.ts
 

  router.get("/logout", (req: Request, res: Response) => {
  req.session.destroy(() => {
    res.redirect("/login");
  });
});

This uses the req.session.destroy() method seen previously to log the user out of the system.

Save and test your files. The CMS should now be protected based on the user created earlier.

Next: Glossary