NextAuth.js Intro [2 of 3]: Magic Link Email Authentication

(This is the second article in a series on next-auth. Check out the first article for background: One-Click Signup in Next.js With next-auth)

From our previous article in this series, we know that one-click signup / sign in with next-auth using Google, GitHub, Facebook, or any other provider is pretty easy. Another way many apps like to allow people to sign in easily is via use of a “magic link.” The user will enter their email address and receive an email with a link they can click to login to the app.

As you may have guessed, that’s pretty easy with next-auth too 😉 Here’s how to do it.

Source can be found in this branch at GitHub.

Create and structure a database

Database integration is required for email auth in next-auth currently, so we need to get this running first.

First we need a database. PostgresSQL is our default relational DB choice at Echobind, so that’s what we’ll use for this example. I use Postgres.app for Postgres on localhost, and often start with a Heroku Postgres DB on the Hobby plan for the deployed version of small projects like this.

Connect to your database using psql or a client like Postico.

First create a database:

CREATE DATABASE "next-auth-example"

The database needs some structure to hold user information in it, which next-auth provides on their website. Run these CREATE TABLE statements and that'll do the trick.

CREATE TABLE accounts
  (
    id                   SERIAL,
    compound_id          VARCHAR(255) NOT NULL,
    user_id              INTEGER NOT NULL,
    provider_type        VARCHAR(255) NOT NULL,
    provider_id          VARCHAR(255) NOT NULL,
    provider_account_id  VARCHAR(255) NOT NULL,
    refresh_token        TEXT,
    access_token         TEXT,
    access_token_expires TIMESTAMPTZ,
    created_at           TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at           TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );
CREATE TABLE sessions
  (
    id            SERIAL,
    user_id       INTEGER NOT NULL,
    expires       TIMESTAMPTZ NOT NULL,
    session_token VARCHAR(255) NOT NULL,
    access_token  VARCHAR(255) NOT NULL,
    created_at    TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at    TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );
CREATE TABLE users
  (
    id             SERIAL,
    name           VARCHAR(255),
    email          VARCHAR(255),
    email_verified TIMESTAMPTZ,
    image          TEXT,
    created_at     TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at     TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );
CREATE TABLE verification_requests
  (
    id         SERIAL,
    identifier VARCHAR(255) NOT NULL,
    token      VARCHAR(255) NOT NULL,
    expires    TIMESTAMPTZ NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
  );
CREATE UNIQUE INDEX compound_id
  ON accounts(compound_id);
CREATE INDEX provider_account_id
  ON accounts(provider_account_id);
CREATE INDEX provider_id
  ON accounts(provider_id);
CREATE INDEX user_id
  ON accounts(user_id);
CREATE UNIQUE INDEX session_token
  ON sessions(session_token);
CREATE UNIQUE INDEX access_token
  ON sessions(access_token);
CREATE UNIQUE INDEX email
  ON users(email);
CREATE UNIQUE INDEX token
  ON verification_requests(token);

Connect database and enable email provider in next-auth

Next we need to add the database adapter to our repo.

yarn add pg

or npm install --save pg

Add the connection string to your .env file, so next-auth knows where to look for it.

DATABASE_URL="postgres://my-root-user:my-root-pass@localhost:5432/next-auth-example?schema=public" 

Then uncomment this line in pages/api/auth/[...nextauth].js so that next-auth? knows where the database is:

database: process.env.DATABASE_URL, 

Now we tell next-auth that we want to use email for authentication in that same file. In the array of providers, add:

Providers.Email({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),

Set default theme

In next-auth 3.2, you’re able to set your sign in pages to use a light or dark theme, or to use the system theme (which is the default). The only quirk with this is that if your system is set to a dark theme, the background of the sign in page will be dark but so will the text, rendering it invisible!

As an easy remedy, I set the theme to light . in pages/api/auth/[...nextauth].js :

const options = {
  theme: 'light',
  // ... other options
};

Connect an email provider

Create an account with an email service so that your app can send emails out transactionally. My default is usually SendGrid, but there are tons of others. With any provider you’ll have to create an account, verify an email address to send from, and get the SMTP credentials from your account.

Once you have those credentials, you can add them to your .env file. My SendGrid configuration looks like this:

EMAIL_SERVER=smtp://apikey:BIG-LONG_CRYPTIC_STRING:587
EMAIL_FROM=your-verified-sending-email@yourdomain.com

There are different ways you can specify this configuration as well, see the docs.

Restart and test

Restart your local server for the settings to take effect, visit your sign in screen and log in with an email address. You should receive an email containing a sign-in link.

Clicking that link will take you to the landing page. You are now signed in. 🎉

One thing to note is that when logging in with email, we don’t have any other information about the user automatically, so their name in the screenshot above is blank since it doesn’t exist. A small conditional will change that.

In pages/index.js we just update our conditional:

{session && session.user && session.user.name && (
  <h3>Logged in as {session.user.name}</h3>
)} 

And now the text makes a lot more sense.

So far we’ve got two methods for logging in fast, and easily in Next.js using next-auth. Later in this series we'll explore what you can do with user information now that the user is logged in.