Forem: Mastering JS

How We Think About Securing Express.js APIs in 2024

Mastering JS — Tue, 13 Aug 2024 20:10:03 +0000

Securing your Express.js API involves a lot of tradeoffs. Do you use cookies or authorization header, JWT or access token? Do build your own authentication or use something like Auth0? Do build your own authorization or use a service like Oso? In this blog post, I'll cover how Mastering JS currently thinks about security for the numerous Express APIs we maintain.

Cookies vs Authorization Header

This is admittedly somewhat controversial, but our Express APIs only support authentication via the authorization header. We don't support cookies at all. The primary reason is that header-based authentication is easier to work with, both for SPA web clients and mobile apps; and we don't want to support multiple authentication strategies.

Cookies, especially when combined with CORS, are quite tricky to get right. In our experience, it is much easier to just set an authorization header on an Axios request and be done with it.

JWT vs Access Token

We prefer randomly generated access tokens that we store in MongoDB using an AccessToken Mongoose model over JWTs. JWTs are faster, because you don't need a database round trip to validate a JWT.

But JWTs make it difficult to forcibly log out a user. Once a JWT is generated, the JWT is usable until its expiration date, unless you either delete the user, rotate your JWT key (which logs out everyone), or store a list of disabled JWTs in your database. This makes it tricky to implement a "log me out of all devices" feature, which is important in case one of your users loses their phone or laptop.

Authentication: Build vs Buy

Historically we have been big proponents of building your own authentication. We store users and authentication methods in our own database. Our primary concern with an external provider is vendor lock-in: authentication is fundamental to any app, and replacing an authentication provider is non-trivial.

However, recently we've been rethinking this stance, especially if we're able to still store our user data in our own database. Authentication gets extremely tricky: setting up keys for all the different OAuth providers (Apple, Google, etc.) is a tedious manual process, implementing 2FA with support for authenticator apps is non-trivial. There's just too much repetitive complexity to re-implement the same authentication logic in every single API, so we're considering switching to an authentication provider.

Authorization: Build vs Buy

Like authentication (prove to the server that Bob is who he says), historically we have preferred to implement our own authorization (is Bob allowed to do what he is trying to do?). For basic role-based access control, writing your own authorization is fairly straightforward.

However, like 2FA and OAuth, role-based access control in Node.js quickly becomes more complicated as business needs grow. Eventually the global "admin" role evolves into "a user has the 'admin' role on these resources", which evolves into "a user can perform an action on one resource if they have the 'admin' role on another resource."

When the third case starts popping up, that's when an authorization provider like Oso or Permit.io starts to sound appealing. Centralized, easily readable authorization logic combined with easy queries for "what users are allowed to perform this action?" sounds great when your authorization logic starts to get a bit too complex. And we're finding a few cases where our authorization logic is getting too hard to reason about, so we're also considering switching to an authorization provider.

Our Recommendations for Vue App Architecture in 2022

Mastering JS — Thu, 07 Apr 2022 15:55:31 +0000

At Mastering JS, we're all about pragmatic web development. That means we aggressively avoid work that isn't related to shipping new features. We believe in spending at most 1 hour per quarter on build system work so we don't waste time bikeshedding Webpack configs or discussing "state management" (is that even a thing anymore?).

In other words, we want to spend most of our calories writing v-if and v-bind statements, not tinkering with our build.

Overview

Everything starts with an index.html file that we typically host on Netlify. The index.html file contains the below body.

  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/vue@3.x"></script>
    <script src="https://unpkg.com/vue-router@4.0.10"></script>
    <script src="/bundle.js"></script>
  </body>

We prefer to load Vue from a CDN to avoid having to bundle it ourselves. Same with Vue Router. Why? Tree shaking isn't worth it for us, because we don't put Vue on SEO-focused pages. If we want a page to rank on Google, we do vanilla JS, unless the page is specifically about Vue and needs to have some interactive examples.

Our bundle does contain most other dependencies, which is why we build our bundle using Webpack.

Webpack Config

Below is our standard Webpack config for Vue projects.

const config = require('./.config');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    app: `${__dirname}/src/main.js`
  },
  target: 'web',
  output: {
    path: `${__dirname}/public`,
    filename: 'bundle.js'
  },
  optimization: {
    minimize: false // <-- Remove need for source maps
  },
  plugins: [
    // Allow accessing config
    ...Object.keys(config).map(key => {
      return new webpack.DefinePlugin({ [`__${key}`]: config[key] });
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/i, // <-- Allow `require()` on HTML files
        type: 'asset/source'
      },
      {
        test: /\.css$/i, // <-- Allow `require()` on CSS files
        type: 'asset/source'
      }
    ]
  }
};

3 things worth noting about this config:

We disable minification in prod. Again, the performance benefit of minifying is so negligible in our case that it isn't worth the developer time to set up source maps, etc. If minification provides a meaningful performance benefit, that means you're shipping wayyyyyyyyyy too much JavaScript and should fix your app.
Use plugins to import config.
Import HTML and CSS as strings using type: 'asset/source'.

Why do we import HTML and CSS as strings? So we can define the HTML and CSS for our components in .html and .css files. For example, below is our footer/index.js file:

'use strict';

const appendCSS = require('../appendCSS');
const css = require('./footer.css');
const template = require('./footer.html');

appendCSS(css);

module.exports = app => app.component('footer-component', {
  template: template
});

This means all our layout work is done in HTML and CSS. No need to actually touch JavaScript. A huge win for us, because this means we can delegate most of our new layout work out to designers on Fiverr or similar services. They send us a complete layout, and we just put it into a component.

State

State management is largely a non-issue in Vue. Frontend devs tend to discuss state management ad infinitum because it is a huge problem in frameworks like React, which are written for pre-ES6 JavaScript and are hopelessly out of date.

For us, our top-level page components (the components we pass to Vue Router) are responsible for setting state and fetching data. To avoid prop drilling, they pass state down using Vue's provide option.

Why We're Focusing on Browser Tools in 2022

Mastering JS — Fri, 04 Mar 2022 03:11:58 +0000

My biggest source of frustration earlier in my dev career was just how unbearably adhoc all the work was. Working at early stage startups meant constantly gluing disparate code together in unpredictable one-off ways: convert HTML to Pug here, build a Webpack config to compile a special script for a client there. It was a nightmare to try to find a working npm module and figure out how to use it.

What is a Browser Tool?

A tool that runs directly in your browser. No npm packages to install, no docs to read. Just type in Google, click link, copy/paste problem, and get solution.

Web UIs are ideally more intuitive, don't require installing anything, and get you from problem to solution faster.

Browser tools aren't great when you need to solve a problem as part of an automated process. You don't want to have to copy/paste your code into a browser for tasks that you need to do repetitively, like linting and compiling. But converting some HTML you got off of Fiverr into Pug, or converting a config from JSON to YAML, or converting decimal to binary? We definitely prefer browser tool to CLI.

The Mastering JS mantra has always been devs solve problems by Googling. Browser tools help developers get from problem to solution faster using their preferred method.

Challenges of Building Browser Tools

UI/UX is the primary goal. Specifically, get you from problem to solution as fast as possible, while minimizing any mental overhead. Performance is key to this goal, which is one of several reasons why we avoid adding a server component to our tools where possible. Most of the time, we can get away with just using Webpack to bundle an npm package to do what we want to do.

We're still learning the right UI/UX patterns, so please let us know what you think of our tools in the comments.

3 Neat toString() Tricks in JavaScript

Mastering JS — Mon, 17 Jan 2022 18:20:06 +0000

Most JavaScript objects and primitive values have a toString() function that converts the value to a string. Different values have different toString() methods, and some toString() methods have cool surprises. Here's 3:

1) Numbers have a toString() function that supports different bases

Converting decimal to binary in JavaScript is easy, because JavaScript numbers have a toString() function that takes a radix parameter that specifies which base to use.

let x = 42;

x.toString(2); // '101010'

x.toString(16); // '2a', hexadecimal!

2) Encode data as base64 using Node.js Buffers

Node buffers have a toString() function that takes an encoding parameter. Calling toString('base64') converts the buffer into a base64 string, which is handy if you need to convert a file into base64 for email attachments.

const fs = require('fs');

const buf = fs.readFileSync('./package.json');
buf.toString('base64'); // 'ewogICJuYW1lIjog...'

3) Custom Tags for Objects

Objects' toString() is not very useful by default: the output is just [object Object]. However, you can make this output slightly more useful by setting the object's Symbol.toStringTag:

const obj = {};

obj[Symbol.toStringTag] = 'Test';
obj.toString(); // '[object Test]'

3 Neat Tricks For Sorting Arrays of Objects in JavaScript

Mastering JS — Tue, 12 Oct 2021 22:45:03 +0000

Working with arrays of objects in JavaScript can be a headache. Comparing arrays of objects is tricky without libraries. But, thankfully, sorting arrays of objects is somewhat easier because of some neat tricks.

1) Sorting By Date Properties

The hard part of sorting arrays of objects is to compare objects without transforming them explicitly. If you transform an array using map() or filter() before sorting, you lose the original array.

Sorting by date properties is a convenient one-liner because comparing dates in JavaScript is easy: subtracting 2 dates returns the difference between the two dates in milliseconds.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 - d3; // 0
d1 - d2; // 31536000000

So if you want to sort by a createdAt property, all you need to do is subtract the values of createdAt in the sort() callback.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

const objects = [
  { createdAt: d1, name: 'Test 1' },
  { createdAt: d2, name: 'Test 2' },
  { createdAt: d3, name: 'Test 3' }
];

objects.sort((a, b) => a.createdAt - b.createdAt);

// [ 'Test 2', 'Test 1', 'Test 3' ]
console.log(objects.map(o => o.name));

2) Using String Conversions

This trick is a bit less useful, but still interesting. Remember that JavaScript converts the array elements to strings before sorting unless you pass a function parameter to sort(). That means you can define a custom toString() function and JavaScript will sort objects by that toString() function as shown below.

class User {
  constructor(name) {
    this.name = name;
  }

  toString() {
    return this.name.length;
  }
}

const arr = [
  new User('333'),
  new User('4444'),
  new User('22')
];

// Sorts users by `name.length`!
// [ Test { name: '22' }, Test { name: '333' }, Test { name: '4444' } ]
arr.sort();

This approach is limited because you can only define one toString() function for a given class. And, if you want to change the sort order, you need to change each object's toString() function.

But this approach can be very useful if your object's toString() function is exactly what you want to sort by.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  toString() {
    return `${this.lastName}, ${this.firstName}`;
  }
}

const arr = [
  new User('John', 'Smith'),
  new User('Bill', 'Jones'),
  new User('Mike', 'Palmer')
];

// Sort users by "last, first"
arr.sort();

3) Sorting by Arbitrary Orderings

Suppose you have an array of characters from Star Trek: The Next Generation:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

Sorting by name or age is easy. But what about sorting by rank? Turns out that's easy too. Create a map from ranks to numbers, and sort by the difference in ranks as shown below.

const rankOrder = new Map([
  ['Captain', 1],
  ['Commander', 2],
  ['Lieutenant', 3]
]);

characters.sort((a, b) => {
  return rankOrder.get(a.rank) - rankOrder.get(b.rank);
});

// Picard, Riker, La Forge
characters;

3 Neat Features of JavaScript's Much-Maligned Date Class

Mastering JS — Tue, 21 Sep 2021 22:23:37 +0000

JavaScript's Date class is a common source of frustration, and there's countless blog posts on the internet describing precisely why Date is so hard to work with:

1) Formatting is limited and hard to work with, and doesn't have great browser support
2) The string formats that the Date() constructor accepts are quirky and hard to grasp
3) Limited timezone support
4) And many more

The limitations of Date are a big reason why developers are so excited about the new Temporal API. But don't write off the Date class completely. Believe it or not, the Date class has a few delightful features that we love.

1) You can compare dates using `<` and `>`

One tragic limitation of the Date() class is that neither === nor == can determine whether two dates are equal.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 === d3; // false
d1 == d3; // false

But, oddly enough, < and > work for determining whether one date is before or after another. You don't need Moment's or date-fns' isAfter() function.

d1 < d2; // false
d1 < d3; // false

d2 < d1; // true

2) Subtracting two dates returns the difference between the dates in milliseconds

The addition operator + notoriously doesn't work well with JavaScript dates. Adding 1000 to a date just returns a string with 1000 concatenated to the end of the date as a string.

const d = new Date();

d + 1000; // 'Tue Sep 21 2021 18:06:39 GMT-0400 (Eastern Daylight Time)1000'

However, if you subtract two Date instances, you get back the difference in milliseconds.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 - d3; // 0
d1 - d2; // 1 year in milliseconds, 1000 * 60 * 60 * 24 * 365

Even better, if subtract a number from a date, JavaScript converts the date to the unix timestamp and subtracts the number from that. So, while you can't easily add to a date, you can subtract from a date.

const d1 = new Date('2019-06-01');

d1; // 2019-06-01T00:00:00.000Z

new Date(d1 - 1000 * 60 * 60 * 24 * 365); // 2018-06-01T00:00:00.000Z

For example, to add 1 year to a date (modulo leap years, leap seconds, etc.) you can subtract a negative number from the date as shown below.

const d2 = new Date('2018-06-01');

new Date(d2 - -1 * 1000 * 60 * 60 * 24 * 365); // 2019-06-01T00:00:00.000Z

3) Basic Timezone Formatting

Most developers don't know that you can format dates in arbitrary timezones using the toLocaleString() method. The tradeoff is that some older browsers, like IE, don't support IANA timezone names. Here's an example of basic date formatting in JavaScript with timezones.

const date = new Date('2019-06-01T08:00:00.000Z');
// "June 01, 2019, 2 AM"
date.toLocaleString('en-US', {
  month: 'long',
  day: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  timeZone: 'America/Denver' // 6 hours behind UTC
});

While toLocaleString() isn't perfect, it does provide some rudimentary formatting, including timezone support. We still recommend using Moment or date-fns for most apps, but you can get away with toLocaleString() for some basic formatting.

3 TypeScript Tricks You Can Use in JavaScript

Mastering JS — Fri, 03 Sep 2021 21:44:59 +0000

TypeScript is growing rapidly in popularity, but isn't worth the effort for some projects. However, even if you're writing JavaScript, there's some patterns you can learn from TypeScript. Here's 3 of our favorite TypeScript-inspired patterns for JavaScript.

1) JavaScript Enums

TypeScript has support for enums, which are a neat pattern for defining an object whose keys you can use in place of hard-coded strings.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

JavaScript doesn't support enums. But TypeScript compiles to JavaScript, so what does the above code turn into? Turns out TypeScript enums compile into JavaScript POJOs.

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};

You can also make Direction immutable using Object.freeze(), which makes Direction pretty close to a TypeScript enum. And that means you can do what you expect to do with enums in other languages:

Get allowed enum values: Object.keys(Direction)
Check if a value equals an enum value: val === Direction.Up
Check if a value is in the enum: Object.hasOwnProperty(val)

2) `orFail()` helpers to avoid null checks

TypeScript requires you to check for null query results in Mongoose. This is good practice, but also gets a bit cumbersome if you need to do it over and over again.

const doc = await Model.findOne();
// TypeScript reports an error "Object is possibly 'null'."
// Need to add a `if (doc != null)` check
doc._id;

Mongoose queries have a neat orFail() helper that throws an error if there's no result, which means you can go about using doc without explicitly checking for null. This is because orFail() marks the query as resolving to a NonNullable.

const doc = await Model.findOne().orFail();
// Works!
doc._id;

We use this orFail() pattern a lot in our TypeScript tests, because it saves us from having to add repetitive if checks. If the orFail() is triggered, the error bubbles up to error handling.

However, there's no reason why you can't use orFail() in JavaScript! Just because TypeScript isn't there to tell you there's a problem, doesn't mean the problem isn't there.

Similarly, if you have other functions that may return null if a value is not found, consider wrapping them in a function that throws an error if the value is not found. It can save you a lot of null checks!

3) Use JavaScript maps for objects with unknown types

TypeScript makes it just a little easier to define a map with arbitrary keys than an object with arbitrary keys.

// An object with string keys and values of type `T`
interface AnyObject<T = any> { [k: string]: T }

// Map with string keys and values of type `T`
type AnyMap<T = any> = Map<string, T>;

TypeScript makes working with maps to store arbitrary key/value mappings easier, and with good reason: maps support mapping from keys of arbitrary type.

const fakeMap = {};
fakeMap[1] = 'number';
fakeMap['1'] = 'string';
fakeMap; // { '1': string }

const map = new Map();
map.set(1, 'number');
map.set('1', 'string');
map; // Map(2) { 1 => 'number', '1' => 'string' }

The issue is that JavaScript object keys can only be strings or symbols, so JavaScript always converts object keys to strings. That's why you should use maps in cases where you aren't sure that the keys you're using are strings.

Using `then()` vs Async/Await in JavaScript

Mastering JS — Wed, 25 Aug 2021 18:44:27 +0000

When making async requests, you can either use then() or async/await. Async/await and then() are very similar.
The difference is that in an async function, JavaScript will pause the function execution until the promise settles. With then(), the rest of the function will continue to execute but JavaScript won't execute the .then() callback until the promise settles.

async function test() {
  console.log('Ready');
  let example = await fetch('http://httpbin.org/get');
  console.log('I will print second');
}

test();
console.log('I will print first');

If you use promise chaining with then(), you need to put any logic you want to execute after the request in the promise chain. Any code that you put after fetch() will execute immediately, before the fetch() is done.

function test() {
  console.log('Ready');
  let example = fetch('http://httpbin.org/get').then((res) => {
    console.log('This is inside the then() block');
  });
  console.log('This is after the fetch statement where we are now executing other code that is not async');

}

test();
console.log('this is after the entire function');

We recommend using async/await where possible, and minimize promise chaining. Async/await makes JavaScript code more accessible to developers that aren't as familiar with JavaScript, and much easier to read.

Mastering JS' 5 Best Promises Tutorials

Mastering JS — Mon, 16 Aug 2021 16:50:22 +0000

Promises are one of the most important concepts in JavaScript. It is nearly impossible to write a modern JavaScript app without a then() function popping up somewhere.

Since promises are so fundamental to modern JavaScript, it pays to really understand how promises work in depth. With that in mind, here's some of our most popular tutorials on promises:

1) The Promise then() Function in JavaScript

The then() function is the primary way you interact with promises. Here's how it works.

2) JavaScript Promise Chaining

The then() function is used for chaining promises. This tutorial explains what it means to chain promises, and how you can chain promises like a pro.

3) JavaScript Create Promise

The then() function helps you work with promises, but how do you create a promise in the first place? This tutorial shows you how.

4) The Promise catch() Function in JavaScript

The catch() function is a commonly used pattern for handling errors in promises. Did you know that catch() is a one-line syntactic sugar on top of then()? This tutorial explains how catch() works.

5) The Promise.all() Function in JavaScript

The Promise.all() function is how you execute multiple promises in parallel. It is especially useful for executing multiple async functions in parallel and waiting for all of them to finish. This tutorial explains how Promise.all() works.

Mastering JS' 4 Best ESLint Tutorials

Mastering JS — Thu, 12 Aug 2021 16:06:33 +0000

At Mastering JS, we love ESLint. However, ESLint is one of those tools that we strive to work with as little as possible. Every minute you spent tinkering with your linter config is a minute that you're not spending working on features or fixes. So make sure it's worth the effort!

Here's some of our most popular tutorials for ESLint:

4) Intro to ESLint Config Files

This tutorial shows how to get started with your own ESLint config, including what version of JavaScript you're using and what rules you want to enforce.

3) Understanding ESLint Rules

Once you know how to create an ESLint config file, you need to configure rules. Even if you're using a preset config, like Standard, you may find yourself wanting to overwrite default rules that don't make sense for your application. This tutorial shows you how to configure ESLint rules, from basic enable/disable to sophisticated config options.

2) Using ESLint's --fix Flag

ESLint can fix violations of certain rules automatically. Here's how you can use --fix, including how to set --fix when using npm scripts.

1) Ignore Lines and Files In ESLint

Isn't it ironic that our most popular ESLint tutorial is how to disable ESLint? Well intentioned lint rules are helpful, but there's an exception to just about every rule. This tutorial shows you how to disable one ESLint rule for one line, one ESLint rule for one file, or ignore all rules in one file.

Mastering JS' 7 Best JavaScript Fundamentals Tutorials

Mastering JS — Tue, 20 Jul 2021 14:44:09 +0000

At Mastering JS, we think learning JavaScript fundamentals is much higher ROI than learning any particular framework. Two reasons why:

1) Fundamentals rarely change. The JavaScript language spec doesn't allow backwards breaking changes. The void operator will work the same way in 5 years as it does today.
2) Fundamentals are the same regardless of what framework you use. If you switch jobs tomorrow, you'll still be able to apply your fundamental language skills even if your new job does things differently.

7. The Promise then() Function in JavaScript

Promises and promise chaining, explained.

6. Understanding Array.splice() in JavaScript

The splice() function lets you add and remove elements from the middle of an array. Here's how it works.

5. Compare Dates in JavaScript

Checking whether two dates are equal in JavaScript is tricky, this tutorial explains how. On the bright side, you can use < and > to compare whether one date is before or after another.

4. What is a Plain Old JavaScript Object (POJO)?

Whether an object is a POJO or not is a nuanced and commonly debated topic. This tutorial goes into detail about why checking whether a value is a POJO is tricky.

3. Iterating Through an Object with `forEach()`

Some ESLint presets require you to use forEach() rather than conventional loops. That means you need to iterate through objects using forEach(). This tutorial shows you how.

2. [How to Use forEach() in JavaScript

](https://masteringjs.io/tutorials/fundamentals/foreach)

While we do not recommend using forEach() to iterate arrays in JavaScript, forEach() is an established part of JavaScript and worth mastering. This tutorial tells you what you need to know about forEach().

1. 3 Ways to Concatenate Strings in JavaScript

Concatenating two strings is one of the most fundamental tasks in JavaScript. This tutorial explains the tradeoffs of 3 different ways to concatenate strings.

Mastering JS' 5 Best Vue Tutorials

Mastering JS — Wed, 14 Jul 2021 15:16:59 +0000

We love Vue at Mastering JS. We even built our JavaScript job board in Vue, and wrote about the best Vue books.

Here's our 5 most popular Vue.js tutorials.

5) An Introduction To Vue $refs

Vue refs are a way to get access to a raw DOM element in your component. They're especially useful if you need to use a library that requires DOM elements, like Stripe elements.

4) Vue Error Handling

Vue's errorCaptured hook is an extremely powerful tool that lets you handle errors that happen in child components. You can handle any error that occurs from your root component, even errors in async methods!

3) What's New in Vue 3

Vue 3 is the same old Vue that we know and love, with a few new delightful surprises. Here's an overview of what's new in Vue 3.

2) How to Drag and Drop File Upload with Vue

Vue makes it easy to handle drag events using the @drag, which makes drag and drop file uploads easy. Here's how.

1) The $emit Function in Vue

The $emit() function is how a child component can communicate directly with it's parent. This tutorial describes how $emit() works.