Serverless Login with OpenJS Architect, Part 4

Welcome to the final section where we will implement a password reset feature. It's going to be the same pattern as the email verification, where we will send the user an email with an expiring token URL. That token URL will confirm the user's email and give them a form to submit a new password.

Adding new routes

Let's start by taking a look at the new state of our app.arc file.

@app
begin-app

@events
registered

@http
get /
get /register
post /register
get /admin
get /logout
get /login
post /login
get /verify/:token
get /reset
get /reset/:token
post /register/nuke
post /reset-password

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

Create get-reset

get-reset is a function that gives the user a form to submit their email to receive a reset URL.

// src/http/get-reset/index.js
let arc = require('@architect/functions')
let layout = require('@architect/views/layout')

exports.handler = arc.http.async(reset)

let form = `
  <form action=/reset method=post>
  <h2>Reset your password</h2>
  <p> You will receive an email with a link to reset </p>
  <input name=email type=email placeholder="add your email" required>
  <button>Reset password</button>
`
async function reset(req) {

  return {
    html: layout({
      account: req.session.account,
      body: form
    })
  }
}

Create post-reset function

post-reset is the function handler that will catch the form data from get-reset and dispatch the email to the user. This will look a lot like the code we used for post-register

// src/http/post-reset/index.js

let arc = require('@architect/functions')
let data = require('@begin/data')
let mail = require('@sendgrid/mail')

exports.handler = arc.http.async(reset)

async function reset (req) {
  let email = req.body.email
  mail.setApiKey(process.env.SENDGRID_API_KEY)

  try {
    let fiveMinutes = 300000
    let ttl = (Date.now() + fiveMinutes) / 1000
    let token = await data.set({ table: 'tokens', email, ttl })

    let result = await mail.send({
      to: email,
      from: '[e-mail]',
      subject: 'Reset your password',
      text: `Reset your password by clicking this link ${process.env.BASE_URL}/reset/${token.key}`,
    });
    console.log(result, 'made it here')
  } catch (error) {
    console.error(error);

    if (error.response) {
      console.error(error.response.body)
    }
  }
  return {
    location: `/`
  }
}

Create get-reset-000token function

This function will look similar to get-verify-000token because it has the same flow. Let's take a look at the function below:

// src/http/get-reset-000token/index.js

let arc = require('@architect/functions')
let data = require('@begin/data')
let layout = require('@architect/views/layout')

exports.handler = arc.http.async(reset)

async function reset(req) {
  //read the token from request params and database
  let token = req.params.token
  let result = await data.get({
    table: 'tokens',
    key: token
  })
  // match token from params against the database 
  if (result.key === token) {
    return {
      html: layout({
        account: req.session.account,
        body: `<h2>Choose a new password<h2>
        <form action=/reset-password method=post>
        <input name=password type=password required>
        <input name=confirm type=password required>
        <input type=hidden name=token value=${token}>
        <button>Reset Password</button>
        </form>`
      })
    }
  } else {
    return {
      html: layout({
        account: req.session.account,
        body: '<p>verifying email ... token expired</p>'
      })
    }
  }
}

Create post-reset-password function

This function catches the form data from get-reset-000token so that we can save the new password into the database.

let arc = require('@architect/functions')
let data = require('@begin/data')
let bcrypt = require('bcryptjs')

exports.handler = arc.http.async(reset)

async function reset(req) {

  //confirm values are the same and validate token to get email
  if (req.body.password === req.body.confirm) {

    //look up email
    let result = await data.get({
      table: 'tokens',
      key: req.body.token
    })
    let email = result.email

    //look up account for verified flag
    let account = await data.get({
      table: 'accounts',
      key: email
    })

    // save the new password to the account record
    let salt = bcrypt.genSaltSync(10)
    let hash = bcrypt.hashSync(req.body.password, salt)

    await data.set({
      table: 'accounts',
      key: email,
      password: hash,
      verified: account.verified
    })

    return {
      session: {
        account: {
          email: req.body.email
        }
      },
      location: '/admin'
    }
  } else {
    return {
      location: '/?password=nomatch'
    }
  }
}

Delete the account

Now we're going to add a feature to delete the account from the /admin protected route.

First we'll have to create a post-reset-nuke Lambda function to catch the form data from /admin

let arc = require('@architect/functions')
let data = require('@begin/data')
let bcrypt = require('bcryptjs');

exports.handler = arc.http.async(nuke)

async function nuke(req) {
  let result = await data.get({
    table: 'accounts',
    key: req.body.email
  })

  if (!result) {
    return {
      session: {},
      location: '/?notfound'
    }
  }

  let hash = result.password
  let good = bcrypt.compareSync(req.body.password, hash)

  if (good) {
    await data.destroy({
      table: 'accounts',
      key: req.body.email
    })
    console.log('account destroyed')
    return {
      session: {},
      location: '/'
    }
  }
  else {
    return {
      session: {},
      location: '/?badpassword'
    }
  }
}

Wrapping it all up

By now you have a full app where users can register an account, login, logout, reset passwords, and receive verification emails, and delete their account. Congratulations! You've done it. If you have any questions leave them in the comments below, and check out the full repo here: https://github.com/pchinjr/serverless-login-flow