Overview

Now that we have deployed our app with Vercel, in this post we will set up our database and authentication. Let's jump right in!

For this project we are using https://authjs.dev/ for authentication. In order to set this up we will need configure our database so we have a place to store the verification tokens. Once our database is set up, we will make use of the Nodemailer provider to send emails with “magic links”. This login mechanism starts by the user providing their email address at the login form. Then a Verification Token is sent to the provided email address. The user then has 24 hours to click the link in the email body to “consume” that token and register their account, otherwise the verification token will expire and they will have to request a new one.

Packages and Environment Variables:

For our database we will be using postgres with a graphql layer built with Prisma. AuthJS provides a list of what they call adapters that we can use to define schemas for authentication and session management. We'll be using the Prisma adapter for this project.

Ok now we can start by installing the following packages.

pnpm add @prisma/client @auth/prisma-adapter

Then follow that up with:

pnpm add prisma --save-dev

Next install the AuthJS package with:

pnpm add next-auth@beta

Auth.js does not include Nodemailer as a dependency, so we'll need to install it to use the Nodemailer provider.

pnpm add nodemailer

Now we'll need to set up the environment variable to establish a connection with your database and retrieve data. Let's create an file named .env to save our variables.

Add this file to your .gitignore file, by default our app is only ignoring local env files. Also since Prisma doesn’t support .env.local syntax, we must use .env even when working locally.

We don't need our sensitive app variables to get exposed on our github repository. Here's an example of what my file looks like:

POSTGRES_PRISMA_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA

Fill in the POSTGRES_PRISMA_URL value with the correct details to your database. If you're not sure how to set up a local PostgreSQL database, you can go download PostgreSQL from https://www.postgresql.org/ in order to run a PostgreSQL server. Then you can create local databases that can get us up and running. I like to use the Postico app to create and manage databases, you can download it at https://eggerapps.at/postico2/. Once you have those apps running you can create a database and update your POSTGRES_PRISMA_URL variable to point to the local database that was created. For example my new url looks like:

POSTGRES_PRISMA_URL="postgres://postgres:postgres@localhost:5432/nextjs-starter-blog?schema=public"

Another environment variable that is mandatory is the AUTH_SECRET. This is a random value used by AuthJS to encrypt tokens and email verification hashes. We can generate a secret by running:

npx auth secret

This wlll generate variable with the token value in the .env.local file. Copy this over to our .env file and you can delete .env.local since we don't use it. Our .env file should look something like this so far.

POSTGRES_PRISMA_URL="postgres://postgres:postgres@localhost:5432/nextjs-starter-blog?schema=public"
AUTH_SECRET="**********************"

Prisma Configuration:

Next we can set up the Prisma instance to ensure only one instance is created throughout the project and then import it from any file as needed. This approach avoids recreating instances of PrismaClient every time it is used. Let's do this by creating a file at lib/prisma.ts. Here is the code for ensuring we there is only one instance of PrismaClient in the application.

import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }

  prisma = global.prisma;
}

export default prisma;

In the root of our project we will create an auth.ts file we can import the Prisma instance. Here we also configure our providers starting with Nodemailer. Nodemailer is configured to use some more environment variables so lets talk about what those do. In order to set up emails from the app we need to tell Nodemailer where to connect and send the emails. To get this working locally, we are going to use a tool called Mail Trap to send emails from our local environment. Once you set up an account, it's free, you'll have access to the credentials we need to send and receive emails.

import NextAuth from "next-auth";
import { Provider } from "next-auth/providers";
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "./lib/prisma";
import Nodemailer from "next-auth/providers/nodemailer";

const providers: Provider[] = [
  Nodemailer({
    server: {
      host: process.env.EMAIL_SERVER_HOST_DEV,
      port: Number(process.env.EMAIL_SERVER_PORT_DEV),
      secure: process.env.EMAIL_SMTP_SECURE_DEV === "true",
      auth: {
        user: process.env.EMAIL_SERVER_USER_DEV,
        pass: process.env.EMAIL_SERVER_PASSWORD_DEV,
      },
    },
    from: process.env.APP_EMAIL_CONTACT,
  }),
];

export const providerMap = providers.map((provider) => {
  if (typeof provider === "function") {
    const providerData = provider();
    return { id: providerData.id, name: providerData.name };
  } else {
    return { id: provider.id, name: provider.name };
  }
});

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers,
});

Update your environment variables to the values provided by mail trap. Our updated environment variables file will look something like:

POSTGRES_PRISMA_URL="postgres://postgres:postgres@localhost:5432/nextjs-starter-blog?schema=public"
AUTH_SECRET="**********************"

EMAIL_SERVER_USER_DEV=********
EMAIL_SERVER_HOST_DEV=sandbox.smtp.mailtrap.io
EMAIL_SERVER_PORT_DEV=465
EMAIL_SERVER_PASSWORD_DEV=********
EMAIL_SMTP_SECURE_DEV=false

Create a schema file at prisma/schema.prisma with the following models.

generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "postgresql"
    url      = env("POSTGRES_PRISMA_URL")
}

enum Permission {
    ADMIN
    USER
}

model Account {
    id                 String  @id @default(cuid())
    userId             String  @map("user_id")
    type               String
    provider           String
    providerAccountId  String  @map("provider_account_id")
    refresh_token      String?
    access_token       String?
    expires_at         Int?
    token_type         String?
    scope              String?
    id_token           String?
    session_state      String?
    oauth_token_secret String?
    oauth_token        String?
    user               User    @relation(fields: [userId], references: [id], onDelete: Cascade)

    @@unique([provider, providerAccountId])
    @@map("accounts")
}

model Session {
    id           String   @id @default(cuid())
    sessionToken String   @unique @map("session_token")
    userId       String   @map("user_id")
    expires      DateTime
    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
    createdAt    DateTime @default(now()) @map("created_at")
    updatedAt    DateTime @default(now()) @updatedAt @map("updated_at")

    @@map("sessions")
}

model User {
    id                    String       @id @default(cuid())
    email                 String?      @unique
    emailVerified         DateTime?    @map("email_verified")
    createdAt             DateTime     @default(now()) @map(name: "created_at")
    updatedAt             DateTime     @updatedAt @map(name: "updated_at")
    accounts              Account[]
    sessions              Session[]
    permissions           Permission[] @default(value: [USER])

    @@map(name: "users")
}

model VerificationToken {
    identifier String
    token      String   @unique
    expires    DateTime

    @@unique([identifier, token])
    @@map("verificationtokens")
}

Now we need to apply the schema to the database and generate the Prisma client by running to following command:

pnpm exec prisma migrate dev

I hit enter when asked to name a migration to allow default names to be applied to migrations and if successful, you'll see something similar to my screenshot. When you’re working on your app and making changes to your database schema, we need to run the migrate command again every time. We do this to allow Prisma to generate a migration file and apply it to the underlying database.

We also want to regenerate the Prisma client in the project with the latest types and model methods. I like this setup is because we can use these types in our app, so when working with Users for example, we already have the User type available for importing into our components.

Testing Authentication

To finish up configuration, lets add the route handler at the following directory:

/app/api/auth/[...nextauth]/route.ts.

Now add this code to the route.ts file:

import { handlers } from "@/auth" // Referring to the auth.ts we just created

export const { GET, POST } = handlers

Well shit that was quite a process! If you are still with me, the final parts are to update our app and test the authentication flow. I'll start by updating our app UI to display the login button and display the logged in user information once we get sent the "magic link" to login.

Let's create our fist app component for authentication at /components/auth/SignIn.tsx. In this component we simply check the session status and if the session does not have a user, we display a log in button. If we don't have a user we display the session email along with a log out button within a form element. Notice that since we are in a server rendered component, we are using a form action to call the signOut function.

import { auth, signIn, signOut } from "@/auth";

export default async function SignIn() {
  const session = await auth();

  return (
    <div className="md:flex md:justify-end text-sm lg:text-base">
      {!session?.user ? (
        <form
          action={async () => {
            "use server";
            await signIn();
          }}
        >
          <button type="submit">Sign In</button>
        </form>
      ) : (
        <form
          action={async () => {
            "use server";
            await signOut({ redirectTo: "/" });
          }}
        >
          <div className="flex flex-1 gap-4 justify-evenly">
            <p>Logged in as {session.user.email}</p>
            <button type="submit">Log Out</button>
          </div>
        </form>
      )}
    </div>
  );
}

Finally we import the newly created component into our page.tsx file. We can remove the default code and simply render out component instead, here is my page.tsx file.

import SignIn from "@/components/auth/SignIn";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <SignIn />
    </main>
  );
}

Now that we have everything installed and configured, let's run our app and test out the authentication we just set up. Next up let's connect a domain and configure our production database. We'll also begin to apply some design styles to our app.