NextAuth Cypress Example

This is an example app for demonstrating how to execute Cypress end-to-end tests against a web app that is secured with NextAuth using the JWT session strategy. Refer to the Speed Up Cypress Testing of NextAuth Secured Web Apps for detailed information on how to setup Cypress for your own NextAuth secured web app.

Acknowledgments

This example project is based on the react-note-taking-app built on top of the T3 Stack.

Also, the following projects also heavily influenced this example app:

• cypress-realworld-app
• vitest-environment-prisma

Prerequisites

• Node.js 16.14.2+ LTS

Developer Quickstart Guide

The following sections covers how to get a functioning development environment running.

Create a Node.js Environment

$ npm install

Configure Environment Variables

Create an environment file .env (.env.example template provided) at the root of the repo directory and add the following environment variables:

Environ Variable Name	Default Value	Description
NEXTAUTH_URL	http://localhost:3000	General next-auth configuration.
NEXTAUTH_SECRET		General next-auth configuration.
DATABASE_URL	file:./db.sqlite	Prisma configuration.
DISCORD_CLIENT_ID		Configure NextAuth to use Discord.
DISCORD_CLIENT_SECRET		Configure NextAuth to use Discord.

Development Scripts

Setup the SQLite database:

$ npm run reset-seed

Start the dev server by running the script:

$ npm run dev

Build and run the Next.js server locally:

$ npm run build
$ npm run start

Unit Testing

A pre-requisite for running the included unit tests is to create a .env.test file in the root directory with the DATABASE_NAME variable set. An example .env.test.example file has been provided that you can simply copy and rename.

Execute unit tests by running the script:

$ npm run test-unit-ci