FeathersJS Auth Recipe: Authenticating Express middleware (SSR)

Feathers authentication also supports authenticating routes of Express middleware and can be used for server side rendering. This recipe shows how to create a login form, a /logout endpoint and a protected /chat endpoint that renders all users and recent chat messages from our chat application.

The key steps are:

  1. Obtain the JWT by either going through the oAuth or local authentication flow
  2. Set the JWT in the cookie (since the browser will send it with every request)
  3. Before any middleware that needs to be protected, add the cookieParser() and the authenticate('jwt') authentication Express middleware. This will set req.user from the user information in JWT or show a 401 error page if there is no JWT or it is invalid.

Configuration

In order for the browser to send the JWT with every request, cookies have to be enabled in the authentication configuration.

Note: If you are using oAuth2, cookies are already enabled.

If not enabled yet, add the following to the authentication section in config/default.json:

  1. "cookie": {
  2.   "enabled": true,
  3.   "name": "feathers-jwt"
  4. }

We want to authenticate with a username and password login by submitting a normal HTML form to the /authentication endpoint. By default a successful POST to that endpoint would render JSON with our JWT. This is fine for REST APIs but in our case we want to be redirected to our protected page. We can do this by setting a successRedirect in the local strategy section of the authentication configuration in config/default.json:

  1. "local": {
  2.   "entity": "user",
  3.   "usernameField": "email",
  4.   "passwordField": "password",
  5.   "successRedirect": "/chat"
  6. }

Setting up middleware

The JWT authentication strategy will look for a JWT in the cookie but only routes that parse the cookie will be able to access it. This can be done with the cookie-parser Express middleware:

  1. npm install cookie-parser

Now we can protect any Express route by first adding cookieParser(), authenticate('jwt') to the chain.

Note: Only register the cookie parser middleware before routes that actually need to be protected by the JWT in the cookie in order to prevent CSRF security issues.

Since we want to render views on the server we have to register an Express template engine. For this example we will use EJS:

  1. npm install ejs

Next, we can update src/middleware/index.js to

  • Set the view engine to EJS (the default folder for views in Express is views/ in the root of the project)
  • Register a /login route that renders views/login.ejs
  • Register a protected /chat route that gets all messages and users from the Feathers application and then renders views/chat.ejs
  • Register a /logout route that deletes the cookie and redirect back to the login page

Note: We could also generate the middleware using feathers generate middleware but since they are all fairly short we can keep it in the same file for now.

  1. const cookieParser = require('cookie-parser');
  2. const { authenticate } = require('@feathersjs/authentication').express;
  4. module.exports = function (app) {
  5.   // Use EJS as the view engine (using the `views` folder by default)
  6.   app.set('view engine', 'ejs');
  8.   // Render the /login view
  9.   app.get('/login', (req, res) => res.render('login'));
  11.   // Render the protected chat page
  12.   app.get('/chat', cookieParser(), authenticate('jwt'), async (req, res) => {
  13.     // `req.user` is set by `authenticate('jwt')`
  14.     const { user } = req;
  15.     // Since we are rendering on the server we have to pass the authenticated user
  16.     // from `req.user` as `params.user` to our services
  17.     const params = {
  18.       user, query: {}
  19.     };
  20.     // Find the list of users
  21.     const users = await app.service('users').find(params);
  22.     // Find the most recent messages
  23.     const messages = await app.service('messages').find(params);
  25.     res.render('chat', { user, users, messages });
  26.   });
  28.   // For the logout route we remove the JWT from the cookie
  29.   // and redirect back to the login page
  30.   app.get('/logout', cookieParser(), (req, res) => {
  31.     res.clearCookie('feathers-jwt');
  32.     res.redirect('/login');
  33.   });
  34. };

Note: npm ls @feathersjs/authentication-jwt has to show that version 2.0.0 or later is installed.

Views

The login form has to make a POST request to the /authentication endpoint and send the same fields as any other API client would. In our case specifically:

  1. {
  2.   "strategy": "local",
  3.   "email": "user@example.com",
  4.   "password": "mypassword"
  5. }

email and passwords are normal input fields and we can add the strategy as a hidden field. The form has to submit a POST request to the /authentication endpoint. Since services can accept both, JSON and URL encoded forms we do not have to do anything else. The login page at views/login.ejs then looks like this:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.   <meta name="viewport"
  6.     content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
  7.   <title>Feathers chat login</title>
  8.   <link rel="shortcut icon" href="favicon.ico">
  9.   <link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.2.0/public/base.css">
  10.   <link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.2.0/public/chat.css">
  11. </head>
  12. <body>
  13.   <div id="app" class="flex flex-column">
  14.     <main class="login container">
  15.       <div class="row">
  16.         <div class="col-12 col-6-tablet push-3-tablet text-center heading">
  17.           <h1 class="font-100">Log in</h1>
  18.         </div>
  19.       </div>
  20.       <div class="row">
  21.         <div class="col-12 col-6-tablet push-3-tablet col-4-desktop push-4-desktop">
  22.           <form class="form" method="post" action="/authentication">
  23.             <input type="hidden" name="strategy" value="local">
  24.             <fieldset>
  25.               <input class="block" type="email" name="email" placeholder="email">
  26.             </fieldset>
  28.             <fieldset>
  29.               <input class="block" type="password" name="password" placeholder="password">
  30.             </fieldset>
  32.             <button type="submit" id="login" class="button button-primary block signup">
  33.               Log in
  34.             </button>
  35.           </form>
  36.         </div>
  37.       </div>
  38.     </main>
  39.   </div>
  40. </body>
  41. </html>

The views/chat.ejs page has the users, user (the authenticated user) and messages properties available which we passed in the /chat middleware. Rendering messages and users looks similar to the client side chat frontend:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.   <meta name="viewport"
  6.     content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
  7.   <title>Feathers chat</title>
  8.   <link rel="shortcut icon" href="favicon.ico">
  9.   <link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.2.0/public/base.css">
  10.   <link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.2.0/public/chat.css">
  11. </head>
  12. <body>
  13.   <div id="app" class="flex flex-column">
  14.     <main class="flex flex-column">
  15.       <header class="title-bar flex flex-row flex-center">
  16.         <div class="title-wrapper block center-element">
  17.           <img class="logo" src="http://feathersjs.com/img/feathers-logo-wide.png"
  18.             alt="Feathers Logo">
  19.           <span class="title">Chat</span>
  20.         </div>
  21.       </header>
  23.       <div class="flex flex-row flex-1 clear">
  24.         <aside class="sidebar col col-3 flex flex-column flex-space-between">
  25.           <header class="flex flex-row flex-center">
  26.             <h4 class="font-300 text-center">
  27.               <span class="font-600 online-count">
  28.                 <%= users.total %>
  29.               </span> users
  30.             </h4>
  31.           </header>
  33.           <ul class="flex flex-column flex-1 list-unstyled user-list">
  34.             <% users.data.forEach(user => { %><li>
  35.               <a class="block relative" href="#">
  36.                 <img src="<%= user.avatar %>" alt="" class="avatar">
  37.                 <span class="absolute username"><%= user.email %></span>
  38.               </a>
  39.             </li><% }); %>
  40.           </ul>
  41.           <footer class="flex flex-row flex-center">
  42.             <a href="/logout" id="logout" class="button button-primary">
  43.               Sign Out
  44.             </a>
  45.           </footer>
  46.         </aside>
  48.         <div class="flex flex-column col col-9">
  49.           <main class="chat flex flex-column flex-1 clear">
  50.             <% messages.data.forEach(message => { %>
  51.             <div class="message flex flex-row">
  52.               <img src="<%= message.user && message.user.avatar %>"
  53.                 alt="<%= message.user && message.user.email %>" class="avatar">
  54.               <div class="message-wrapper">
  55.                 <p class="message-header">
  56.                   <span class="username font-600">
  57.                     <%= message.user && message.user.email %>
  58.                   </span>
  59.                   <span class="sent-date font-300"><%= new Date(message.createdAt).toString() %></span>
  60.                 </p>
  61.                 <p class="message-content font-300"><%= message.text %></p>
  62.               </div>
  63.             </div>
  64.             <% }); %>
  65.           </main>
  66.         </div>
  67.       </div>
  68.     </main>
  69.   </div>
  70. </body>
  71. </html>

If we now start the server (npm start) and go to localhost:3030/login we can see the login page. We can use the login information from one of the users created in the JavaScript chat frontend and once successful, we will be redirected to /chat which shows the list of all current messages and users and clicking the Sign out button will log us out and redirect to the login page.