DEV Community: Chinara James

How to create a password less sign in workflow (magic links)

Chinara James — Thu, 04 Jul 2019 15:05:36 +0000

If you have ever used apps like Slack you would have come across a nifty way to sign in using your email address only, password-less or email only sign in using "magic links". This is especially useful as people usually have a hard time remembering passwords or are accessing apps via phones and have a hard time typing in complicated passwords. It works by sending the user a "magic link" which they then click and are automatically authenticated and signed in.

Screencast

In the post, I'm going to show you how to roll your own simple password-less sign in for you application. I am going to build it using ExpressJs but the logic can be applied to any project.

The basic steps to a password-less sign in are as follows:

Generate a token and associate it with a user
Generate a url which will be a combination of the token and query parameters example email or id
Email the url to the user
Validate the token and authenticate the user when they use the url

Setting up a database and scaffolding the app

Before you begin, you need a simple database with at least a users table. The table should have at the minimum the following fields:

id
name
email
token
token_date

I'm using Airtable for the database as it provides a quick and easy way to get a simple database and they have a nice API to get the data.

Just want the code?

If you would like to follow along you can get the base code, my Express Airtable Starter or the full working demo.

Generate a token an associate it with a user

In your controllers directory, create a new controller to handle user logic. Follow a sensible naming convention example userController.js.

In this file you will require in the dependencies, of course these should be installed previously using your preferred package manager (npm or yarn). The package you will need are as follows:

// Mandatory
const querystring = require("querystring");
const nodemailer = require("nodemailer");
const diffInMinutes = require("date-fns/difference_in_minutes");

//Only if you are using Airtable as I am
const Airtable = require("airtable");

Optional: Airtable config

If you're following along with me and using Airtable as the database, you would need to store your API key and Base ID in the environment variables file (variables.env) and configure your app to use the Airtable API.

// userController.js
// After dependency declarations
const base = new Airtable({
  apiKey: process.env.AIRTABLE_API_KEY
}).base(process.env.AIRTABLE_BASE_ID);

const TABLE = base("users");
const VIEW = "Grid view";

I have also abstracted a helper function to get records from Airtable no matter the table and view. This I have store in a controllers/dataController.js file. Notice that you pass in two parameters, the name of the table and the name of the view.

// dataController.js

exports.getAirtableRecords = (table, view) => {
  let records = [];
  return new Promise((resolve, reject) => {
    // Cache results if called already
    if (records.length > 0) {
      resolve(records);
    }

    const processPage = (partialRecords, fetchNextPage) => {
      records = [...records, ...partialRecords];
      fetchNextPage();
    };

    const processRecords = err => {
      if (err) {
        reject(err);
        return;
      }

      resolve(records);
    };

    table
      .select({
        view
      })
      .eachPage(processPage, processRecords);
  });
};

In order to use our above helper function we need to require in this file in our user controller file.

// userController.js
const data = require("./dataController.js");

We will then create two helper functions. One to generate a token and the other the generate the magic link.

// userController.js
const generateToken = (id, email) => {
  let source = `${id}${email}`
  let token = ''
  for (let i = 0; i &lt; source.length; i++) {
    token += source.charAt(Math.floor(Math.random() * source.length));
  }

  return token;
}

const generateLoginUrl = (token, email) => {
  let url = '';
  url = `login/magiclink/${token}?${querystring.stringify({email: email})}`
  return url
}

User sign up

Let's create a route and view for the user to sign up. If you're following along all my app's routes are located in routes/index.js. First let's create a route that would display the sign up page. For simplicity, I'm using the home page or index.html as the sign up page, so the route would be

// index.js
router.get("/", userController.getSignup);

If you're not familiar with routes, it simply tell the app what function(s) to execute when a request is made (example: user visits a page or submits a form) to a particular url. So here if we get a GET request to the homepage ('/') the application should execute the getSignup function in the user controller.

Now in our userController.js file we create the getSignup function.

// userController.js
exports.getSignup = (req, res) => {
  res.render('index'});
});

The above simply loads the index (homepage) template, which in my case I'm using pug so the index.pug file will be rendered.

extends ../layouts/base

block content
  h1.title Sign Up

  if(message)
    .notification= message

  form.form.form--signup(action="/signup", method="POST")
    .field
      label.label(for="name") Full Name
      .control
        input#name.input(type="text", name="name")

    .field
      label.label(for="email") Email Address
      .control
        input#email.input(type="email", name="email")

    .field
      .control
        input.button.is-primary(type="submit", value="Sign Up")

Note the form action and method. When the user submits, we are sending a POST request to the url '/signup'. Let's create the route and the functions for signing up.

The logic for the sign up flow is

Creating a new user record
If this is successful we use the user id and email address to generate the token and update the user record
We then flash a message to the user to 4. check their email for the link
Generate the magic link
Email them the magic link

// index.js
router.post("/signup", userController.signUp, userController.sendEmail);

// userController.js
exports.signUp = (req, res, next) => {
  // 1. Create a new user record
  TABLE.create(
    {
      name: req.body.name,
      email: req.body.email
    },
    (err, record) => {
      if (err) {
        console.error(err);
        return;
      }

      // 2a On success, generate a token
      const token = generateToken(record.getId(), req.body.email);

      // 2b Update the user record to save the token and token creation date
      TABLE.update(
        record.getId(),
        {
          token,
          token_date: new Date().toISOString()
        },
        (err, record) => {
          if (err) {
            console.error(err);
            return;
          }

          // 3. On success, flash a message
          res.render("index", {
            message: "Please check your email for you magic sign in link"
          });

          // 4. Generate Magic Link
          req.body.url = generateLoginUrl(token, record.get("email"));

          // 5. Send Email
          next(); // This call the next function in chain declared in route, in this case sendEmail()
        }
      );
    }
  );
};

exports.sendEmail = (req, res) => {
  const to = req.body.email;
  const subject = "Magic sign in link for My Sweet App";
  const body = `Hello,
  Here is your magic link for quickly signing into My Sweet App.
  &lt;a href="http://localhost:7777/${
    req.body.url
  }">Sign in to My Sweet App&lt;/a>
  You can also copy and paste this link in your brower url bar.
  &lt;a href="http://localhost:7777/${req.body.url}">http://localhost:7777/${
    req.body.url
  }&lt;/a>`;

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    // secure: true,
    auth: {
      user: process.env.SMTP_USERNAME,
      pass: process.env.SMTP_PASSWORD
    }
  });

  const mailOptions = {
    from: process.env.FROM_EMAIL,
    to,
    subject,
    html: body
  };

  transporter.sendMail(mailOptions, (err, info) => {
    if (err) {
      console.log(err);
    } else {
      // email sent
      console.log(info);
      res.send(info.messageId);
    }
  });
};

Note that I am using nodemailer to handle sending email. If you are using my starter files it's already included and package.json. I'm also using Mailtrap as an SMTP server to test that the emails are being sent. Go ahead and sign up, they have a generous free plan.

User sign in

Now that we have handled the user signing in, let's create the routes, views and logic for the using signing in using a magic link.

The steps for signing the user in are

Check if the user exists
Check if the token is valid, that is it belongs to the user and it has not expired
Sign the user in and take them to their profile

To accomplish the above, we need 3 routes:

Route to display the login form, GET request to /login
Route to create a magic link and email it to the user if their token is expired, POST request to /login
Route to validate and authenticate the user using the magic link, GET request to /login/magic/ and a dynamic parameter :token

// index.js
router.get('/login', userController.getLogin);
router.post('/login',
  userController.createMagicLink,
  userController.sendEmail);
router.get('/login/magiclink/:token', userController.authenticate);

// user.Controller
exports.getLogin = (req, res) => {
  res.render('login', { title: 'Sign in to your profile' });
};

exports.createMagicLink = async (req, res, next) => {
  // Check if the user exists
  const user = await getUserByEmail(req.body.email);

  // If the user does not exist, let them know
  if (Object.entries(user).length === 0) {
    res.render('index', { message: 'User does not exist.' });
  }

  // Generate a token
  const token = generateToken(user.id, user.email);


  // Update token and token date
  TABLE.update(user.id, {
    token,
    token_date: (new Date()).toISOString(),
  }, (err, record) => {
    if (err) { console.error(err); return; }

    res.render('index', { message: 'Please check your email for your magic sign in link', user: record });

    // Generate magic link
    const url = generateLoginUrl(token, user.email);

    // Send the magic link
    req.body.url = url;
    next();
  });
};

exports.authenticate = async (req, res) => {
  const token = req.params.token;
  const email = req.query.email;
  const user = await getUserByEmail(email);

  if (Object.entries(user).length === 0) {
    res.render('index', { message: 'User does not exist.' });
  }

  if (user.email === email &amp;&amp; user.token === token) {
    // Check if token is expired
    const isExpired = diffInMinutes(new Date(), user.date) > 5;

    if (isExpired) {
      res.render('login', { message: 'Magic link has expired. Enter your email to receive a new one.' });
    } else {
      res.render('profile', { user });
    }
  }
};

Notice we have to check if the user exists multiple time and return their data to be used in other functions and be sent to views. I have abstracted this to a helper function getUserbyEmail. We will add this function with our other helper functions at the top of the user controller file.

// userController.js
const getUserByEmail = async email => {
  let record = {};
  const users = await data.getAirtableRecords(TABLE, VIEW);
  users.filter(user => {
    if (user.get("email") === email) {
      record = {
        id: user.getId(),
        name: user.get("name"),
        email: user.get("email"),
        token: user.get("token"),
        date: user.get("token_date")
      };
      return true;
    }
    return false;
  });

  return record;
};

This function returns an object with the user details. We are using our other helper function from dataController.js which returns a promise. When resolved we will get all records from Airtable and then can filter the result for a matching email address. If there are a lot of records this could take a while and our app will be stuck, hence the use of promises.

There you have it, a simple way to roll your own password-less sign in for your app.

Creating a user database with Airtable part 3

Chinara James — Tue, 11 Jun 2019 19:34:30 +0000

Part 1 we learned how to add users to an Airtable database with hashed passwords.
Part 2 we learned how to persist the user's data with sessions.

In part 3, our final tutorial in this series, we are going to create a password reset flow so let's dive in.

Just want the code?

Get the full working demo on Github. If you want to follow along, download the starter files folder and rename it to whatever you would like and run yarn to install the dependencies. Don't forget to check out part 1 and part 2 first.

The Process

The password reset flow has the following general steps:

User requests a password reset
Send the user a password reset email
User submits a new password
Update the user record with the new password
Send an email confirming the password change

Step 1 User requests a password reset

Create a view, forget.pug, with a form for the user to request a password reset.

<!-- templates/views/forget.pug -->

extends ../layouts/base

block content
  h1.title Password Reset

  if (message)
    .notification.is-success
      button.delete
      =message

  form(action="/user/forgot" method="POST")
    .field
      label.label(for="username") Email or Username
      .control.has-icons-left.has-icons-right
        input.input(type='text' name="username" id="username" placeholder='Email input' value='hello@')
        span.icon.is-small.is-left
          i.fas.fa-user

    .field
      .control
        button.button.is-link Reset Password

We will also add a forgot password link to our login form.

<!-- templates/views/index.pug -->
small
    a(href="/forgot-password") Lost your password?

Now let's create a route in index.js to display the forget password view and the associated middleware in our appController.js file. This will be a GET request.

// index.js
router.get("/forgot-password", appController.getForgetPassword);

// appController.js
exports.getForgetPassword = (req, res) => {
  res.render("forgot");
};

Step 2 Send the user a password reset email

If the user exists, we are going to send them a password reset email that will contain a password reset link. This link will contain a token parameter as well as the email address as a query parameter. An example:

http://localhost:7777/login/resetlink/liEvWzccnrWnnhEzaNca@iafiazpXozJZXJa0zn?email=chinarakinda%40gmail.com

The format is

http://localhost:7777/[token]?user=[username]

The token will be used to confirm that the user indeed requested the reset and will be compared to the one store in the database. Therefore we need to add a token field to our base in Airtable. This will be a normal text field.

Creating the password reset link

As explained above we will be using a token to confirm the reset so that persons can just enter any string with an email and be able to reset a user's password. This token will be a combination of the user's record ID and their email address.

Let's create two helper functions to handle generating the password reset URL string. The first function will be responsible for generating a token based on the user's record ID and email and the second function will use that token and generate the URL.

// userController.js

// Built in node module provides utilities for parsing and formatting URL query strings
const querystring = require("querystring");

// The token will be using the user's ID and email address to generate a random string
const generateToken = (id, email) => {
  const source = `${id}${email}`;
  let token = "";
  for (let i = 0; i < source.length; i++) {
    token += source.charAt(Math.floor(Math.random() * source.length));
  }

  return token;
};

const generateResetUrl = (token, email) => {
  let url = "";
  url = `login/resetlink/${token}?${querystring.stringify({ email })}`;
  return url;
};

We want to add the token to the user's record when the user requests a password reset. Then we can confirm it later when they enter a new password.

// userController.js
exports.addToken = async (req, res, next) => {
  const { username } = req.body;
  // Check that the user exists. We wrote this helper function already in Part 1 but we need to refactor as it requires two parameters and we are only including one here
  const userExists = await findUser(username);

  if (userExists) {
    res.render("login", {
      message: "Username or Email already exists!"
    });
    return;
  }

  const options = {
    filterByFormula: `OR(email = '${username}', username = '${username}')`
  };

  // Get the user
  const users = await data.getAirtableRecords(table, options);

  const user = users.map(record => ({
    id: record.getId(),
    email: record.get("email")
  }));

  const token = generateToken(user[0].id, user[0].email);

  table.update(
    user[0].id,
    {
      token
    },
    (err, record) => {
      if (err) {
        console.error(err);
      }

      req.body.url = generateResetUrl(token, user[0].email);
      req.body.to = user[0].email;
      next();
    }
  );
};

Refactoring findUser

You will have noticed a comment before the code that checks if the user exists.

// addToken function

// Check that the user exists. We wrote this helper function already in Part 1 but we need to refactor as it requires two parameters and we are only including one here
const userExists = await findUser(username);

Our function required a username and email but anyone or both can be supplied. Let's factor so that this is possible. We will set defaults for the function parameters and conditionally check for their presence.

const findUser = async (email = undefined, username = undefined) => {
  let recordExists = false;
  let options = {};

  if (email && username) {
    options = {
      filterByFormula: `OR(email = '${email}', username = '${username}')`
    };
  } else {
    options = {
      filterByFormula: `OR(email = '${email}', username = '${email}')`
    };
  }

  const users = await data.getAirtableRecords(table, options);

  users.filter(user => {
    if (user.get("email") === email || user.get("username") === username) {
      return (recordExists = true);
    }
    if (user.get("email") === email || user.get("username") === email) {
      return (recordExists = true);
    } else {
      return false;
    }
  });

  return recordExists;
};

Now we can write the code to send our password reset email.

Sending the password reset email

We are going to use the nodemailer package to send the email and the Mailtrap web service to mock our transactional email provider.

Let's begin by installing and requiring nodemailer into our app.

yarn add nodemailer

// userController.js
const nodemailer = require("nodemailer");

Let's now write the function to send our password reset link email.

// userController.js

exports.sendEmail = async (req, res) => {
  const subject = "Password Reset link for My Sweet App";
  const { url, to } = req.body;
  const body = `Hello,
  You requested to have your password reset. Ignore if this is a mistake or you did not make this request. Otherwise, click the link below to reset your password.
  <a href="http://localhost:7777/${url}">Reset My Password</a>
  You can also copy and paste this link in your browser URL bar.
  <a href="http://localhost:7777/${url}">http://localhost:7777/${url}</a>`;

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    // secure: true,
    auth: {
      user: process.env.SMTP_USERNAME,
      pass: process.env.SMTP_PASSWORD
    }
  });

  const mailOptions = {
    from: process.env.FROM_EMAIL,
    to,
    subject,
    html: body
  };

  transporter.sendMail(mailOptions, (err, info) => {
    if (err) {
      console.log(err);
    } else {
      // email sent
      res.render("forgot", {
        message: "Please check your email for your password reset link"
      });
    }
  });
};

You will notice in the createTransport function an object with several variables prefixed with process.env. These are the Mailtrap configuration details. We don't want these available in the codebase so we will store them in our variables.env file.

If you have been following along you should have renamed the example variables file example.variables.env to variables.env.

Create a free account at Mailtrap, get your details and enter save them to your environment variables file.

Step 3 User submits a new password

When the user clicks the password reset link in the email, it will display a form for them to enter their new password. Let's create this view, we will call it reset.pug.

<!-- templates/views/reset.pug -->

extends ../layouts/base
include ../mixins/_resetForm

block content
  h1.title Password Reset

  if (message)
    .notification.is-success
      button.delete
      =message

  form(action="/user/reset" method="POST")
    .field
      label.label(for="password") New Password
      .control.has-icons-left
        input.input(type='password' name="password" id="password" placeholder='Password')
        span.icon.is-small.is-left
          i.fas.fa-lock

      input(type="hidden" name="email" value=`${email}`)
      input(type="hidden" name="token" value=`${token}`)

    .field
      .control
        button.button.is-link Update Password

Let's create the route to display the above view and it's associated middleware to handle the request. Note the two hidden fields email and token which will get from the password reset URL. Note the wild card parameter :token in the route which will contain the query string of token and email.

// index.js
router.get("/login/resetlink/:token", appController.getResetPassword);

// appController.js
exports.getResetPassword = (req, res) => {
  res.render("reset", {
    token: req.params.token,
    email: req.query.email
  });
};

Step 4 Update the user record with the new password

The form will send a POST request to '/user/reset' so let's set up that route and the associated middleware to handle the request in our userController.js.

// index.js
router.post(
  "/user/reset",
  userController.resetPassword,
  userController.storePassword
  userController.sendConfirmResetPasswordEmail
);

// userController.js
exports.confirmToken = async (req, res, next) => {
  // Get Form Variables
  const { email, token } = req.body;

  const options = {
    filterByFormula: `OR(email = '${email}', token = '${token}')`
  };

  // Get the user
  const users = await data.getAirtableRecords(table, options);

  const user = users.map(record => ({
    id: record.getId()
  }));

  // hash and the update the user's password
  req.body.id = user[0].id;
  next();
};

The first middleware, confirmToken, will handle getting the user record by confirming the email and token match. We then call next to call the second middleware, storePassword, which we created before but we will refactor a bit.

Since we are calling storePassword from two different scenarios, let's make it more flexible. First, let's add the next parameter to the function definition and second let's create a general helper to update a record.

// dataController.js

// Update any record in any table
exports.updateRecord = (table, recordId, fieldsToUpdate) => {
  table.update(recordId, fieldsToUpdate, (err, record) => {
    if (err) {
      console.log(Error(err));
      return;
    }

    return record;
  });
};

// userController

// Refactored storePassword middleware
exports.storePassword = (req, res, next) => {
  const { password, id } = req.body;

  bcrypt.hash(password, 10, function(err, hash) {
    if (err) {
      console.error(err);
      return;
    }

    req.body.hash = hash;

    data.updateRecord(table, id, {
      password: hash
    });

    next();
  });
};

// Since we are now using next, we need to update our previous routes to call the next middleware

// index.js
router.post(
  "/user/add",
  userController.addUser,
  userController.storePassword,
  appController.getLogin
);

// Step 4,5
router.post(
  "/user/reset",
  userController.confirmToken,
  userController.storePassword,
  userController.sendConfirmResetEmail
);

Step 5 Send an email confirming the password change

// userController.js

exports.sendConfirmResetEmail = async (req, res) => {
  const subject = "Password successfully reset";
  const to = req.body.email;
  const body = `Hello, Your password was successfully reset.`;

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    // secure: true,
    auth: {
      user: process.env.SMTP_USERNAME,
      pass: process.env.SMTP_PASSWORD
    }
  });

  const mailOptions = {
    from: process.env.FROM_EMAIL,
    to,
    subject,
    html: body
  };

  transporter.sendMail(mailOptions, (err, info) => {
    if (err) {
      console.log(err);
    } else {
      // email sent
      res.render("login");
    }
  });
};

And that's all folks. That concludes the series on creating a user database with Airtable. I should note there are some things that would need to get this production-ready but this is a good start to get you on your way. You can find the stepped and complete code on Github.

Creating a user database with Airtable part 2

Chinara James — Fri, 31 May 2019 19:04:10 +0000

In Part 1 we learnt how to add users to a Airtable database with hashed passwords. In part 2 we are going to learn how to persist the user's data with sessions.

Just want the code?

Configuring the session

We are going to use the express-session middleware, developed by the Express team to add simple sessions to express.

yarn add express-session

We then need to require the package in our app.js file and configure express to use the middleware. To learn more about using express-session please read the documentation on the Github repo.

// app.js
const session = require("express-session");

// session config
app.use(
  session({
    secret: "arandomstring",
    resave: false,
    saveUninitialized: true
  })
);

Protecting a route

Now that we have express-session included and configured, let's protect our user profile route so logged out users cannot access the page. We are then going to create a session when a user is logged in, storing their user details in the session variable.

// index.js
router.get("/profile", userController.isLoggedIn, appController.getProfile);

Let's now create our isLoggedIn function.

// userController.js
exports.isLoggedIn = (req, res, next) => {
  if (req.session && req.session.authenticated) {
    next();
    return;
  }

  res.redirect("/login");
};

This function is checking for the presence of a session. There will be a session if a user was successfully logged in. If there is no session, the user will be redirected to the login page.

Creating a session

Let's edit our authenticate function in our userController.js to create the session.

// userController.js
exports.authenticate = (req, res, next) => {
  const { username, password } = req.body;
  const options = {
    filterByFormula: `OR(email = '${username}', username = '${username}')`
  };

  data
    .getAirtableRecords(table, options)
    .then(users => {
      users.forEach(function(user) {
        bcrypt.compare(password, user.get("password"), function(err, response) {
          if (response) {
            // Passwords match, response = true
            req.session.authenticated = user.fields;
            res.redirect("/profile");
          } else {
            // Passwords don't match
            console.log(err);
          }
        });
      });
    })
    .catch(err => {
      console.log(Error(err));
    });
};

Now when the usernames and passwords match (in the bcrypt callback function) we create a session passing the user data and redirect the user to their profile page. This will call the isLoggedIn function again which now passes the if condition, successfully logging the user in and redirecting them to their profile page with their data. Let's update our getProfile function in our app controller to use the user data saved in our session.

// appController.js
exports.getProfile = (req, res) => {
  res.render("profile", {
    title: "Your Profile",
    user: req.session.authenticated
  });
};

In the third and final part of this series, we will create a password reset workflow. Stay tuned.

Creating a user database with Airtable part 1

Chinara James — Mon, 27 May 2019 16:19:19 +0000

I previously wrote an article on how to get a record from Airtable by a unique field value such as an email or username. I'm going to expand on that using a practical example, a user database. If you are building apps using Airtable as the backend, this can come in handy. Let's look at an example user database base I have created.

Example User Database

Just want the code?

Get the full working demo on Github. If you want to follow along, download the starter files folder and rename it to whatever you would like and run yarn to install the dependencies.

The starter files will already have the bare bones of the app such as the login and register pages along with the routes for displaying these pages. This article will focus on building out the user controller for creating a user and handling the login.

Creating a user

When the user submits their information on the registration page, it will send a post request to the /user/add route. This has been specified in registration form's action attribute. Let's first create a route in our index.js file for this post request.

// index.js
router.post("/user/add", userController.addUser);

When a user posts a request to this route it will call the addUser function in userController.js. Let's create this function.

// userController.js

exports.addUser = (req, res, next) => {
  const { fullname, email, username } = req.body;

  table.create(
    {
      email,
      username,
      display_name: fullname
    },
    function(err, record) {
      if (err) {
        console.error(err);
        return;
      }
      req.body.id = record.getId();
      // store password
    }
  );
};

We are using Airtable's create method to create the record. Notice I did not include the password field because we need an additional step to hash the password before saving it to the database. We will get to that later on.

Add a constraint to the email and username fields

We have a small problem with adding users. Right now as it stands, we can add another user using email addresses and usernames that already exist in the database. Airtable currently does not have a feature to set constraints on fields. Lucky for us we can do it from our code through the API.

To do this we are going to create a helper function that will return true or false depending on if the user exists or not.

// userController.js

const findUser = async (email, username) => {
  let recordExists = false;
  const options = {
    filterByFormula: `OR(email = '${email}', username = '${username}')`
  };

  const users = await data.getAirtableRecords(table, options);

  users.filter(user => {
    if (user.get("email") === email || user.get("username") === username) {
      return (recordExists = true);
    }
    return (recordExists = false);
  });

  return recordExists;
};

Then we need to call this function from our addUser function and only if it returns true we create the user, if not we render the login page with a message. The addUser function now becomes.

// userController.js

exports.addUser = async (req, res, next) => {
  const { fullname, email, username } = req.body;

  const userExists = await findUser(email, username);

  if (userExists) {
    res.render("login", {
      message: "Username or Email already exists!"
    });
    return;
  }

  table.create(
    {
      email,
      username,
      display_name: fullname
    },
    function(err, record) {
      if (err) {
        console.error(err);
        return;
      }
      req.body.id = record.getId();
      next();
    }
  );
};

Storing the user's password

We are successfully creating a user record but we are not storing the user's password. We could store the plain text password entered but obviously that's not good. I'm going to use the bcrypt package to hash the user's plain text password and store that hashed password in the Airtable base.

First we need to install the bcrypt npm package and require it in our userController.js file. This has already been done for you if you are using the starter files.

We then create a function to create a hashed password and store it in the newly created user record. Since the user record is already create we need to update the user record to add the password. We will use Airtable's update method for that.

// userController.js

exports.storePassword = (req, res) => {
  const { password, id } = req.body;

  bcrypt.hash(password, 10, function(err, hash) {
    if (err) {
      console.error(err);
      return;
    }

    table.update(
      id,
      {
        password: hash
      },
      function(err) {
        if (err) {
          console.error(err);
          return;
        }
        res.render("login", {
          message: "Your account has been created!"
        });
      }
    );
  });
};

We then need to modify our addUser function to call this function immediately after the record is created so that we can have access the user's email and password. To do this will modify the route to call the storePassword function after addUser and call next() when the record is created in the addUser function to call the next function in our route chain, the storePassword function.

// index.js
router.post("/user/add", userController.addUser, userController.storePassword);

// userController.js
exports.addUser = (req, res, next) => {
  const { fullname, email, username } = req.body;

  const userExists = await findUser(email, username);

  if (userExists) {
    res.render("login", {
      message: "Username or Email already exists!"
    });
    return;
  }

  table.create(
    {
      email,
      username,
      display_name: fullname
    },
    function(err, record) {
      if (err) {
        console.error(err);
        return;
      }
      req.body.id = record.getId();
      // The user has been successfully create, let's encrypt and store their password
      next();
    }
  );
};

Logging the user in

Now let's create the flow for logging the user in. The login form sends a post request to this route /user/auth.

// index.js
router.post("/user/auth", userController.authenticate);

We will create a function, called authenticate, to find the user by email or username and compare the passwords to decide whether to log in the user.

// userController.js
exports.authenticate = (req, res) => {
  const { username, password } = req.body;
  const options = {
    filterByFormula: `OR(email = '${username}', username = '${username}')`
  };

  data
    .getAirtableRecords(table, options)
    .then(users => {
      users.forEach(function(user) {
        bcrypt.compare(password, user.get("password"), function(err, response) {
          if (response) {
            // Passwords match, response = true
            res.render("profile", {
              user: user.fields
            });
          } else {
            // Passwords don't match
            console.log(err);
          }
        });
      });
    })
    .catch(err => {
      console.log(Error(err));
    });
};

This completes part 1. You can get the full working code on Github.
In part 2, we will implement a simple session to persist the user data when they are logged in. Keep an eye out for part 2 👀.

Airtable's API filterByFormula to get a record by a unique field value (example email or username)

Chinara James — Tue, 07 May 2019 13:59:46 +0000

Airtable’s API provides a find method for retrieving a single record. However, this method can only take the record ID as a parameter to find the record. However, there are several use cases where the record ID is not known to us. In these cases, this method is not useful. So how do we retrieve a record based on some other field in the table? We use the select method and the filterByFormula parameter.

The filterByFormula parameter is self explanatory, it allows us to filter the results of the select method using a formula. You can use any formula that the Airtable formula field type supports as a filter. Airtable provides a handy Formula field reference.

The formula will be evaluated for each record, and if the result is not 0, false, “", NaN, [], or #Error! the record will be included in the response.

An Example (Get a user by email address)

I have abstracted the select method to a function and placed in a file called dataController.js. Note the second parameter options. The options parameter will take a object of the parameter we want to pass to the select method.


// dataController.js
exports.getAirtableRecords = (table, options) => {
  let records = [],
      params = {
        view: 'Grid view',
        pageSize: 15
      };

  Object.assign(params, options);

  return new Promise((resolve, reject) => {
    // Cache results if called already
    if (records.length > 0) {
      resolve(records);
    }

    const processPage = (partialRecords, fetchNextPage) => {
      records = [...records, ...partialRecords];
      fetchNextPage();
    };

    const processRecords = (err) => {
      if (err) {
        reject(err);
        return;
      }

      resolve(records);
    };

    table.select(params).eachPage(processPage, processRecords);
  });
};

Now imagine you have a page with a user login form with inputs for username and password. In my userController.js file I will create a function to get a user by email address.

// userController.js

exports.getUserByEmail = (req, res, next) => {
  const { username, password } = req.body;
  const options = {
    filterByFormula: `OR(email = '${username}', username = '${username}')`
  }

  data.getAirtableRecords(table, options)
    .then( users => {
      users.forEach(function(user) {
      // Call the next middleware (function) e.g validate password
        next();
      });
    })
    .catch(err => {
      console.log( Error(err));
    });
}

In the body request we now have access to the email address, available to us in req.body. I can now construct a formula comparing that value we received to the one in our database.

ES6 string interpolation makes creating the formula string easy. I have used the OR formula because my input can accept either email or username. From the field reference we can see what the OR logical operation does.

OR(logical1, [logical2, …])
Returns true if any one of the arguments is true.
Example OR(Finished, Reviewed)

And we know that filterByFormula will return the matching records if the result is not 0, false, “", NaN, [], or #Error!.

In plain English this formula is saying if the value of email in the table is the same as the value of the username form input OR if the value of the username in the table is the same as the value of the username form input then return true, if not return false.

filterByFormula: `OR(email = '${username}', username = '${username}')`

In another article I will demonstrate how to use Airtable to create a user database with authentication and sessions using the above.

Grouping WordPress posts by category

Chinara James — Tue, 26 Mar 2019 00:58:24 +0000

Let’s say we want to have our posts displayed like the following.

Category 1

Post 1
Post 2
Post 3

Category 2

Post 1
Post 2
Post 3

You will quickly realise that using the standard WordPress loop you won’t quite get what you want.

The problem

Using the conventional loop, you will only have access to the categories (terms) of that single post at that point resulting in the following

Category 1
Post 1
Category 1
Post 2
Category 1
Post 3

The Solution

The solution is actually quite simple. Get the list of terms first and loop over each term, in this loop get the posts tagged with that term. I am going to use get_terms which is a helper that ultimately calls WP_Term_Queryto get the list of terms first.

<?php
$terms = get_terms( array(
  "taxonomy" => "category",
) );

The above returns an array of term objects with properties such as term_id. Now that we have the terms, we are going to loop through them, passing the term_id to the get_posts()function to get the list of posts tagged with that term. get_posts() ultimately calls WP_Query and you could use that class if your case requires it. In my case, I just want the title of the post.
Our code now becomes the following:

<?php
$terms = get_terms( array(
  "taxonomy" => "category",
) );

foreach ($terms as $term) : 
  $posts = get_posts(["post_type" => "store", "cat" => $term->term_id]);
?>
  <h4><?= $term->name; ?></h4>
  <ul>
  <?php foreach($posts as $post) : ?>
    <li><?= $post->post_title; ?></li>
  <?php endforeach; ?>
  </ul>
<?php endforeach; ?>