DEV Community: Matt Gregg

Easily Password Protect NextJS pages with Iron Session

Matt Gregg — Sat, 22 Oct 2022 21:10:19 +0000

Say you want to set up a simple password protected page (or a bunch of pages), just for yourself, in your NextJS application. It’s super simple to do with an encrypted cookie and the help of a little library called iron-session, a Node.js stateless session utility. Most of the tutorials for this library focus on setting up user auth for multiple users which you may want to at some point but this tutorial will teach you how to lock certain server pages behind a password. I’ve used this before to create little admin pages that I want to keep private but I don’t want to set up full user auth.

Getting started

First things first, let’s assume you have a NextJS application, if you don’t follow the instructions to get one set up here.

Then you’ll need to install iron-session and swr (although you can probably not use swr if you want to cut it out, it’s just a nice to have).

npm install -S iron-session swr
yarn add iron-session swr

Create a .env.local and .env.local.example file at the root of your project. Make sure .env.local is added to your .gitignore (it should be by default in a vanilla NextJS setup) This file will look like this:

PASSWORD=<anything you want to secure page>
SECRET_COOKIE_PASSWORD=<anything at least 32 characters long>

Create a password 32 characters long for the SECRET (you will not need to remember this), then create a password you can remember for PASSWORD (this is what you’ll enter on the page to access your secure route).

You will then create a few new files:

/utils/session.js.

import { withIronSessionApiRoute, withIronSessionSsr } from 'iron-session/next';

const sessionOptions = {
  password: process.env.SECRET_COOKIE_PASSWORD,
  cookieName: 'next-iron-session/examples/next.js',
  // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
  cookieOptions: {
    secure: process.env.NODE_ENV === 'production',
  },
};

export function withSessionRoute(handler) {
  return withIronSessionApiRoute(handler, sessionOptions);
}

export function withSessionSsr(handler) {
  return withIronSessionSsr(handler, sessionOptions);
}

/pages/api/login.js

import { withSessionRoute } from '@utils/session';

export default withSessionRoute(async (req, res) => {
  const { password } = await req.body;

  try {
    if (password === process.env.PASSWORD) {
      const user = { isLoggedIn: true };
      req.session.user = user;
      await req.session.save();
      res.json(user);
    } else {
      const user = { isLoggedIn: false };
      res.json(user);
    }
  } catch (error) {
    const { response: fetchResponse } = error;
    res.status(fetchResponse?.status || 500).json(error.data);
  }
});

/pages/api/logout.js

import { withSessionRoute } from '@utils/session';

export default withSessionRoute(async (req, res) => {
  req.session.destroy();
  res.json({ isLoggedIn: false });
});

/pages/api/user.js

import { withSessionRoute } from '@utils/session';

export default withSessionRoute(async (req, res) => {
  const user = req.session.get('user');

  if (user) {
    // in a real world application you might read the user id from the session and then do a database request
    // to get more information on the user if needed
    res.json({
      isLoggedIn: true,
      ...user,
    });
  } else {
    res.json({
      isLoggedIn: false,
    });
  }
});

/utils/useUser.js

import { useEffect } from 'react';
import Router from 'next/router';
import useSWR from 'swr';

export default function useUser({
  redirectTo = false,
  redirectIfFound = false,
} = {}) {
  const { data: user, mutate: mutateUser } = useSWR('/api/user');

  useEffect(() => {
    // if no redirect needed, just return (example: already on /dashboard)
    // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
    if (!redirectTo || !user) return;

    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !user?.isLoggedIn) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && user?.isLoggedIn)
    ) {
      Router.push(redirectTo);
    }
  }, [user, redirectIfFound, redirectTo]);

  return { user, mutateUser };
}

/pages/login.js

import { useState } from 'react';
import useUser from '../utils/useUser';

export default function Login() {
  // here we just check if user is already logged in and redirect to admin
  const { mutateUser } = useUser({
    redirectTo: '/admin',
    redirectIfFound: true,
  });

  const [errorMsg, setErrorMsg] = useState('');

  async function handleSubmit(e) {
    e.preventDefault();

    const body = {
      password: e.currentTarget.password.value,
    };

    const userData = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });

    const user = await userData.json();

    try {
      await mutateUser(user);
    } catch (error) {
      console.error('An unexpected error happened:', error);
      setErrorMsg(error.data.message);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter password
        <input type='password' name='password' required />
      </label>

      <button type='submit'>Login</button>

      {errorMsg && <p>{errorMsg}</p>}
    </form>
  );
}

These pages and API routes create the backbone to log in and log out, and a form page you can enter your password on. You can see the login API route is doing a simple comparison of the password in the request with the password you set in your ENV file.

The last thing you need is the route (or routes) you want to secure. The example here does it with server side props (SSR) but you could also call the api route from the client side. This will redirect to /login if the user is not returned from the withSessionSsr handler or show the page if you are logged in.

pages/admin.js

import { withSessionSsr } from '@utils/session';

export default function Admin() {
  // Users will never see this unless they're logged in.
  return <h1>Secure page</h1>;
}

export const getServerSideProps = withSessionSsr(async function ({ req, res }) {
  const user = req.session.user;

  if (user === undefined) {
    res.setHeader('location', '/login');
    res.statusCode = 302;
    res.end();
    return { props: {} };
  }

  // You can return data here from a database knowing only authenticated users (you) will see it.
  return { props: {} };
});

Encrypted cookies are pretty awesome and the people behind iron-session are insanely smart. This will get you a simple and functional secure page that you can access with your password. You are vulnerable to brute force here just as an FYI. You'll have to do something else to mitigate that but if you name your pages something other than login and admin, you can at least be a bit obscure and get slight security through that.

Don’t forget to add the two ENV vars to your server as well when you deploy.

Let me know if you have questions or suggested modifications by contacting me on twitter @itwasmattgregg.

Connect To fly.io Sqlite Production Database

Matt Gregg — Wed, 15 Jun 2022 01:18:58 +0000

Gonna give a quick how to for connecting to and getting your sqlite database
from your production app on fly.io. It can be a bit confusing but once you get
your ssh connection set up and openssh installed on your fly.io server, it's
much easier to replicate. In this tutorial we will be connecting to your fly.io
instance via wireguard and ssh, then insalling openssh on your instance so we
can use scp from your local computer to copy the sqlite db file for viewing
locally.

Start by downloading Wireguard here.
You'll also need flyctl which I'm assuming you already have, but if you don't it
can be downloaded here.

You'll need to connect wireguard to fly.io by creating a wireguard config file
with the fly CLI. Use flyctl wireguard create to create a file called
wireguard.conf. Then open wireguard and import that file and activate that ssh
tunnel.

Next you're going to connect to your fly instance via ssh. Type
fly ssh issue --agent then fly ssh console to ssh into your instance.

Once you're in you'll need to install openssh on the instance to be able to
securely copy files from your instance to your local computer. Do this with the
command: apt-get install openssh-client.

At this stage you'll want to create a backup of your database to copy to your
local machine so nothing goes wrong trying to copy the file while a transaction
is happening. You can do this in one of 2 ways:

sqlite3 data/sqlite.db '.backup data/backup.db'

sqlite3 data/sqlite.db "VACUUM INTO 'data/backup.db'"

You may have to change the path to your database, mine was in the data
directory.

Exit ssh with exit;

Now you can copy your sqlite db file to your local computer with
scp root@[app-name].internal:/data/backup.db fly_backup.db.

Don't forget to fill in the name of your app on fly.io and change the path to
wherever you backed up your sqlite db on your server. Mine is at
/data/backup.db.

Open Graph As A Service

Matt Gregg — Sun, 13 Mar 2022 15:33:55 +0000

The other day I was looking through a repo and stumbled across someone using Vercel’s open graph image generator (https://og-image.vercel.app/), something I had no idea existed. I was able to set it up and replace my own implementation of something similar on my blog in an evening. My implementation involved generating images at build time with Gatsby, why I ever thought that was a good idea is beyond me.

This allows you generate unique open graph images for each one of your blog posts or pages and set it in meta tags. The meta tag in my blog posts now looks like this:

<meta
  property='og:image'
  content={OpenGraph.generateImageUrl(post.frontmatter.title)}
/>

Small tip here is to fork and deploy your own version of this repo (https://github.com/vercel/og-image#deploy-your-own) so you can change the default image. Change this line in your forked copy:

// api/_lib/parser.ts
if (!images[0].startsWith('https://assets.vercel.com/') && !images[0].startsWith('https://assets.zeit.co/'))

Either remove the check altogether or change it to your own URL.

P.S. Also a friendly reminder that this will not work if your pages are not viewable server-side meaning you’re using straight Vue or React to render your entire site. Each page needs to have a viewable html file stored, this is static generation or server side generation.

Sorting One Array With Another in JavaScript

Matt Gregg — Sun, 13 Mar 2022 15:28:41 +0000

Recently I needed to sort one array I had no control of to show specific categories in a specific order. Any items in the array of categories that I had not specified in my order array I needed to go at the end of my list. No other order mattered.

I solved this with a simple JS sort function and a little extra code for handling items not in the list.

const categoriesArray = [
  { category: 'stuff' },
  { category: 'things' },
  { category: 'unknown' },
  { category: 'important' },
];
const order = ['important', 'things', 'stuff'];

const sortedArray = categoriesArray
  .slice()
  .sort(({ category: categoryA }, { category: categoryB }) => {
    const indexA = order.indexOf(categoryA);
    const indexB = order.indexOf(categoryB);
    return (
      (indexA > -1 ? indexA : Infinity) - (indexB > -1 ? indexB : Infinity)
    );
  });

// Returns:
// [
//  { category: "important" },
//  { category: "things" },
//  { category: "stuff" },
//  { category: "unknown" }
// ]

Destructure Optional Params in Typescript

Matt Gregg — Thu, 06 May 2021 20:52:08 +0000

Sometimes you have a function with an optional Object argument that you want to destructure in the function. Like so:

interface SomeObject {
  option1: boolean;
  stuff: boolean;
}

function foo(param?: SomeObject) {
  const { stuff } = param;
}

However you'll get an error because param could be undefined and TS doesn't like you trying to destructure something that's undefined. There are a couple ways around this...

Define a fallback in the initializer and don't use the ? optional identifier:

function foo(param: SomeObject = {}) {
  const { stuff } = param;
}

Use nullish coalescence:

function foo(param?: SomeObject) {
  const { stuff } = param ?? {};
}

Or just call the propery on the parameter directly with optional chaining:

function foo(param?: SomeObject) {
  anotherFunction(param?.stuff);
}

All of these work and will handle param being undefined.

How to generate a random ID in JavaScript without a library

Matt Gregg — Thu, 22 Apr 2021 14:19:22 +0000

I'm sure this is posted in a ton of places already but I thought I would share a method I sometimes use to generate random strings of (numbers + letters) with javascript. This function returns the first 6 characters of a randomly generated string. Passing 36 to the toString method tells it to return numbers 0-9 and every letter in the alphabet, you can adjust the 6 in the substr method if you want a longer or shorter ID.

const id = function() {
  return Math.random()
    .toString(36)
    .substr(2, 6);
};

Automate Firebase🔥 Hosting with Github Actions

Matt Gregg — Sun, 24 May 2020 01:43:47 +0000

UPDATE 01/21/21: Using the firebase init command you can now automatically set up deployment from Github through the CLI and you shouldn’t have to follow any of this tutorial. Try that first. It should set up an action for merge and one for PRs.

This is a tutorial for quickly setting up a Github action to deploy a site to Firebase hosting. This would include sites built with Vue, React, Gatsby, the Next.js static generator or any other client-side site. In a few minutes you can be set up so every time you push code to master it will automatically be built by Github and deployed to Firebase. I'm going to assume you already have your code on Github and a firebase project setup. If your project doesn't have a firebase.json file in the root directory, or if that file doesn't have a hosting section you may need to run firebase init. Also make sure you have a .firebaserc file with your project ID or the deploy function won't work. If you run firebase init it should be created for you.

Here's an example of what that file should look like:

{
  "hosting": {
    "site": "site-name",
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

site-name should be replaced with the name of the site you want to deploy to, and dist should be the directory your site gets built to. Usually it's either dist or public.

Next you'll need to create a file called main.yml at the path
.github/workflows/. That file should have these contents:

name: Build and Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting:site-name
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

The things you may need to change here are any reference to dist, change to whatever your build script outputs the final code to, and the npm run build line can be changed to whatever your build command is. Also make sure to change site-name to whatever you used in your firebase.json file in the last step. Note: you can easily swap npm out with yarn, which at this time is available globally on the build environment.

This file basically runs two separate jobs: one to build the site files from your source code, and one to take that artifact and deploy it to Firebase hosting.

The final piece you need here is to add your secret Firebase token to Github so it has permission to deploy the site for you. To get this token run firebase login:ci in your terminal and copy the code generated. You'll paste that code in the settings of your Github project on the secrets page. Create a new secret with the name FIREBASE_TOKEN and paste the code you got from your terminal.

Now you can commit both files and push to Github and the Github action will take care of the rest. After you push you should be able to see the progress in the actions tab in your Github project.