Next Auth failing to set next-auth.session-token cookie in headless playwright

[JohnAllenTech]

Hey all!

Essentially I am working on a standard next auth application. You can see it here https://github.com/codu-code/codu

I am running playwright and performing a Github login which logs a user into the application.

E2E Steps to get an authenticated browser state

When I run this code in ui mode of playwright it completes successfully

1. Goes to github.com and logins in using an email and password
2. Goes to my locally running application and starts the Github SSO flow
3. User is logged into the application and next-auth.session-token is set.
4. Authenticated browser state can be stored and reused.

When I run this code in headless mode it fails due to next-auth.session-token never being set.

Goes to github.com and logins in using an email and password
Goes to my locally running application and starts the Github SSO flow
User is logged into the application but next-auth.session-token is never set. Without that cookie I cant reuse the authenticated browser session.

Anyone got any ideas? It seems like a playwright issue to be fair but I want to understand does next auth not like headless mode?

I see the following cookies in headless mode

{
    name: 'next-auth.csrf-token',
    value: 'c267c9b5e65a6701d22bfb66ed19436ee21ea82fadeb4feedfbbcf071b1e50ff%7C47d5d88fd1f37d14fdc6662bc2744be538c225b2f0dbc223043dd7e6b014b78e',
    domain: 'localhost',
    path: '/',
    expires: -1,
    httpOnly: true,
    secure: false,
    sameSite: 'Lax'
  },
  {
    name: 'next-auth.callback-url',
    value: 'http%3A%2F%2Flocalhost%3A3000%2Farticles',
    domain: 'localhost',
    path: '/',
    expires: -1,
    httpOnly: true,
    secure: false,
    sameSite: 'Lax'
  }

where as in ui mode I get the same with the addition of

  {
    name: 'next-auth.session-token',
    value: '1234354363',
    domain: 'localhost',
    path: '/',
    expires: 2024-11-10T03:56:51.933Z,
    httpOnly: true,
    secure: false,
    sameSite: 'Lax'
  }

Actual authentication code I am referring to

import { test as setup, expect } from "@playwright/test";
import path from "path";

const authFile = path.join(__dirname, "../playwright/.auth/browser.json");

setup("authenticate", async ({ page }) => {
  // Perform authentication steps. Replace these actions with your own.
  try {
    const email = "email";
    const password = "password";

    if (!email || !password) {
      throw new Error(
        email || password
          ? "Missing both E2E test user credentials from environment"
          : email
            ? "Missing E2E_GITHUB_EMAIL from environment"
            : "Missing E2E_GITHUB_PASSWORD from environment",
      );
    }

    setup.setTimeout(60000);
    // Perform authentication steps. Replace these actions with your own.
    await page.goto("https://github.com/login");
    await page.getByLabel("Username or email address").fill(email);
    await page.getByLabel("Password").fill(password);
    await page.getByRole("button", { name: "Sign in" }).first().click();
    await page.waitForURL("https://github.com/");

    await page.goto("http://localhost:3000/get-started");
    await page.getByTestId("github-login-button").click();

    await page.waitForTimeout(10000);

    // If user logins in too many times they will be prompted to reauthorise
    if (page.url().startsWith("https://github.com/")) {
      await page
        .getByRole("button", { name: "Authorize JohnAllenTech" })
        .click();
      await page.waitForTimeout(10000);
    }

    let authCookieFound = false;
    while (!authCookieFound) {
      authCookieFound = !!(await page.context().cookies()).find(
        (cookie) => cookie.name === "next-auth.session-token",
      );
      await page.waitForTimeout(1000);
    }

    expect(
      (await page.context().cookies()).find(
        (cookie) => cookie.name === "next-auth.session-token",
      ),
    ).toBeTruthy();
    await page.context().storageState({ path: authFile });
  } catch (err) {
    console.log("Error while authenticating E2E test user", err);
  }
});

[solomonakp]

@JohnAllenTech This is not an issue with next-auth. You should set the expires property on next-auth.session-token to -1 to mark it as a session cookie.

Try:

  {
       name: 'next-auth.session-token',
       value: '1234354363',
       domain: 'localhost',
       path: '/',
       expires: -1,
       httpOnly: true,
       secure: false,
       sameSite: 'Lax',    
  }

[JohnAllenTech]

Hey @solomonakp thanks for getting back on this. Ill test out this change later in the week and report back.

[solomonakp]

@JohnAllenTech also make sure the domain property is set to the base URL of your playwright tests.