feat(ap1): add vanilla SPA PKCE login

e2e/package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "keycloak-pattern-e2e",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "keycloak-pattern-e2e",
+      "version": "1.0.0",
+      "devDependencies": {
+        "playwright-core": "1.62.0"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.0.tgz",
+      "integrity": "sha512-nsNRyq0r2zsG8AcRHWknc9QRA5XCueC7gWMrs+Gx2tlZn9hcl8zudfh00lhJPY1DE7NmZ6bDsT9g2yey8mXljA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    }
+  }
+}

e2e/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "keycloak-pattern-e2e",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "test:pattern1": "node pattern1.mjs"
+  },
+  "devDependencies": {
+    "playwright-core": "1.62.0"
+  }
+}

e2e/pattern1.mjs

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import { chromium } from "playwright-core";
+
+const username = process.env.E2E_USERNAME ?? "regular-user";
+const password = process.env.E2E_PASSWORD;
+
+assert.ok(password, "E2E_PASSWORD must be set");
+
+const browser = await chromium.launch({
+  executablePath: process.env.CHROME_BIN ?? "/usr/bin/google-chrome",
+  headless: true,
+  args: ["--no-sandbox"],
+});
+
+try {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+  let authorizationUrl;
+
+  page.on("request", (request) => {
+    if (request.url().includes("/protocol/openid-connect/auth")) {
+      authorizationUrl = new URL(request.url());
+    }
+  });
+
+  await page.goto("http://localhost:8088");
+  await page.locator("#login").click();
+  await page.waitForURL(/localhost:8080/u);
+  await page.locator("#username").fill(username);
+  await page.locator("#password").fill(password);
+  await page.locator("#kc-login").click();
+  await page.waitForURL("http://localhost:8088/");
+  await page.locator('[data-authenticated="true"]').waitFor();
+
+  assert.equal(authorizationUrl?.searchParams.get("response_type"), "code");
+  assert.equal(authorizationUrl?.searchParams.get("code_challenge_method"), "S256");
+  assert.ok(authorizationUrl?.searchParams.get("code_challenge"));
+
+  const accessToken = await page.evaluate(() => window.__pattern1.getAccessToken());
+  assert.ok(accessToken, "access token must exist in browser memory");
+
+  const storageSnapshot = await page.evaluate(() => ({
+    localStorage: Object.values(localStorage),
+    sessionStorage: Object.values(sessionStorage),
+  }));
+  assert.equal(
+    JSON.stringify(storageSnapshot).includes(accessToken),
+    false,
+    "access token must not be persisted in Web Storage",
+  );
+
+  await page.locator("#call-api").click();
+  await page.waitForFunction(() => {
+    const text = document.querySelector("#result")?.textContent ?? "";
+    return text.includes('"httpStatus": 200');
+  });
+
+  await page.reload();
+  await page.locator('[data-authenticated="false"]').waitFor();
+  assert.equal(
+    await page.evaluate(() => window.__pattern1.getAccessToken()),
+    null,
+    "reload must clear the memory-only token",
+  );
+
+  console.log(
+    "pattern1 browser verified: code+PKCE S256, protected API 200, Web Storage token 0, reload clears token",
+  );
+} finally {
+  await browser.close();
+}