test: Adding E2E tests for authentication with Playwright.

Author: LuchoTurtle

.env.local-example

@@ -1,4 +1,6 @@
 AUTH_SECRET=
 
 AUTH_GITHUB_ID=
-AUTH_GITHUB_SECRET=
+AUTH_GITHUB_SECRET=
+
+TEST_PASSWORD=

auth.ts

@@ -2,6 +2,8 @@ import GitHub from "next-auth/providers/github";
 import NextAuth, { type DefaultSession } from "next-auth";
 import {  DefaultJWT } from "next-auth/jwt";
 import { AdapterSession } from 'next-auth/adapters';
+import { Provider } from "next-auth/providers";
+import Credentials from "next-auth/providers/credentials";
 
 // We need to add the role to the JWT inside `NextAuth` below, so the `middleware.ts` can have access to it.
 // The problem is that it wasn't added this `role` custom field, even if we defined it in `auth.ts`.
@@ -43,23 +45,52 @@ declare module "next-auth/jwt" {
 
 // ----------
 
-export const { handlers, signIn, signOut, auth } = NextAuth({
-  providers: [
-    GitHub({
-      profile(profile) {
-        // GitHub's OAuth apps don't allow you to define roles.
-        // So `profile` here doesn't have a `role` property.
-        // But on other providers, you'd add the role here through it.
-        return {
-          id: profile.id.toString(),
-          name: profile.name ?? profile.login,
-          email: profile.email,
-          image: profile.avatar_url,
-          role: "user",
-        };
+// OAuth providers to sign-in
+const providers: Provider[] = [
+  GitHub({
+    profile(profile) {
+      // GitHub's OAuth apps don't allow you to define roles.
+      // So `profile` here doesn't have a `role` property.
+      // But on other providers, you'd add the role here through it.
+      return {
+        id: profile.id.toString(),
+        name: profile.name ?? profile.login,
+        email: profile.email,
+        image: profile.avatar_url,
+        role: "user",
+      };
+    },
+  }),
+]
+
+// Be sure to not put a development version in production!
+// See https://authjs.dev/guides/testing#credentials-provider-in-development.
+if (process.env.NODE_ENV === "development") {
+  providers.push(
+    Credentials({
+      id: "password",
+      name: "Password",
+      credentials: {
+        password: { label: "Password", type: "password" },
+      },
+      authorize: (credentials) => {
+        if (credentials.password === process.env.TEST_PASSWORD) {
+          return {
+            email: "[email protected]",
+            name: "Bob Alice",
+            image: "",
+          }
+        }
+        return null
       },
-    }),
-  ],
+    })
+  )
+}
+
+
+// The important part: where the `NextAuth` config is exported
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: providers,
   callbacks: {
     jwt({ token, user, account, profile }) {
       // Normally, it would be like this

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@playwright/test": "^1.44.1",
     "@types/node": "20.14.5",
+    "dotenv": "^16.4.5",
     "fast-glob": "^3.3.2",
     "monocart-reporter": "^2.5.0",
     "open-cli": "^8.0.0",

playwright.config.ts

@@ -6,8 +6,9 @@ import { getMonocartReporterOptions } from "./playwright.monocart-reporter";
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from 'dotenv';
+dotenv.config({ path: "./.env.local" });
+
 
 const _testResultsDir = path.resolve("./e2e-test-results");
 const _codeCoverageDir = path.resolve(_testResultsDir, "code-coverage");

pnpm-lock.yaml

@@ -0,0 +1,55 @@
+// !! PLEASE READ !!
+/* 
+Coverage for E2E effectively works, but the coverage is not using the sourcemaps properly, so coverage doesn't mean much.
+We've decided to leave the infrastructure (coverage uses `monocart`) with its configuration for posteriority in case we need them.
+E2E testing is more relevant knowing **if they pass or not**.
+*/
+
+import { test, expect } from "../_shared/app-fixtures"; // we use the overriden functions to get coverage
+
+const BASE_URL = "http://localhost:3000"
+
+test.describe("homepage", () => {
+  test("is mounted", async ({ page }) => {
+    await page.goto("/");
+
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/Welcome to Nextra Documentation/);
+  });
+});
+
+test("Basic auth", async ({ page, browser }) => {
+  if (!process.env.TEST_PASSWORD) throw new TypeError("Missing TEST_PASSWORD");
+
+  await test.step("should login", async () => {
+    await page.goto(`${BASE_URL}/api/auth/signin`);
+    await page.getByLabel("Password").fill(process.env.TEST_PASSWORD ?? "");
+    await page.getByRole("button", { name: "Sign in with Password" }).click();
+    await page.waitForURL(`${BASE_URL}`);
+
+    const sessionResponse = await page.goto(
+      `${BASE_URL}/api/auth/session`
+    )
+    const session = await sessionResponse?.json() ?? {}
+    expect(session.user.email).toEqual("[email protected]")
+    expect(session.user.name).toEqual("Bob Alice")
+    expect(session.user.image).toEqual("")
+  });
+
+  await test.step("should logout", async () => {
+    // Move to the homepage to log out
+    await page.goto("/");
+
+    await page.getByText("SIGN OUT").click();
+    expect(page.url()).toBe(`${BASE_URL}/`)
+
+    await page.waitForURL(`${BASE_URL}`)
+    await page.waitForTimeout(1000); // wait for sign out to persist in IDP
+
+    const sessionResponse = await page.goto(
+      `${BASE_URL}/api/auth/session`
+    )
+    const session = await sessionResponse?.json()
+    expect(session).toBe(null)
+  });
+});