DEV Community: Darren White

How to force the browser to download remote resource

Darren White — Mon, 05 Apr 2021 09:37:54 +0000

In a recent project, I needed to offer the ability to download files. Until recently I wasn't aware of the HTMLAnchorElement.download property. I'll explain how to use the download property and why this wouldn't work for my situation.

First though, here is a link to the repository and demo:

Demo: https://angry-bartik-1544f6.netlify.app/
Repo: https://github.com/dwhiteGUK/dlw-download-demo

Using the HTML5 download property

By default, anchor elements will navigate to the href element. You can add the download property which will prompt the browser to download the file:

<a download href="https://darrenwhite.dev/images/john-fowler-d2YMQ-hZ3og-unsplash.jpg">
  Download image
</a>

However, images and also Firefox only allows users to download files of the same origin. As the files for my project would be served from a different origin I would need a way to force the download.

Using fetch to download

My solution was to use fetch to get the remote resource:

const file = await fetch(*URL_TO_REMOTE_RESOURCE*);

const blob = await file.blob();
const url = URL.createObjectURL(blob);

Once the resource is downloaded, create an anchor element with the download and trigger the click event:

const downloadLink = document.createElement("a");

downloadLink.href = linkSource;
downloadLink.download = [download name];
downloadLink.click();

Here's the complete code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dlw download as data demo</title>
    <link rel="stylesheet" href="./build/tailwind.css" />
  </head>
  <body class="bg-gray-900 h-full">
    <main class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="max-w-3xl mx-auto flex flex-col items-center space-y-2">
        <div class="aspect-w-3 aspect-h-2 w-96">
          <img 
            class="object-fill shadow-lg rounded-lg"
            src="https://darrenwhite.dev/images/john-fowler-d2YMQ-hZ3og-unsplash.jpg"
            alt="Star shot in Cathedral Valley State Park, Nevada"
          >
        </div>
        <a
          href="https://darrenwhite.dev/images/john-fowler-d2YMQ-hZ3og-unsplash.jpg"
          class="inline-flex items-center mt-4 px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500"
          data-remote
        >
          Remote
          <svg
            class="ml-2 w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </a>
      <div>
    </main>

    <script defer type="text/javascript">
      const a = document.querySelector('a[data-remote]')

      a.addEventListener('click', async (e) => {
        e.preventDefault()

        const file = await fetch(e.target.href);

        const blob = await file.blob();

        const blobUrl = URL.createObjectURL(blob);

        const downloadLink = document.createElement("a");
        downloadLink.href = blobUrl;
        downloadLink.download = 'download-example.jpg';

        downloadLink.click();
      })
    </script>
  </body>
</html>

Demo: https://angry-bartik-1544f6.netlify.app/
Repo: https://github.com/dwhiteGUK/dlw-download-demo

Next.js authentication with Next Auth and AWS Cognito

Darren White — Thu, 25 Mar 2021 17:45:26 +0000

After my last post Custom Authentication UI for Amplify and Next.js website with React Hook Form, Next.js, Tailwind CSS I had wanted to try NextAuth.js

To begin, I removed all uses of the AWS Amplify Auth class. I had intended to do a custom UI, however, it seems currently you can only use the hosted UI when using NextAuth.js (unless you are doing a custom provider https://next-auth.js.org/providers/credentials#example-ui). Which makes sense as it's supposed to be drop-in authentication for your app/website. However, please correct me if I'm wrong.

Amazon Cognito

The authentication flow will need an Amazon Cognito user pool. Follow the steps below to add one if you don't have one already set up:

Log into http://console.aws.amazon.com/ and click Manage User Pools
Click 'Create a user pool', mine is in the top right as I already have user pools set up.
Enter the pool name and select Review Defaults -feel free to step through but for this case, we just need to change a few defaults
Important: select Add app client - this will contain the details required to hook the client up to the authentication service

And click 'Add an app client'
Ensure you enter a App client name and Generate client secret is checked
Select Return to pool details
Click 'Create pool'
Now we need to setup a domain, select 'Domain name' from the left hand menu.
1. Enter a domain name -
2. Check availability
3. Save the domain name as we'll need it later
4. Click 'Save changes'
Almost there 😓, select App client settings
1. Check Cognito User Pool
2. Add a Callback URL, for local development that would be http://localhost:3000/api/auth/callback/cognito
3. Check Authorization code grant
4. And the following Allowed oAuth Scopes: Email, openid and profile
5. And Save changes

That's all the setup needed, one final step is to get the relevant .env variables required for NextAuth.js. Go back to App clients on the left menu, make a note of the App client id. Select Show Details and make a more of the App client secret.

NextAuth.js

Now for the fun part. In an existing or new project install the NextAuth.js dependency:

yarn add next-auth
// or
npm install next-auth

.env

Before adding any js lets get the environment variables setup. Add a .env.local file in the root of the project

COGNITO_CLIENT_ID=*App client id*
COGNITO_CLIENT_SECRET=*App client secret*
COGNITO_DOMAIN=*Domain name*

Replace with the id, secret and domain we set up previously

These details can be found by logging into and going to Cognito > Manage user pools

API Route

As per the documentation add a file called [...nextauth].js in pages/api/auth.

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Cognito({
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      domain: process.env.COGNITO_DOMAIN,
    })
  ],
  debug: process.env.NODE_ENV === 'development' ? true : false
})

We supply NextAuth with a host of providers, which I've added the cognito details. Adding debug for development mode enables various logs in the terminal. Useful if there are any issues and seeing the key-value pairs for the signed-in user.

Now any requests to api/auth/* will be handle by NextAuth, for example sign in, sign out etc).

Use NextAuth hook

Inside pages/index.js replace all code with the following:

import Head from 'next/head'
import Link from 'next/link'
import { signIn, signOut, useSession } from 'next-auth/client'

export default function Home() {
  const [session, loading] = useSession()

  return (
    <div>
      <Head>
        <title>Authentication with NextAuth and AWS Cognito</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
          <div className="max-w-md w-full space-y-8 flex items-center flex-col">
            <a>
              <div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
                dlw
              </div>
            </a>

            {!session &&
              <>
                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
                  Example NextAuth Sign In
                </h2>
                <button
                  type="submit"
                  className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
                  disabled={loading}
                  onClick={() => signIn('cognito', {
                    callbackUrl: `${window.location.origin}/protected`
                  })}
                >
                  Sign In
                </button>
              </>
            }

            {session &&
              <>
                <h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">
                  Welcome, {session.user.name ?? session.user.email}
                </h1>
                <nav>
                  <Link href="/protected">
                    <a className="text-orange-500 hover:bg-black hover:text-white">Protected Page</a>
                  </Link>
                </nav>
                <button
                  type="submit"
                  className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
                  disabled={loading}
                  onClick={() => signOut({
                    callbackUrl: `${window.location.origin}`
                  })}
                >
                  Sign Out
                </button>
              </>
            }

          </div>
        </div>
      </main>
    </div>
  )
}

The useSession hook is the simplest way to check the logged-in state. if the user isn't logged in show a Sign in button with a click handler:

onClick={() => signIn('cognito', {
  callbackUrl: `${window.location.origin}/client-protected`
})}

I've added cognito as the first argument which ensures the user is shown the Cognito hosted UI when clicking the sign-in button. The callbackUrl will redirect to a protected page

At this point, we can test the sign-up or sign in. Run the development server yarn run dev and go to http://localhost:3000/. if you select Sign in you should be able to log in with an existing account or sign up for a new account.

Session Provider

In a multi-page application, we'll want to add the session provider. This ensure session state can be shared between pages:

which improves performance, reduces network traffic and avoids component state changes while rendering -

Update pages/_app.js :

import { Provider } from 'next-auth/client'
import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

Adding the Provider import import { Provider } from 'next-auth/client' and wrapping the main app component in the Provider component:

    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>

Once logged in you'll be re

Protected Page

For the protected page, add a new page called protected.js inside /pages directory (the actual page name isn't important):

import Head from 'next/head'
import Link from 'next/link'
import { getSession } from 'next-auth/client'

function Protected() {

  return (
    <div>
      <Head>
        <title>Authentication with NextAuth and AWS Cognito</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
          <div className="max-w-md w-full space-y-8  flex items-center flex-col">
            <a>
              <div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
                dlw
              </div>
            </a>
            <h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">Client Protected</h1>
            <nav>
              <Link href="/">
                <a className="text-orange-500 hover:bg-black hover:text-white">Home</a>
              </Link>
            </nav>
            <div className="prose">
              <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default Protected

export async function getServerSideProps(context) {
  const { res } = context;
  const session = await getSession(context)

  if (!session) {
    res.writeHead(302, {
      Location: "/",
    });
    return res.end();
  }

  return {
    props: { session }
  }
}

The important part is inside the getServerSideProps which checks for a session and if isn't available redirects to the index page with the sign-in button.

Repository: https://github.com/dwhiteGUK/dlw-next-auth-cognito

Deploying to production

Before deploying to production we need to add a NEXTAUTH_URL to our environment variables. Plus the previous environment variables will need adding to production environment

On Vercel were I host most of my Next.js websites they are added in the settings for the project.

Custom authentication UI for Amplify and Next.js website with React Hook Form and Tailwind CSS

Darren White — Tue, 16 Mar 2021 08:56:07 +0000

The first part of this tutorial regarding setting up Amplify is from the excellent Nader Dabits tutorial "The Complete Guide to Next.js Authentication". If you want something more in-depth and/or a video walkthrough I would suggest checking out his material.

My tutorial will take Nader's setup and bring in React hook form and Tailwind CSS to create custom UI elements to handle register, confirmation and sign-up.

Repository: https://github.com/dwhiteGUK/dlw-custom-auth-ui-nextjs-amplify

Amplify setup

Create next app npx create-next-app next-authentication
Install dependencies yarn add aws-amplify @aws-amplify/ui-react
Initialise amplify amplify init - I just picked the defaults
- The profile needs AdministratorAccess
Add the authentication service amplify add auth - again pick the defaults
Deploy the authentication service amplify push --y

Tailwind CSS - optional

For the forms styling etc. I'll be using Tailwind CSS. This is completely optional and feel free to use whatever works for you. If you use Tailwind CSS then the installation guide on the official docs is great: https://tailwindcss.com/docs/guides/nextjs.

Home page setup

The home page will show the relevant component dependent on the status. To begin add the following to index.js in the pages directory:

import { useState } from 'react'
import Head from 'next/head'

import Register from '../components/register'
import SignIn from '../components/sign-in'
import Confirm from '../components/confirm'

export default function Home() {
  const [status, setStatus] = useState('sign-in')
  const [user, setUser] = useState(null)

  return (
    <div>
      <Head>
        <title>Authentication with Amplify, React Hook form and Tailwind CSS</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
          <div className="max-w-md w-full space-y-8">
            <div>
              <img className="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow" />
              <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
                Example Amplify Register
              </h2>
            </div>

            {status === 'sign-in' ? <SignIn setStatus={setStatus} /> : null}
            {status === 'register' ? <Register setStatus={setStatus} setUser={setUser} /> : null}
            {status === 'confirm' ? <Confirm setStatus={setStatus} user={user} /> : null}
          </div>
        </div>
      </main>
    </div>
  )
}

The imortant parts is the useState hook const [status, setStatus] = useState('sign-in') for setting which form component to show:

{status === 'sign-in' ? <SignIn setStatus={setStatus} /> : null}
{status === 'register' ? <Register setStatus={setStatus} setUser={setUser} /> : null}
{status === 'confirm' ? <Confirm setStatus={setStatus} user={user} /> : null}

And the const [user, setUser] = useState(null) for storing the user's details which the confirmation component will need.

By default the status is sign-in, however, we can't sign in until we create a user therefore we'll focus on the register and confirmation flow first.

React Hook Form

For the forms I'll be using React Hook Form as the hooks it provides make it super simpler to get a form up and running.

To begin, install the dependency yarn add react-hook-form and add the import: import { useForm } from "react-hook-form"; to index.js

Register

Add a new component called components/register.js adding the useForm hook and for now, add a register function that will just console log our data. Later that will be updated to use the Auth Class from Amplify.

// src/pages/index.js
const { handleSubmit } = useForm();

async function signUp({ email, username, password }) {
  console.log(email, username, password)
}

Before submitting the form, the <form> element needs an onSubmit attribute which calls the above register function:

<form className="mt-8 space-y-6" onSubmit={handleSubmit(signUp)}>

If you haven't already run the development server yarn dev and go to http://localhost:3000/register. Submitting the form results in undefined for our form inputs values as we need to add refs to the input fields.

For this update the username and password field adding ref={register}, the updated username address field will be as follows:

<input ref={register} id="username" name="username" type="username" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Username" />

Make sure to pull in register from the useForm hook const { register, handleSubmit } = useForm();. Now submitting the form will result in values for the input fields.

Add Amplify Sign-Up

To hook up the sign-up form with Amplify add the Auth import: import { Auth } from 'aws-amplify';. Replace the signUp function with the following:

async function signUp({ email, username, password }) {
  try {
    const { user } = await Auth.signUp({
      username,
      password,
      attributes: {
        email, // optional but not in this case as MFA/Verification code wil be emailed
      }
    });

    setStatus('confirm')
    setUser({
      username: username,
      password: password,
    })

  } catch (error) {
    console.log('error signing up:', error);
  }
}

I'm storing the user's username and password temporally for a smoother registration flow. It was pointed out to me this could be a security risk. I feel storing it temporarily is ok, however, you can always tweak the registration flow to require login after confirmation. This issue is discussed in detail on an open issue on GitHub: https://github.com/aws-amplify/amplify-js/issues/6320 - the hosted UI doesn't have this drawback

The complete register code is below:

import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";
export default function Register({ setStatus, setUser }) {
  const { register, handleSubmit } = useForm();

  async function signUp({ email, username, password }) {
    try {
      await Auth.signUp({
        username,
        password,
        attributes: {
          email, // optional but not in this case as MFA/Verification code wil be emailed
        }
      });

      setStatus('confirm')
      setUser({
        username: username,
        password: password,
      })

    } catch (error) {
      console.log('error signing up:', error);
    }
  }

  return (
    <form className="mt-8 space-y-6" onSubmit={handleSubmit(signUp)}>
      <input type="hidden" name="remember" value="true" />
      <div className="rounded-md shadow-sm -space-y-px">
        <div>
          <label htmlFor="email-address" className="sr-only">Email address</label>
          <input ref={register} id="email-address" name="email" type="email" autoComplete="email" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address" />
        </div>
        <div>
          <label htmlFor="username" className="sr-only">Username</label>
          <input ref={register} id="username" name="username" type="username" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Username" />
        </div>
        <div>
          <label htmlFor="password" className="sr-only">Password</label>
          <input ref={register} id="password" name="password" type="password" autoComplete="current-password" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password" />
        </div>
      </div>

      <div className="flex items-center justify-end">
        <div className="text-sm">
          <button
            className="font-medium text-indigo-600 hover:text-indigo-500"
            onClick={() => setStatus('sign-in')}
          >
            Back to Sign In
          </button>
        </div>
      </div>

      <div>
        <button type="submit" className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <span className="absolute left-0 inset-y-0 flex items-center pl-3">
            <svg className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
            </svg>
          </span>
            Register
          </button>
      </div>
    </form>
  )
}

Confirm Sign-Up

The default Amplify setup requires MFA therefore before being able to sign in, the user must enter the verification code.

For that, add new component called components/confirm.js with the following:

import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";
import { useRouter } from 'next/router'
export default function Register({ user }) {
  const { register, handleSubmit } = useForm();
  const router = useRouter()

  async function confirmSignUp({ code }) {
    try {
      await Auth.confirmSignUp(user.username, code);

      await Auth.signIn(user.username, user.password);

      router.push('/client-protected')
    } catch (error) {
      console.log('error confirming sign up', error);
    }
  }

  return (
    <form className="mt-8 space-y-6" onSubmit={handleSubmit(confirmSignUp)}>
      <input type="hidden" name="remember" value="true" />
      <div className="rounded-md shadow-sm -space-y-px">
        <div>
          <label htmlFor="code" className="sr-only">Code</label>
          <input ref={register} id="code" name="code" type="number" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Enter verification code" />
        </div>
      </div>

      <div>
        <button type="submit" className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <span className="absolute left-0 inset-y-0 flex items-center pl-3">
            <svg className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
            </svg>
          </span>
            Confirm
          </button>
      </div>
    </form>
  )
}

As with the register component, we need the Auth class and useForm hook. In addition, we import the useRouter hook from next. This will be used to redirect the user once they successfully enter the verification code

import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";
import { useRouter } from 'next/router'

For the useRouter hook we initialise a router variable const router = useRouter() , the router is then used in the confirmSignUp function:

async function confirmSignUp({ code }) {
  try {
    await Auth.confirmSignUp(user.username, code);

    await Auth.signIn(user.username, user.password);

    router.push('/client-protected')
  } catch (error) {
    console.log('error confirming sign up', error);
  }
}

The above uses the Auth class from Amplify, notice how the destructured user prop is used to pass the username plus the entered code to the confirmSignUp method. If successful I automatically sign the user in.

As mentioned earlier if the username and password aren't stored then the flow will need updating to factor this in. The user would need some way to get back to the confirmation/verification form which this setup doesn't currently handle.

Sign In

import { useRouter } from 'next/router'
import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";

export default function SignIn({ setStatus }) {
  const { register, handleSubmit } = useForm();
  const router = useRouter()

  async function signIn({ username, password }) {
    try {
      await Auth.signIn(username, password);

      router.push('/client-protected')
    } catch (error) {
      console.log('error signing in', error);
    }
  }

  return (

    <form className="mt-8 space-y-6" onSubmit={handleSubmit(signIn)}>
      <input type="hidden" name="remember" value="true" />
      <div className="rounded-md shadow-sm -space-y-px">
        <div>
          <label htmlFor="username" className="sr-only">Username</label>
          <input ref={register} id="username" name="username" type="username" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Username" />
        </div>
        <div>
          <label htmlFor="password" className="sr-only">Password</label>
          <input ref={register} id="password" name="password" type="password" autoComplete="current-password" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password" />
        </div>
      </div>

      <div className="flex items-center justify-end">
        <div className="text-sm">
          <button
            className="font-medium text-indigo-600 hover:text-indigo-500"
            onClick={() => setStatus('register')}
          >
            Sign up for an account
          </button>
        </div>
      </div>

      <div>
        <button type="submit" className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <span className="absolute left-0 inset-y-0 flex items-center pl-3">
            <svg className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
    </form>
  )
}

Repository: https://github.com/dwhiteGUK/dlw-custom-auth-ui-nextjs-amplify

Summary

The process of putting this together highlights how quick the hosted solution is and for most cases, this would probably be an adequate solution. The Auth classes from AWS Amplify are very good with the exception of not being able to automatically sign in after verification. I think this may be a major drawback for some.

Using Next.js Preview mode with Strapi CMS

Darren White — Thu, 04 Mar 2021 11:02:52 +0000

This article is a loose continuation of 'How to trigger a Next.js rebuild from Strapi CMS' - as the website is statically generated any content being added through the Strapi CMS cannot be viewed as the relevant static page doesn't exist. For example the following news post exists https://poc-strapi-nextjs-frontend.vercel.app/news/1 but if you try https://poc-strapi-nextjs-frontend.vercel.app/news/4 you should get a '404 | This page could not be found.'.

To give any content editors a better experience I wanted to take advantage of Next.js preview mode with a link in the CMS:

Pre-requisites

Node (tested with v14)
NPM (tested with v7)
Next.JS website hosted on Vercel
Strapi CMS setup (my POC is hosted on render)

Next.js

Preview API

Within Next.js we need to add a API route, if you haven't used one before then have a read up of API routes on the Next.js docs.

First add a .env file, I have one for local and prodcution:

.env.development.local
.env.production.local

In there add a secret:

STRAPI_PREVIEW_SECRET=*******************

We use the secret to compare with the one sent from the CMS.

Next, in /pages/api add a new page called preview.js (the name can be anything you want - just make sure you change the relevant URL's when calling it).

export default async (req, res) => {
  // Check the secret and next parameters
  // This secret should only be known to this API route and the CMS
  if (
    req.query.secret !== process.env.STRAPI_PREVIEW_SECRET ||
    !req.query.id
  ) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  // Enable Preview Mode by setting the cookies
  res.setPreviewData({})

  // Redirect to the path from the fetched post
  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
  res.redirect(307, `/news/${req.query.id}`);
}

Add the code above. First we check the Next.js secret matches the one from the CMS.

  if (
    req.query.secret !== process.env.STRAPI_PREVIEW_SECRET ||
    !req.query.id
  ) {
    return res.status(401).json({ message: 'Invalid token' })
  }

Next.js loads anything in the .env into the request object. Now check there is a id. I'm using id for now, however in a real world application/website I'd use a slug like the Next.js docs example uses. If either of these checks fails the response fails with a 401.

res.setPreviewData({}) allows us to pass any data. It's worth noting that

because the data will be stored in a cookie, there’s a size limitation. Currently, preview data is limited to 2KB".

I tried to pass the entire post object which failed due to the above limit. Its always worth reading the documentation properly 😂

The last bit of code res.redirect(307,/news/${req.query.id}) redirects to the correct path with the relevant cookies set. In a real world scenario I wouldn't hard code the /news/ pathname and have that be dynamic in some way to cater for different pathnames/content.

You can test you can call the URL using https://<your-site>/api/preview?secret=<token>&id=<id>

Modify post page

In my test website I have dynamic route /pages/news/[id].js for displaying the articles. I won't go through each line of code but just discuss the small changes I made to enable preview mode.

In /pages/news/[id].js I added a preview argument which I pass to my getNewsItem function

//pages/news/[id].js
export async function getStaticProps(context) {

  const { params, preview } = context
  const item = await getNewsItem(params.id, preview)

  if (!item) {
    return { notFound: true }
  }

  const mdxSource = await renderToString(item?.Body ?? '')

  return {
    props: {
      item: {
        ...item,
        mdxSource
      },
      preview: preview ? true : null
    }
  }
}

With that in place I can check for the argument and append the query variable to the URL. ?_publicationState=preview is specific to Strapi, it would need modifying for other headless CMS's.

// lib/news.js
const getNewsItem = async (id, preview = false) => {
  try {
    // check for preview mode, add required query parameter if we are in preview mode
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/news-items/${id}${preview ? '?_publicationState=preview' : ''}`)

    if (res.status !== 200) {
      throw new Error('Error retrieving news item')
    }

    const data = await res.json()

    return data
  } catch (e) {
    console.error(e.name + ': ' + e.message)
  }
}

export { getNewsItem }

If you try to access the news item directly (e.g. https://poc-strapi-nextjs-frontend.vercel.app/news/99) without the cookies set Strapi will return a 500 error therefore I check the status:

 if (res.status !== 200) {
    throw new Error('Error retrieving news item')
  }

And throw an error. The dynamic route /pages/news/[id].js will end up with undefined for the item:

if (!item) {
  return { notFound: true }
}

In this case a 404 is shown on the website.

That's as much as we need for the front end. There is an optional step below for exiting preview mode.

Exit Preview Mode

By default the preview mode as no experation date, it ends when the session ends (browser closes). To manually end, add a new API route called exit-preview.js :

// pages/api/exit-preview.js
export default function handler(req, res) {
  // Clears the preview mode cookies.
  // This function accepts no arguments.
  res.clearPreviewData()

  resolve(true)
}

Calling clearPreviewData will clear any preview cookies. Back in pages/news/[id].js add a button with a click handler

<button onClick={() => exitPreviewMode()}> turn off</button>

I've got a nice banner with a text button but I'll leave the actual UI implementation to you

The exitPreviewMode calls the API endpoint. I envisage a scenario whereby the content editor will click the link from the CMS hence window.close() to close the window/tab and take the content editor back to the CMS.

async function exitPreviewMode() {
    const res = await fetch('/api/exit-preview').catch(err => console.error(err))

    if (res) {
      window.close()
    }
  }

Production

In production I am hosting the website on Vercel, any environment variables will need adding into the hosting environment.

Strapi

The Srapi side is a little less clear for me as I'm not as comfortable on that side. Also, I couldn't seem to find much documentation on enabling preview mode. After much trial and error, I managed to get it working using the following resources:

Locally, add a .env file in the root

FRONTEND_PREVIEW_SECRET=*********
FRONTEND_URL=http://localhost:3000

The secret needs to match the one set in Next.js (STRAPI_PREVIEW_SECRET). The FRONTEND_URL is the next.js local development hostname.

As per the issue on GitHub https://github.com/strapi/strapi-template-corporate/issues/1 create the following directories content-manager/admin/src into the /extensions directory making sure to add the content from content-manager/admin/src

In /extensions/content-manager/admin/src/InjectedComponents/PreviewURL/index.js I edited the PreviewUrl function from the one of Github changing the URL to use the id

// extensions/content-manager/admin/src/InjectedComponents/PreviewURL/index.js  

  // if (slug !== "application::page.page" || id === "create") {
  //   return null;
  // }
  // Build the right preview URL based on the page status
  const previewURL = `${FRONTEND_URL}/api/preview?secret=${FRONTEND_PREVIEW_SECRET}&id=${id}`;

The commented-out code allows draft posts to be previewed irrespective of publishing state and in the future, I'd also like editors to be able to preview pages therefore I've also removed this check slug !== "application::page.page" .

The big thing that caught me out is I had to modify the Webpack config and push in the environment variables

// admin/admin.config.js
module.exports = {
  webpack: (config, webpack) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config

    config.plugins.push(
      new webpack.DefinePlugin({
        FRONTEND_URL: JSON.stringify(process.env.FRONTEND_URL || 'http://localhost:3000'),
        FRONTEND_PREVIEW_SECRET: JSON.stringify(
          process.env.FRONTEND_PREVIEW_SECRET || 'secret-token'
        ),
      })
    );

    return config;
  },
};

I honestly don't know why that works, I spent several frustrating hours trying to get the preview to work. Until I added the above (and rebuilt the admin) the preview button wouldn't show in the CMS admin. I'll need to spend some time researching custom extensions/plugins building some for Strapi to understand whats's going on.

Going back to building the admin, for any changes to take effect, the admin needs to be rebuilt by running npm run build in the root of strapi.

Production

In production I'm hosting with render, through their dashboard I've added the FRONTEND_URL and FRONTEND_PREVIEW_SECRET . The secret matches the one added to Vercel with teh URL matching the deployed website URL on vercerl.

Repositories

Website: https://poc-strapi-nextjs-frontend.vercel.app/

Next.js: Replace React with Preact

Darren White — Sun, 28 Feb 2021 08:07:33 +0000

One option to increase performance in production is to replace React with Preact. I can't take credit for this as in my case, I got the idea and code from https://leerob.io/.

Its' really simple to do, however a word of caution, this may not work if certain features of React are required in production. If you go down this route make sure you test fully before deploying to live.

To get started if you haven't already, create a next.config.js and include the following code

module.exports = {
  webpack: (config, { dev, isServer }) => {
    // Replace React with Preact only in client production build
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }

    return config;
  },
};

The above checks that we are in production and the webpack function is being executed on the client side.

Don't forget to install Preact like i did, yarn add preact otherwise you'll get a build error for Module not found: React

Run yarn build to see the bundle size. I ran that before and after the changes, as you can see in the below screenshot the js size is about half:

React

Preact

Preact difference to React

If you use the preact-combat like in the example above then there is very little that isn't supported. For example, PropTypes are not supported in the core but are included in preact-combat.

A full list of what is and isn't included or is different can be found on the Preact website: https://preactjs.com/guide/v8/differences-to-react/

Resources

Repositories

Demo

React: https://preact-bundle-test.vercel.app/
Preact: https://preact-bundle-test-7sh8vcshq-dwhite.vercel.app/

How to trigger a Next.js rebuild from Strapi CMS

Darren White — Sun, 21 Feb 2021 08:14:39 +0000

For a recent proof of concept, I was setting up I needed to trigger a rebuild of the Next.js website hosted on Vercel when new content was added to the CMS (Strapi). That way it could the website could be completely static with all content generated at build time.

Pre-requisites

Node (tested with v14)
NPM (tested with v7)
Next.JS website hosted on Vercel
Strapi CMS setup (my POC is hosted on render)

Vercel

Once you have your website set on Vercel, navigate to the project overview and go to Settings > Git > Deploy Hooks:

Add a hook name and which git branch you want to use. For the demo, I called mine STRAPI and the branch is main

Copy the URL of the webhook as we'll need that next.

Now would be a good time to test the webhook works. Open up a terminal and use the following command with the correct webhook URL:

curl -X POST https://api.vercel.com/v1/integrations/deploy/********

If successful you'll get a response similar to the following:

{
  "job": {
    "id": "XxvXRPVQJyM3IkDx8Vro",
    "state": "PENDING",
    "createdAt": 1613841281923
  }
}

Strapi

Now for the Strapi CMS side. Log into the Strapi Admin and navigate to Setting > Webhooks and click Add new webhook. Fill in the name, URL, and which events you'd like to trigger a re-build of the frontend website.

Save the details and then test using the Trigger button at the top. I'd also test by adding or updating some content.

Next, I'll look at setting up previews as not everybody adding content to the website will want to wait for a deployment to finish to see what the new content will look like.

Multiple Themes for Next.js with next-themes, Tailwind CSS and CSS Custom Properties

Darren White — Wed, 10 Feb 2021 20:20:20 +0000

Below is an approach for switching between multiple themes using next themes and not just light and dark themes. This approach combines next themes, Tailwind CSS and CSS custom properties.

A demo of the final output and a link to the final code can be accessed at the following links:

Pre-requisites

Node (tested with v14, a couple of version earlier should be fine)
Npm (tested with v7)
Next.JS and Tailwind CSS installed, getting started instructions can be found on the Tailwind CSS website. Choose the "Include Tailwind in your CSS" option (not the JS import option).

Next themes

For controlling which theme is shown we'll use next-themes. Install the dependency using your prefered package manager:

npm install next-themes
# or
yarn add next-themes

If you haven't already add a custom app component, Create-next-app will do this automatically. Now wrap Component with the theme provider component exported from next-themes

import { ThemeProvider } from 'next-themes';

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

For reasons that will be explained later Tailwind CSS will be imported via the global style sheet. We need to use the CSS import solution to allow the use of CSS custom properties when changing the theme.

On that note, we need a way to change our theme. Add a new directory called components. Inside that directory add a new file ThemeChanger.js for the theme switcher component:

// ./components/ThemeChanger.js
import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';

const themes = [{ name: 'Light' }, { name: 'Dark' }, { name: 'Emerald' }, { name: 'Pink' }];

const ThemeChanger = () => {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), []);

  if (!mounted) return null;

  return (
    <div className="p-8 flex justify-between items-center font-bold text-xl bg-th-background-secondary text-th-primary-dark">
      <span>
        The current theme is: <strong>{theme}</strong>
      </span>
      <div>
        <label htmlFor="theme-select" className="sr-only mr-2">
          Choose theme:
        </label>
        <select
          name="theme"
          id="theme-select"
          className="bg-white text-gray-800 border-gray-800 border py-1 px-3"
          onChange={(e) => setTheme(e.currentTarget.value)}
          value={theme}
        >
          <option value="">Select Theme</option>
          {themes.map((t) => (
            <option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
              {t.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default ThemeChanger;

Next.js is SSR (server-side rendered) or SSG (static site generated) we don't know the theme on the server, therefore, we add a check to see if the component is mounted:

// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), []);

if (!mounted) return null;

If not it returns null ensuring the UI uses the current theme once the page is mounted on the client.

The theme changer component includes some Tailwind CSS classes. These aren't important, the main thing of note is the useTheme hook and onChange handler for setting the theme. I also have a array with the list of themes:

const themes = [{ name: 'Light' }, { name: 'Dark' }, { name: 'Emerald' }, { name: 'Pink' }];

These will be referenced when setting up the "themes" in the global.css later

Demo Page

Optionally add the following content to pages/index.js. The actual content isn't important, you just need some content with Tailwind CSS classes

import ThemeChanger from '../components/ThemeChanger';

export default function Home() {
  return (
    <div className="antialiased font-sans h-full w-full bg-th-background text-th-primary-dark">
      <ThemeChanger />

      <main>
        <div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8 bg-th-background">
          <div className="relative max-w-7xl mx-auto">
            <div className="text-center">
              <h2 className="text-3xl tracking-tight font-extrabold text-th-accent-medium sm:text-4xl">
                From the blog
              </h2>
              <p className="mt-3 max-w-2xl mx-auto text-xl sm:mt-4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed.
              </p>
            </div>
            <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
              <div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div className="flex-shrink-0">
                  <img
                    className="h-48 w-full object-cover"
                    src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
                    alt=""
                  />
                </div>
                <div className="flex-1 bg-th-background-secondary p-6 flex flex-col justify-between">
                  <div className="flex-1">
                    <p className="text-sm font-medium text-th-accent-medium">
                      <a href="#" className="hover:underline">
                        Article
                      </a>
                    </p>
                    <a href="#" className="block mt-2">
                      <p className="text-xl font-semibold">Boost your conversion rate</p>
                      <p className="mt-3 text-base">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium
                        eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.
                      </p>
                    </a>
                  </div>
                  <div className="mt-6 flex items-center">
                    <div className="flex-shrink-0">
                      <a href="#">
                        <span className="sr-only">Roel Aufderehar</span>
                        <img
                          className="h-10 w-10 rounded-full"
                          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                          alt=""
                        />
                      </a>
                    </div>
                    <div className="ml-3">
                      <p className="text-sm font-medium">
                        <a href="#" className="hover:underline">
                          Roel Aufderehar
                        </a>
                      </p>
                      <div className="flex space-x-1 text-sm">
                        <time dateTime="2020-03-16">Mar 16, 2020</time>
                        <span aria-hidden="true">&middot;</span>
                        <span>6 min read</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div className="flex-shrink-0">
                  <img
                    className="h-48 w-full object-cover"
                    src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
                    alt=""
                  />
                </div>
                <div className="flex-1 bg-th-background-secondary p-6 flex flex-col justify-between">
                  <div className="flex-1">
                    <p className="text-sm font-medium text-th-accent-medium">
                      <a href="#" className="hover:underline">
                        Video
                      </a>
                    </p>
                    <a href="#" className="block mt-2">
                      <p className="text-xl font-semibold">How to use search engine optimization to drive sales</p>
                      <p className="mt-3 text-base">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat
                        doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo
                        laudantium.
                      </p>
                    </a>
                  </div>
                  <div className="mt-6 flex items-center">
                    <div className="flex-shrink-0">
                      <a href="#">
                        <span className="sr-only">Brenna Goyette</span>
                        <img
                          className="h-10 w-10 rounded-full"
                          src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                          alt=""
                        />
                      </a>
                    </div>
                    <div className="ml-3">
                      <p className="text-sm font-medium">
                        <a href="#" className="hover:underline">
                          Brenna Goyette
                        </a>
                      </p>
                      <div className="flex space-x-1 text-sm">
                        <time dateTime="2020-03-10">Mar 10, 2020</time>
                        <span aria-hidden="true">&middot;</span>
                        <span>4 min read</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div className="flex-shrink-0">
                  <img
                    className="h-48 w-full object-cover"
                    src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
                    alt=""
                  />
                </div>
                <div className="flex-1 bg-th-background-secondary p-6 flex flex-col justify-between">
                  <div className="flex-1">
                    <p className="text-sm font-medium text-th-accent-medium">
                      <a href="#" className="hover:underline">
                        Case Study
                      </a>
                    </p>
                    <a href="#" className="block mt-2">
                      <p className="text-xl font-semibold">Improve your customer experience</p>
                      <p className="mt-3 text-base">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo
                        recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.
                      </p>
                    </a>
                  </div>
                  <div className="mt-6 flex items-center">
                    <div className="flex-shrink-0">
                      <a href="#">
                        <span className="sr-only">Daniela Metz</span>
                        <img
                          className="h-10 w-10 rounded-full"
                          src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixqx=UsVmjgUMfb&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                          alt=""
                        />
                      </a>
                    </div>
                    <div className="ml-3">
                      <p className="text-sm font-medium">
                        <a href="#" className="hover:underline">
                          Daniela Metz
                        </a>
                      </p>
                      <div className="flex space-x-1 text-sm">
                        <time dateTime="2020-02-12">Feb 12, 2020</time>
                        <span aria-hidden="true">&middot;</span>
                        <span>11 min read</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

The two main things to note is

There is no dark: prefix on any of the classes. Tailwind CSS comes with dark mode backed in. However, as we'll be switching between multiple themes and using CSS custom properties it makes sense to be consistent across all the themes
I have used custom Tailwind CSS classes, for example, bg-th-background and text-th-secondary-200 etc. These custom classes it what enables the theme switching to happen, hopefully, the logic to how this works is explained below.

Tailwind CSS Setup and CSS Custom Properties

As per the Tailwind CSS instructions, you should have a global.css that looks similar to the following:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

After the Tailwind CSS includes, add the following CSS custom properties:

:root {
  --background: theme('colors.white');
  --background-secondary: theme('colors.gray.50');

  --primary-dark: theme('colors.gray.900');
  --primary-medium: theme('colors.gray.700');
  --primary-light: theme('colors.gray.500');
}

[data-theme='dark'] {
  --background: theme('colors.black');
  --background-secondary: theme('colors.gray.800');

  --accent-dark: theme('colors.fuchsia.900');
  --accent-medium: theme('colors.fuchsia.700');
  --accent-light: theme('colors.fuchsia.500');

  --primary-dark: theme('colors.gray.300');
  --primary-medium: theme('colors.gray.200');
  --primary-light: theme('colors.gray.100');
}

[data-theme='emerald'] {
  --background: theme('colors.white');

  --accent-dark: theme('colors.emerald.900');
  --accent-medium: theme('colors.emerald.700');
  --accent-light: theme('colors.emerald.500');
}

[data-theme='pink'] {
  --background: theme('colors.gray.900');
  --background-secondary: theme('colors.gray.800');

  --accent-dark: theme('colors.pink.900');
  --accent-medium: theme('colors.pink.700');
  --accent-light: theme('colors.pink.500');

  --primary-dark: theme('colors.gray.300');
  --primary-medium: theme('colors.gray.200');
  --primary-light: theme('colors.gray.100');
}

In the above, I'm using colours provided by Tailwind CSS. If I wanted to add custom colours I'd extend the tailwind.config.js and add them there ensuring our Tailwind CSS config remains the source of truth for our themes. The :root is essentially the light theme, notice how the other options match the themes array setup earlier.

The tailwind.config.js should currently look like the following:

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

In the theme section add the following to the extend key:

theme: {
    extend: {
      colors: {
        emerald: colors.emerald,
        fuchsia: colors.fuchsia,
        'th-background': 'var(--background)',
        'th-background-secondary': 'var(--background-secondary)',
        'th-foreground': 'var(--foreground)',
        'th-primary-dark': 'var(--primary-dark)',
        'th-primary-medium': 'var(--primary-medium)',
        'th-primary-light': 'var(--primary-light)',
        'th-accent-dark': 'var(--accent-dark)',
        'th-accent-medium': 'var(--accent-medium)',
        'th-accent-light': 'var(--accent-light)',
      },
    },
  },

Initially, I'm just importing the colours emerald and fushia to ensure they are available in our global.css file.

The important part is the additional colours added, for example, 'th-primary-dark': 'var(--primary-dark)' - it references the CSS custom property we set up earlier. Tailwind CSS will add additional classes like text-th-primary-dark. This is how the magic happens when switching between the themes. If you recall the demo page included these classes:

<p className="text-sm font-medium text-th-accent-medium">
  <a href="#" className="hover:underline"> Video </a>
</p>

When the website is first loaded next themes will set the theme attribute on the HTML element to light, <html data-theme="light"> - if changed that will get updated to the selected theme <html data-theme="pink">. When this happens the underlying colour for our custom Tailwind CSS class will get updated and therefore change the colour scheme. The below video shows this in action:

If you haven't already run npm run dev in a terminal and visit http://localhost:3000 to see the above locally.

Demo and final code can be found below:

In the thread that inspired this blog post, tailwindcss-theme-swapper was mentioned. It looks like an interesting option and saves some of the boilerplate in getting setup.

I'll be interested in any other options, and in particular approaches to naming conventions for custom classes/CSS custom properties. The latter could be problematic on larger websites and applications.

Add Dark Mode when using Nextjs with Next Themes and Tailwind CSS

Darren White — Wed, 03 Feb 2021 10:28:58 +0000

After several recommendations I wanted to give next-themes a try. In this post I'll cover adding it along with Tailwind CSS to a Next.js website. A demo of what we will be building: https://dlw-nextjs-themes-tailwindcss-dark-mode.vercel.app/

Nextjs Setup

To get started the easiest way is to use create react app, full getting started instructions can be found on the Next.js website

npx create-next-app
# or
yarn create next-app

Next themes

For controlling which theme is shown we'll use next-themes. Install the dependency using your prefered package manager:

npm install next-themes
# or
yarn add next-themes

If you haven't already add a custom app component, Create-next-app will do this automatically. Now wrap Component component in the theme provider exported from next-themes with a property called attribute and a value of class

import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

We need a way to change our theme. Add a new directory called components with the following:

import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';

const ThemeChanger = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <div className="p-8 bg-gray-200 flex justify-between items-center font-bold text-xl">
      The current theme is: {theme}
      <div>
        <button className="hover:text-orange-600" onClick={() => setTheme('light')}>
          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
        </button>
        <button className="ml-4 hover:text-orange-600" onClick={() => setTheme('dark')}>
          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" id="moon" class="w-8 h-8 text-cool-gray-800 dark:text-cool-gray-200 group-hover:text-purple-600 group-focus:text-purple-600 dark:group-hover:text-purple-50 dark:group-focus:text-purple-50"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </div>
  )
}

export default ThemeChanger;

As Nextjs is SSR (server-side rendered) or SSG (static site generated) we don't know the theme on the server, therefore, we add a check to see if the component is mounted:

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

If not it returns null ensuring the UI uses the current theme once the page is mounted on the client.

Also the theme changer component includes some Tailwind CSS classes which we'll set up next. These aren't important, the main thing of note is the useTheme hook and onClick handler for setting the theme.

The svg icons are courtesy of Heroicons.

Tailwind CSS

Now to set up Tailwind CSS

# If you're on Next.js v10
npm install tailwindcss@latest postcss@latest autoprefixer@latest
# or 
yarn add tailwindcss@latest postcss@latest autoprefixer@latest

Run the following to generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

When complete set darkMode to 'class' in the tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: class, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

This is how Tailwind CSS switches the styles. Also, notice the purge options which will remove any unused classes in our production build.

Demo page

Replace /pages/index.js with the following content:

import ThemeChanger from '../components/ThemeChanger';

export default function Home() {
  return (
    <div className="antialiased font-sans text-gray-500 dark:text-gray-200 bg-white dark:bg-gray-900 w-full">
      <ThemeChanger />

      <div className="relative py-16">
        <div className="relative px-4 sm:px-6 lg:px-8">
          <div className="text-lg max-w-prose mx-auto">
            <h1>
              <span className="block text-base text-center text-orange-600 dark:text-pink-500 font-semibold tracking-wide uppercase">Introducing</span>
              <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">next themes demo</span>
            </h1>
            <p className="mt-8 text-xl leading-8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
          </div>
          <div className="mt-6 mx-auto">
            <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
            <ul>
              <li>Quis elit egestas venenatis mattis dignissim.</li>
              <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
              <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
            </ul>
            <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
            <blockquote>
              <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
            </blockquote>
            <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
          </div>
        </div>
      </div>

    </div>
  )
}

Notice how various classes are prefixed with 'dark:' for example:

text-gray-500 dark:text-gray-200

When clicking our theme buttons the dark prefix will be activated if a .dark class is found higher up in the HTML tree (and vica-versa). If you haven't already, start the dev server to see it in action:

npm run dev

And go to http://localhost:3000, we can not switch between the two themes. We do have unstyled HTML which we'll fix next.

tailwind TYPOGRAPHY

tailwind TYPOGRAPHY provides a set of default styling to any HTML or Markdown you don't control, for example, content pulled from a CMS.

To install the plugin, run:

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

Then update the tailwind.config.js, adding the plugin and specifying the dark variant for typography property. The latter config setting as caught me out a couple of times. Without that our prose-dark styles won't be applied

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

I also added some styling for the typography plugin to use and extending the default colour palette. My final tailwind.config.js file looks like the following:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.500'),
            strong: {
              color: theme('colors.orange.500'),
            },
            blockquote: {
              color: theme('colors.orange.700'),
            }
          },
        },
        dark: {
          css: {
            color: theme('colors.gray.500'),
            strong: {
              color: theme('colors.pink.500'),
            },
            blockquote: {
              color: theme('colors.pink.700'),
            }
          },
        },
      }),
    },
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Feel free to use different colours, and extend the HTML elements typography applies custom colours/styles to.

Back to the /pages/index.js page to add the necessary prose classes. Around line 17 update the parent content div from:

<div className="mt-6 mx-auto">
  <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
  <ul>
    <li>Quis elit egestas venenatis mattis dignissim.</li>
    <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
    <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
  </ul>
  <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
  <blockquote>
    <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
  </blockquote>
  <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
</div>

To:

<div className="mt-6 prose prose-orange dark:prose-dark dark:prose-pink prose-lg mx-auto">
  <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
  <ul>
    <li>Quis elit egestas venenatis mattis dignissim.</li>
    <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
    <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
  </ul>
  <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
  <blockquote>
    <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
  </blockquote>
  <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
</div>

Adding in prose prose-orange dark:prose-dark dark:prose-pink prose-lg. A final change is to add some styles to global/styles.css to ensure the background colour is full width and height, no matter the resolution viewing:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  height: 100%;
  display: grid;
}

#__next {
  height: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
}

The final page should look something like the following:

Cookies = Bad

As a final thought, I did look into using cookies to stop having to check if the component was mounted. The author of next-themes covers this in one of his comments on an issue pointing out the downside of cookies over local storage:

Forces your pages to be SSR, which alone causes more performance issues than a 2-3ms script does
Does not support SSG pages
You will still need a blocking script to support System theme (for full support at least)
Cookie parsing/setting is more verbose than localStorage, likely requiring a 5kb+ library

The full thread can be seen here https://github.com/pacocoursey/next-themes/issues/17

Repository: https://github.com/dwhiteGUK/dlw-nextjs-themes-tailwindcss-dark-mode
Demo: https://dlw-nextjs-themes-tailwindcss-dark-mode.vercel.app/

Tailwind CSS and useDarkMode hook

Darren White — Mon, 25 Jan 2021 21:03:13 +0000

Background

I've been using tailwindcss for a couple of years now. Version 2 includes the option to easily add dark mode. I thought I'd give it a try on my blog which is built using Next.js

Setup

To begin I'll assume you have a react based website with tailwindcss already set up. In the tailwind.config.js file add a darkMode option:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // can also be set to 'media'
  // ...
}

Now when adding your styles add a dark variant alongside the 'light' styles:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

If the .dark class is present earlier in the html tree then the dark theme will be applied.

useDarkMode Hook

For activiating the .dark class, I'm using the excellent useDarkMode hook by Donavon West which you'll need to install:

npm i use-dark-mode

The plugin works by toggling a class added to the body element (or a different element if specified):

body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
}

However, as mentioned previously tailwindcss applies the dark mode if there is a .dark class, therefore, the default classes will need to be overridden by passing the options to the useDarkMode hook:

const { toggle, value } = useDarkMode(initialState, {
    classNameDark: 'dark',
    classNameLight: 'light',
  });

And thats it unless you are using the tailwindcss typography plugin.

tailwindcss typgraphy

As my blog content is taken Markdown files I'm using the tailwindcss typography plugin to add typograhic styles to my content. This is done by adding a .prose class to the content wrapper element:

<article class="prose">
  {{ markdown }}
</article>

For the dark theme:

<article class="prose prose-dark">
  {{ markdown }}
</article>

For the blog content I would check the value returned and apply the classes accordingly:

const BlogDetails = () => {
  const { darkMode } = useTheme();

  return (
    <AppShell>
      <NextSeo title={`${title} | dlw`} description={snippet} />
      <Container>
        <MDXProvider components={mdxComponents}>
          <article className={`${darkMode ? 'prose prose-dark' : 'prose'}`}>{children}</article>
        </MDXProvider>
      </Container>
    </AppShell>
  );
};

export default BlogDetails;

The issue I ran into was the .dark class would be applied by the hook but the value available when setting the .prose value could be out of sync resulting in unreadable text:

My solution was to wrap the useDarkMode hook in my own custom hook:

import { useEffect } from 'react';
import useDarkMode from 'use-dark-mode';

export const useTheme = (initialState = false) => {
  const { toggle, value } = useDarkMode(initialState, {
    classNameDark: 'dark',
    classNameLight: 'light',
  });

  useEffect(() => {
    const proseEl = document.querySelector('article.prose');

    if (!proseEl) {
      return;
    }

    if (value) {
      document?.querySelector('article.prose').classList.add('prose-dark');
    } else {
      document?.querySelector('article.prose').classList.remove('prose-dark');
    }
  }, [value]);

  return { toggle, darkMode: value };
};

The hook listens for any changes to the dark mode and adds or removes the .prose-dark class as required. With the hook running on every page I escape the useEffect if the required HTML element isn't present.

Puppeteer - log in and video download

Darren White — Sat, 16 Jan 2021 15:46:58 +0000

TL;DR

I needed to download a video that was behind a login screen. This gave me a good excuse to try and automate the process as much as possible using puppeteer.

Requirements - For this you'll need a recent version of NodeJs (tested with version 14.14.0).

Full Code

The full code can be seen below, and the repo is available at https://github.com/dwhiteGUK/dlw-puppeteer-video-download. The code is for a very specific situation and therefore would need to be modified accordingly dependant on your requirements.

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

require('dotenv').config();

function checkExistsWithTimeout(filePath, timeout) {
  return new Promise(function (resolve, reject) {
    var timer = setTimeout(function () {
      watcher.close();
      reject(new Error('File did not exists and was not created during the timeout.'));
    }, timeout);

    fs.access(filePath, fs.constants.R_OK, function (err) {
      if (!err) {
        clearTimeout(timer);
        watcher.close();
        resolve(`${filePath} exists`);
      }
    });

    var dir = path.dirname(filePath);
    var basename = path.basename(filePath);
    var watcher = fs.watch(dir, function (eventType, filename) {
      if (eventType === 'rename' && filename === basename) {
        clearTimeout(timer);
        watcher.close();
        resolve(`${filename} exists`);
      }
    });
  });
}

const readLine = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout,
});

(async () => {
  let browser;

  try {
    readLine.question('Enter web address: ', async (webAddress) => {
      // extract origin - used for login
      // and then downloading video from post
      const url = new URL(webAddress);

      browser = await puppeteer.launch({
        headless: false,
      });
      const page = await browser.newPage();

      // navigate to URL
      await page.goto(url.origin);

      // enter login details
      await page.click('aria/Email address');
      await page.type('aria/Email address', process.env.USERNAME);
      await page.click('aria/Password');
      await page.type('aria/Password', process.env.PASSWORD);
      await page.keyboard.press('Enter');

      await page.waitForNavigation();

      await page.goto(url.href, { waitUntil: 'load' });

      const { fileName, fileType } = await page.evaluate(async () => {
        const fileName = 'download-link';

        const el = document.querySelector('video');
        const { src, type } = el.querySelector('source');

        const downloadLink = document.createElement('a');
        downloadLink.innerText = 'Download Video';
        downloadLink.href = src;
        downloadLink.download = fileName;

        document.querySelector('body').appendChild(downloadLink);

        return { fileName, fileType: type.split('/')[1] };
      });

      await page.click(`[download="${fileName}"]`);

      const res = await checkExistsWithTimeout(`/Users/dwhite/Downloads/${fileName}.${fileType}`, 30000);

      await browser.close();

      process.exit();
    });
  } catch (error) {
    console.error(error);
    await browser.close();
  }
})();

To begin we pull in the required dependencies:

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

We need puppeteer for the headless browser and automation. fs and path aren't required at the moment. They'll be used later to check the download exists.

Code Walkthrough

To start we setup an instance of the nodejs readline module that we'll use to input the web address:

const readLine = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout,
});

Next add a IIFE (Immediately-invoked Function Expression) and I've marked the function async to allow the use of await later. Side note it looks like node v14.8.0 allows top level await therefore the following could possibly be amended (earlier versions was behind a flag)

(async () => {})();

Inside the anonymous async function declare a let variable that will hold our puppeteer instance. And add a try-catch:

let browser;

try {
} catch (error) {
  console.error(error);
  await browser.close();
}

I've declared it outside the try/catch so that if we get a failure the headless browser can be closed. For that, we need a reference to puppeteer.

readLine.question('Enter web address: ', async (webAddress) => {
  // extract origin - used for login
  // and then downloading video from post
  const url = new URL(webAddress);

  browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();

  // navigate to URL
  await page.goto(url.origin);
});

The above asks for the full web address via the terminal then launches the puppeteer instance. Later I append a link to the body therefore I set headless to false.

As the video is behind a login I've extracted the origin from the web address. Using the browser instance to crate a new page and navigate to the origin.

// enter login details
await page.click('aria/Email address');
await page.type('aria/Email address', process.env.USERNAME);
await page.click('aria/Password');
await page.type('aria/Password', process.env.PASSWORD);
await page.keyboard.press('Enter');

await page.waitForNavigation();

await page.goto(url.href, { waitUntil: 'load' });

Once loaded I select the relevant form inputs and enter the login details which I've stored in a .env file. When the details have been entered, submit the form and wait for the navigation to finish.

const { fileName, fileType } = await page.evaluate(async () => {
  const el = document.querySelector('video');
  const { src, type } = el.querySelector('source');

  // filename from src attribute
  const fileUrl = new URL(src);
  const fileName = fileUrl.pathname.substring(fileUrl.pathname.lastIndexOf('/') + 1);

  const downloadLink = document.createElement('a');
  downloadLink.innerText = 'Download Video';
  downloadLink.href = src;
  downloadLink.download = fileName;

  document.querySelector('body').appendChild(downloadLink);

  return { fileName, fileType: type.split('/')[1] };
});

await page.click(`[download="${fileName}"]`);

The above checks the page for a video and grabs the src attribute. I'm using a new instance of the URL object to cleanly get the pathname and remove any query variables. From that get the file name. Depending on your requirements this will definitely need to change on per basis use case (or maybe use the magic of regex).

After several attempts, the only way I could find to programmatically download the video was to create a link element and append it to the webpage.

Once I have all the elements in place I use puppeteer to click the newly created link. Because the link element has a download attribute the browser will automatically download the file rather than try to navigate to the link. It's a shame Puppeteer doesn't support the downloads API to make the code cleaner.

const res = await checkExistsWithTimeout(`/Users/dwhite/Downloads/${fileName}`, 30000);

await browser.close();

process.exit();

As there doesn't seem a way to check if the download as finished the above calls the below function and checks if the file exists. Hence the requirement for the fs and path modules. The file path will need changing for your system.

And depending on the size and file you may need to change the timeout. It's not the cleanest solution but does work. Happy for suggestions for a better solution.

function checkExistsWithTimeout(filePath, timeout) {
  return new Promise(function (resolve, reject) {
    var timer = setTimeout(function () {
      watcher.close();
      reject(new Error('File did not exists and was not created during the timeout.'));
    }, timeout);

    fs.access(filePath, fs.constants.R_OK, function (err) {
      if (!err) {
        clearTimeout(timer);
        watcher.close();
        resolve(`${filePath} exists`);
      }
    });

    var dir = path.dirname(filePath);
    var basename = path.basename(filePath);
    var watcher = fs.watch(dir, function (eventType, filename) {
      if (eventType === 'rename' && filename === basename) {
        clearTimeout(timer);
        watcher.close();
        resolve(`${filename} exists`);
      }
    });
  });
}

Photo courtesy of Sagar Dani on Unsplash

Next.js and AWS image demo - Part 3

Darren White — Fri, 08 Jan 2021 07:29:44 +0000

In this post we'll update the Next.js website to

do a GET request for the list of images (objects) from our S3 bucket via a AWS Lambda
for each image do a GET request for the presigned URL
update the Next.js Image component to use the pre-signed URL

Get server side props

In pages/index.js undernearth our Home function add:

export async function getServerSideProps() {}

Next.js as 2 main types of getting data fetching

getStaticProps - fetches data at build data resulting in basic HTML files
getServerSideProps - fetches data on each request

As the presigned URL will expire after 5 minutes we'll need to use getServerSideProps and fetch the data on each request.

Inside the getServerSideProps add a try catch, any errors will result in Next.js sending a 404 and showing the not found route.

try {
} catch (error) {
  return {
    notFound: true,
  };
}

Inside the try part of the try...catch we need to add an object for the options used in the fetch (to save repeating the options object). The API_KEY will be used to secure the API. At the end of the blog, we'll go back to our AWS services and add a check for the API key.

If doing the request client-side then we'd use CORs and add a origin check

try {
  const options = {
    headers: {
      'X-API-KEY': process.env.API_KEY,
    },
  };

  const imagesRes = await fetch('https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/images', options);
  const { data: imagesData } = await imagesRes.json();
} catch (error) {
  return {
    notFound: true,
  };
}

Underneath the options is our first fetch request with the passed in options with our API key. I've destructured the response and renamed the data property to avoid any name collisions later. The returned response will include the required Key for each image:

{
  "success": true,
  "data": [
    {
      "Key": "altanbagana-jargal-USCPvwqeO0U-unsplash.jpg",
      "LastModified": "2020-12-21T19:16:41.000Z",
      "ETag": "\"943f9736eb07dd0668006e0990af20df\"",
      "Size": 3377153,
      "StorageClass": "STANDARD"
    },
    {
      "Key": "daniel-j-schwarz-REjuIrs2YaM-unsplash.jpg",
      "LastModified": "2020-12-21T19:16:41.000Z",
      "ETag": "\"3988e5f9ba3c1118141dae396265054b\"",
      "Size": 2404910,
      "StorageClass": "STANDARD"
    }
  ]
}

After the last await, we need to set up an array which will hold the URL from the fetch request. Using a forEach loop over the returned data and push the URL plus Key to the array:

const images = [];
imagesData.forEach(({ Key }) =>
  images.push(`https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/signed-url?key=${Key}`),
);

Then loop over the URLs and set up an array with the fetch promise for each image. We'll use Promise.all to await these requests. The returned response will contain the presigned URL we'll need for the Next.js component.

const responses = await Promise.all(requests);

Now we need to extract the JSON from the returned responses. For that again I'll set up an array to store the data. Using a Promise.all we map over the responses pushing JSON data to our data array. As an aside it might be ok to use Promise.allSettled in case one of the requests fails. Obviously this is dependant on how important the requests are and if it is ok for one or more to fail.

const data = [];
await Promise.all(
  responses.map(async (r) => {
    const json = await r.json();

    data.push(json);
  }),
);

if (!data) {
  throw new Error('Data not found');
}

If succesful that data is returned via props to our index page

return {
  props: {
    data,
  }, // will be passed to the page component as props
};

The final getServerSideProps will look like the following:

export async function getServerSideProps() {
  try {
    const options = {
      headers: {
        'X-API-KEY': process.env.API_KEY,
      },
    };

    const imagesRes = await fetch('https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/images', options);
    const { data: imagesData } = await imagesRes.json();

    const images = [];
    imagesData.forEach(({ Key }) =>
      images.push(`https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/signed-url?key=${Key}`),
    );

    // map every url to the promise of the fetch
    const requests = images.map((url) => fetch(url, options));

    const responses = await Promise.all(requests);

    const data = [];
    await Promise.all(
      responses.map(async (r) => {
        const json = await r.json();

        data.push(json);
      }),
    );

    if (!data) {
      throw new Error('Data not found');
    }

    return {
      props: {
        data,
      }, // will be passed to the page component as props
    };
  } catch (error) {
    return {
      notFound: true,
    };
  }
}

Now in the Home function ensure the data from the props is being passed in:

export default function Home({ data }) {

Inside the main tag replace the image component:

<image src="/images/altanbagana-jargal-_eMbrsvO7jc-unsplash.jpg" width="{640}" height="{300}" />

With the following which outputs the Image component for each image. The image component will do its magic and output the srcset and relevant size and type.

{
  data.map((imgUrl) => <Image key={imgUrl} src={imgUrl} width={640} height={300} />);
}

If not already run npm run dev and go to http://localhost:3000/ to see your images.

CSS Grid

You can optionally add the following CSS to styles/Home.module.css (and remove any unused CSS) to add a nice grid to display the images:

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin-top: 3rem;
}

@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

Securing the API

The final thing to do is return to our AWS services, inside server/handler.js uncomment the following lines of code and re-deploy:

if (event.headers['X-API-KEY'] !== process.env.API_KEY) {
  return {
    statusCode: 403,
  };
}

Now the API is only accessible from a server using our API key. If you try to go to the API endpoints directly from, for example, a browser you'll get a 403 error.

Demo: https://dlw-nextjs-image-demo.vercel.app/
Repository: https://github.com/dwhiteGUK/dlw-nextjs-image-demo

To recap here is the full series

Part 1: https://darrenwhite.dev/blog/nextjs-aws-image-demo-part-1
Part 2: https://darrenwhite.dev/blog/nextjs-aws-image-demo-part-2
Part 3 (final): https://darrenwhite.dev/blog/nextjs-aws-image-demo-part-3

Next.js and AWS image demo - Part 2

Darren White — Sat, 02 Jan 2021 14:23:19 +0000

As this post is getting pretty long I'll now add a part 3 updating the website to use the AWS services setup here. On that note, if you haven't already read part 1 for the website set up as I will refer back to that post.

For the second part, I'll set up the required services in AWS.

S3 Bucket for storing the images
Lambda function for retrieving the images
API Gateway endpoint (added automatically) to access the lambda function

For the API endpoint and bucket setup, I'll be using the Serverless framework.

The services setup here could be used with any front end framework. I've just chosed to use React/Next.Js.

Serverless setup

First, add a server folder in the root of the project

mkdir server && cd server

Then run the serverless setup command

serverless

Serverless will guide you through the options

Serverless: No project detected. Do you want to create a new one? Yes
Serverless: What do you want to make? AWS Node.js
Serverless: What do you want to call this project? dlw-nextjs-image-demo

Project successfully created in 'dlw-nextjs-image-demo' folder.

You can monitor, troubleshoot, and test your new service with a free Serverless account.

Serverless: Would you like to enable this? No
You can run the “serverless” command again if you change your mind later.

Serverless: Would you like the Framework to update automatically? Yes

Auto updates were succesfully turned on.
You may turn off at any time with "serverless config --no-autoupdate"

When complete, there will be a serverless.yml in the server directory. By default, the file contains various services with example configuration code commented out. You can remove all the commented out code as I'll walk you through adding the code for each service. You should be left with similar to the following:

service: dlw-nextjs-aws-image-demo
# app and org for use with dashboard.serverless.com
#app: your-app-name
#org: your-org-name

# You can pin your service to only deploy with a specific Serverless version
# Check out our docs for more details
frameworkVersion: '2'

provider:
  name: aws
  runtime: nodejs12.x

functions:
  hello:
    handler: handler.hello

The following is optional, however to begin add a stage and region under the runtime:

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: eu-west-2

The stage will be used as part of our bucket name and as I'm based in the UK I use either London or Ireland. In this instance I've opted for London.

S3 bucket

To set up the S3 bucket I like to add a custom property which I can reference via a variable. Underneath framework version add the following:

custom:
  upload: blog-nextjs-image-demo

We then need to add the necessary permission using IAM. Under region add the following iamRoleStatements:

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: eu-west-2

  iamRoleStatements:
    - Effect: Allow
      Action:
        - s3:ListBucket
      Resource: "arn:aws:s3:::${opt:stage, self:provider.stage, 'dev'}-${self:custom.upload}"
    - Effect: Allow
      Action:
        - s3:GetObject
      Resource: "arn:aws:s3:::${opt:stage, self:provider.stage, 'dev'}-${self:custom.upload}/*"

The indentation is important, the iamRoleStatments indentation needs to match the region. The iamRoleStatements setup tells AWS which action is allowed for the specified resource. See below for an explanation

Now add the following resource at the end of the serverless.yml:

resources:
  Resources:
    S3BucketOutputs:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: "${opt:stage, self:provider.stage, 'dev'}-${self:custom.upload}"

The bucket name will be determined by the variables supplied. ${opt:stage, self:provider.stage, 'dev'} is determined by the flags set when deploying, for example, if I run sls deploy --stage prod then self:provider.stage is prod, if no flag is supplied then the second parameter is used.

${self:custom.upload} is taken from our custom property supplied. For the demo, I don't supply a flag resulting in a bucket name of dev-blog-nextjs-image-demo

That's it for our S3 bucket, to deploy, run the following command:

sls deploy

Jump over to the AWS console to see the deployed bucket: https://s3.console.aws.amazon.com/s3/

AWS Lambda

We now need to add a couple of Lambda functions to retrieve the images to display on the website. For this we'll need a couple of plugins, underneath framework: "2" add the following:

plugins:
  - serverless-bundle # Package our functions with Webpack
  - serverless-dotenv-plugin

And then install the plugins

npm i serverless-bundle serverless-pseudo-parameters serverless-dotenv-plugin

serverless-bundle allows me to write ES2015 (and newer) JS syntax, in particular module export/imports which are then bundled appropriately for AWS Lambda. serverless-dotenv-plugin allows us to pull in variables stored in a .env file which.

Presigned URL

In order to keep our bucket private, I am going to use a presigned URL. The presigned URL allows temporary public access to our object in the bucket. However I don't want anybody with the presigned URL to be able to access our objects, therefore, I'll add an API Key to secure the API endpoint. For this under custom add a dotenv property

custom:
  upload: blog-nextjs-image-demo
  dotenv:
    path: ../.env

And add a .env file in the root of the project. In the file add the following key replacing your_api_key with something more secure:

API_KEY=your_api_key

Now we can finally write our function. Replace the following

functions:
  hello:
    handler: handler.hello

with our function code.

functions:
  signedUrl:
    handler: handler.signedUrl
    events:
      - http:
          path: signed-url
          method: get
          cors: true

Our handler function will be called signedURL, we'll be using a get request to the path signed-url from the website. I specify CORs to allow cross origin resource sharing, however as I'm using Next.js and will be using a getServerSideProps the request won't be coming from the client's browser, therefore, Cors isn't an issue. For client-side only websites, cors will be required.

Now open handler.js and remove all the example code. Add an import to the AWS SDK

import { S3 } from 'aws-sdk';

I'm using object destructuring to pull in the S3 object from the aws-sdk as that is all I need. Add a reference to our bucket name which we'll get from the process environment variables in node.

const Bucket = process.env.BUCKET_NAME;

For the handler function add

export const signedUrl = async (event) => {
  // if (event.headers['X-API-KEY'] !== process.env.API_KEY) {
  //   return {
  //     statusCode: 403
  //   };
  // }

  const { key } = event.queryStringParameters;
  const s3 = new S3({});
  const presignedGetUrl = await s3.getSignedUrl('getObject', {
    Bucket,
    Key: key,
    Expires: 60 * 5 // time to expire in seconds 5
  });

  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": 'http://localhost:3000',
      "Access-Control-Allow-Headers": "*",
      "Access-Control-Allow-Methods": "*",
      "Access-Control-Allow-Credentials": true,
    },
    body: JSON.stringify(presignedGetUrl),
  };
};

For now I've commented out the API key check to allow us to test without being locked out. First with get the image key from the query sting parameters:

const { key } = event.queryStringParameters;

We then instantiate a new S3 object which is used to generate the presigned URL:

const presignedGetUrl = await s3.getSignedUrl('getObject', {
    Bucket,
    Key: key,
    Expires: 60 * 5 // time to expire in seconds 5
  });

In the options object, I pass in the name of the bucket, the image key and the length of time until the key expires - currently, I've set it to 5 minutes, however in a production application I'd reduce that significantly.

Now we can re-deploy to AWS. A quick tip if you haven't updated the serverless.yml file you can add the -f flag to the command and the name of the function specified in the serverless.yml for a much quicker deployment

sls deploy -f signedUrl

In a browser/Postman (or equivalent) you can do a GET request to the API gateway URL that calls our AWS Lambda adding the image key onto the end. For example https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/signed-url?key=daniel-j-schwarz-REjuIrs2YaM-unsplash.jpg. The responding URL can be copied and pasted in a browser to see the image.

If you're not sure of the URL then you can type sls info in the terminal to get your service informarion

Service Information
service: demo-delete
stage: dev
region: eu-west-2
stack: demo-delete-dev
resources: 13
api keys:
  None
endpoints:
  GET - https://y32f66o0ol.execute-api.eu-west-2.amazonaws.com/dev/signed-url
functions:
  signedUrl: demo-delete-dev-signedUrl
layers:
  None

The image key is one of the images, you uploaded in part 1. To confirm you can go to your bucket in Amazon S3 (https://s3.console.aws.amazon.com/s3).

Get All Images

We've actually done the functions in the opposite way we'll call them from the website. To display the images with the presigned URLs, we'll need to get the list from our S3 bucket.

Back to the serverless.yml underneath functions add

functions:
  images:
    handler: handler.images
    environment:
      BUCKET_NAME: ${opt:stage, self:provider.stage, 'dev'}-${self:custom.upload}
    events:
      - http:
          path: images
          method: get
          cors: true

Again the bucket name is determined by the variables supplied. We have a path to our API endpoint and the method used to invoke the request.

In handler.js add

export const images = async (event) => {

  // if (event.headers['X-API-KEY'] !== process.env.API_KEY) {
  //   return {
  //     statusCode: 403
  //   };
  // }

  const data = await getAll();

  return {
    statusCode: 200,
    body: JSON.stringify(data),
  };
};

The S3 listObjectsV2 method requires a callback function therefore in the above I've called a separate function called getAll which returns a promise. If successful the handle returns a status code of 200 and stringifies the data.

In a production app, we need to catch any errors and return the necessary HTTP status code and error.

Above the previous function add

const getAll = async () => {
  const s3 = new S3({});
  const params = {
    Bucket
  };

  return new Promise((resolve) => {
    s3.listObjectsV2(params, (err, data) => {
      if (err) {
        return resolve({ error: true, message: err });
      }

      return resolve({
        success: true,
        data: data.Contents,
      });
    });
  });
};

As before we instatiate a S3 object and setup some parameters

  const s3 = new S3({});
  const params = {
    Bucket
  };

As mentioned the listObjectsV2 method requires a callback. I've used an anonymous function which I've wrapped in a promise

  return new Promise((resolve) => {
    s3.listObjectsV2(params, (err, data) => {
      if (err) {
        return resolve({ error: true, message: err });
      }

      return resolve({
        success: true,
        data: data.Contents,
      });
    });
  });

If data is returned then the promise is resolved succesully passing the Content property from the data object.

Deploy the function sls deploy and run the API gateway URL. The returned response should look something similar to the following:

{
  "success": true,
  "data": [
    {
      "Key": "altanbagana-jargal-USCPvwqeO0U-unsplash.jpg",
      "LastModified": "2020-12-21T19:16:41.000Z",
      "ETag": "\"943f9736eb07dd0668006e0990af20df\"",
      "Size": 3377153,
      "StorageClass": "STANDARD"
    },
    {
      "Key": "daniel-j-schwarz-REjuIrs2YaM-unsplash.jpg",
      "LastModified": "2020-12-21T19:16:41.000Z",
      "ETag": "\"3988e5f9ba3c1118141dae396265054b\"",
      "Size": 2404910,
      "StorageClass": "STANDARD"
    }
  ]
}

We now have everything in place to update our website to get the images dynamically.

In the next part we'll update the Next.js website to call our AWS services and secure our API with a key.

Demo: https://dlw-nextjs-image-demo.vercel.app/
Repository: https://github.com/dwhiteGUK/dlw-nextjs-image-demo
Part 1: https://darrenwhite.dev/blog/nextjs-aws-image-demo-part-1