chore(next-auth): fix e2e tests (#11737)

* chore: e2e

* chore: e2e optimize

* chore: e2e optimize

* Update NavBar.tsx

* attempt to fix e2e

* Update turbo.json

* Update release.yml

* tweak

* Update get-session.mdx

* skip caching

* tweak

* Update release.yml

* Update release.yml

* Update turbo.json

* Update release.yml

* Update release.yml

* Update release.yml

* Update auth.config.ts

* fix: cleanup release.yml and turbo.json passThroughEnv

* fix: enable Keycloak

* fix: bump next and react deps + turbo config tweaks

* fix: rm prisma and config split from next dev app

* fix: rm prisma and config split from next dev app

* add debug

* tweak config

* tweak config

* revert

* add env back

* change dev command location

* change dev command location

* Update playwright.config.ts

* fix: reorganise e2e tests a bit

* fix: pnpm-lock.yaml

* Update playwright.config.ts

* Update package.json

* Update keycloak.spec.ts

* skip test

* test optimize

* test env

* Update turbo.json

* rearrange tests

* env

* tweak commands

* Revert "tweak commands"

This reverts commit 8855517.

---------

Co-authored-by: Balázs Orbán <[email protected]>
Co-authored-by: ndom91 <[email protected]>

Author: 3 people

.github/workflows/release.yml

@@ -113,40 +113,18 @@ jobs:
       - name: Run unit tests
         if: ${{ env.PACKAGES_CHANGES == 'true' || github.ref == 'refs/heads/main' }}
         run: pnpm test
-      - name: Get installed Playwright version
-        id: playwright-version
-        run: echo "PLAYWRIGHT_VERSION=$(pnpx playwright -V | awk '{ print $2 }')" >> $GITHUB_ENV
-      - name: Cache playwright binaries
-        uses: actions/cache@v4
-        id: playwright-cache
-        with:
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
       - name: Install Playwright
-        if: steps.playwright-cache.outputs.cache-hit != 'true' && github.repository == 'nextauthjs/next-auth'
-        run: |
-          pnpm exec playwright install --with-deps chromium
+        if: github.repository == 'nextauthjs/next-auth'
+        run: pnpm exec playwright install --with-deps chromium
       - name: Run E2E tests (Nextjs-Docker)
         continue-on-error: true
         if: false
         timeout-minutes: 15
-        run: |
-          cd apps/examples/nextjs-docker && pnpm test:docker
-        env:
-          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
-          TEST_KEYCLOAK_USERNAME: ${{ secrets.TEST_KEYCLOAK_USERNAME }}
-          TEST_KEYCLOAK_PASSWORD: ${{ secrets.TEST_KEYCLOAK_PASSWORD }}
-          AUTH_KEYCLOAK_ID: ${{ secrets.AUTH_KEYCLOAK_ID }}
-          AUTH_KEYCLOAK_SECRET: ${{ secrets.AUTH_KEYCLOAK_SECRET }}
-          AUTH_KEYCLOAK_ISSUER: ${{ secrets.AUTH_KEYCLOAK_ISSUER }}
-          AUTH_TRUST_HOST: 1
+        run: cd apps/examples/nextjs-docker && pnpm test:docker
       - name: Run E2E tests
         continue-on-error: true # TODO: Make this less flakey
         if: github.repository == 'nextauthjs/next-auth'
         timeout-minutes: 15
-        run: |
-          pnpm test:e2e
         env:
           AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
           TEST_KEYCLOAK_USERNAME: ${{ secrets.TEST_KEYCLOAK_USERNAME }}
@@ -155,11 +133,13 @@ jobs:
           AUTH_KEYCLOAK_SECRET: ${{ secrets.AUTH_KEYCLOAK_SECRET }}
           AUTH_KEYCLOAK_ISSUER: ${{ secrets.AUTH_KEYCLOAK_ISSUER }}
           AUTH_TRUST_HOST: 1
+          DEBUG: "pw:webserver"
+        run: pnpm test:e2e
       - uses: actions/upload-artifact@v4
         name: Upload Playwright artifacts
         with:
           name: playwright-traces
-          path: "**/packages/utils/test-results/*/trace.zip"
+          path: "**/packages/next-auth/test-results/*/trace.zip"
           retention-days: 7
       - uses: codecov/codecov-action@v4
         if: always()

apps/dev/nextjs/auth.config.ts

@@ -1,5 +1,8 @@
 import NextAuth from "next-auth"
-import authConfig from "auth.config"
+import type { NextAuthConfig } from "next-auth"
+import Credentials from "next-auth/providers/credentials"
+import Keycloak from "next-auth/providers/keycloak"
+
 // import { PrismaClient } from "@prisma/client"
 // import { PrismaAdapter } from "@auth/prisma-adapter"
 // import SendGrid from "next-auth/providers/sendgrid"
@@ -33,8 +36,44 @@ import authConfig from "auth.config"
 //   }
 // )
 
+declare module "next-auth" {
+  /**
+   * Returned by `useSession`, `getSession`, `auth` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user: {
+      /** The user's postal address. */
+      address: string
+    } & User
+  }
+
+  interface User {
+    foo?: string
+  }
+}
+
 export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
-  // adapter: PrismaAdapter(globalThis.prisma),
+  debug: true,
+  providers: [
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      authorize(c) {
+        if (c.password !== "password") return null
+        return {
+          id: "test",
+          name: "Test User",
+          email: "[email protected]",
+        }
+      },
+    }),
+    Keycloak,
+  ],
+  callbacks: {
+    jwt({ token, trigger, session }) {
+      if (trigger === "update") token.name = session.user.name
+      return token
+    },
+  },
+  basePath: "/auth",
   session: { strategy: "jwt" },
-  ...authConfig,
 })

apps/dev/nextjs/auth.ts

@@ -1,29 +1,23 @@
 {
   "name": "next-auth-app",
-  "version": "1.0.0",
-  "description": "Next.js + Auth.js Developer app",
+  "version": "1.0.1",
+  "description": "Next.js + Auth.js Developer App",
   "private": true,
   "scripts": {
     "clean": "rm -rf .next",
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "e2e": "pnpm dlx playwright test"
+    "start": "next start"
   },
   "license": "ISC",
   "dependencies": {
-    "@auth/prisma-adapter": "workspace:*",
-    "@prisma/client": "^5",
-    "next": "15.0.0-rc.0",
+    "next": "15.0.0-canary.144",
     "next-auth": "workspace:*",
-    "nodemailer": "^6.9.3",
-    "react": "19.0.0-rc-4c2e457c7c-20240522",
-    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
+    "react": "19.0.0-rc-4c58fce7-20240904",
+    "react-dom": "19.0.0-rc-4c58fce7-20240904"
   },
   "devDependencies": {
-    "@libsql/client": "^0.6.0",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "prisma": "^5"
+    "@types/react-dom": "^18.2.8"
   }
 }

apps/dev/nextjs/package.json

@@ -8,11 +8,12 @@
     "build:docs": "turbo run build --filter=docs",
     "build": "turbo run build --filter=next-auth --filter=@auth/*",
     "test": "turbo run test --concurrency=1 --filter=[HEAD^1] --filter=./packages/* --filter=!*app* --filter=!*dynamo* --filter=!*edgedb* --filter=!*hasura* --filter=!*mikro* --filter=!*dgraph* --filter=!*xata* --filter=!*typeorm*",
-    "test:e2e": "turbo run test:e2e",
+    "test:e2e": "turbo run test:e2e --filter=next-auth",
     "test:e2e:watch": "turbo run test:e2e -- --ui",
     "clean": "turbo run clean --no-cache",
     "dev": "pnpm dev:next",
     "dev:next": "turbo run dev --parallel --continue --filter=next-auth-app... --filter=@auth/core --filter=!./packages/adapter-*",
+    "dev:e2e:next": "turbo run dev --filter=next-auth-app",
     "dev:db": "turbo run dev --parallel --continue --filter=next-auth-app...",
     "dev:sveltekit": "turbo run dev --parallel --continue --filter=sveltekit-auth-app...",
     "dev:express": "turbo run dev --parallel --continue --filter=express-auth-app...",
@@ -32,7 +33,7 @@
     "@balazsorban/monorepo-release": "0.5.1",
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.9.1",
-    "@playwright/test": "1.41.2",
+    "@playwright/test": "1.40.0",
     "@types/node": "^20.8.10",
     "@typescript-eslint/eslint-plugin": "v6.19.1",
     "@typescript-eslint/parser": "v6.19.1",
@@ -51,7 +52,7 @@
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "svelte-eslint-parser": "^0.35.0",
-    "turbo": "^2.0.14",
+    "turbo": "^2.1.1",
     "typescript": "5.3.3",
     "typescript-eslint": "^8.3.0",
     "utils": "workspace:*",

package.json

@@ -96,7 +96,6 @@
     "clean": "rm -rf *.js *.d.ts* lib providers",
     "css": "node scripts/generate-css",
     "dev": "pnpm css && pnpm providers && tsc -w",
-    "test:e2e": "playwright test -c ../utils/playwright.config.ts",
     "test": "vitest run -c ../utils/vitest.config.ts",
     "test:watch": "vitest -c ../utils/vitest.config.ts",
     "providers": "node scripts/generate-providers"

packages/core/package.json

@@ -74,6 +74,7 @@
     "dev": "pnpm providers && tsc -w",
     "test": "vitest run -c ../utils/vitest.config.ts",
     "test:watch": "vitest -c ../utils/vitest.config.ts",
+    "test:e2e": "playwright test",
     "providers": "node ../utils/scripts/providers"
   },
   "files": [
@@ -107,6 +108,7 @@
   },
   "devDependencies": {
     "@types/react": "18.0.37",
+    "dotenv": "^10.0.0",
     "next": "14.2.3",
     "nodemailer": "^6.9.3",
     "react": "^18.2.0"

packages/next-auth/package.json

@@ -0,0 +1,53 @@
+// import { join } from "node:path"
+import { defineConfig, devices } from "@playwright/test"
+// import * as dotenv from "dotenv"
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`
+
+// if (!process.env.CI) {
+//   const path = process.env.TEST_DOCKER
+//     ? join(process.cwd(), "..", "..", "..", "packages", "core", ".env")
+//     : join(process.cwd(), "..", "core", ".env")
+
+//   dotenv.config({ path })
+// }
+
+/** See https://playwright.dev/docs/api/class-testconfig. */
+export default defineConfig({
+  testDir: "../",
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: "test-results/",
+  testMatch: "**/test/e2e/**/*.spec.ts",
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI
+    ? "dot"
+    : [["line"], ["html", { open: "on-failure" }]],
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if its failing with enabled tracing. This allows you to analyze the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: "retry-with-trace",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    cwd: "../../apps/dev/nextjs",
+    command: "pnpm dev",
+    url: baseURL,
+    stdout: "pipe",
+    reuseExistingServer: !process.env.CI,
+  },
+})

packages/next-auth/playwright.config.ts

@@ -72,7 +72,7 @@ export class WebApp {
     // Ensure we've landed back at the dev app logged in
     const session = await this.page.locator("pre").textContent()
 
-    expect(JSON.parse(session ?? "{}").user.email).toEqual("bob@alice.com")
+    expect(JSON.parse(session ?? "{}").user.name).toEqual("bob")
 
     this.isLoggedIn = true
   }