From c1fae6137c0f57c163b1a2a45731ef1e0116711c Mon Sep 17 00:00:00 2001
From: donghyeon-ka <ehdgus6435@kumoh.ac.kr>
Date: Sat, 25 Jul 2026 14:09:03 +0900
Subject: [PATCH] feat(ap1): add vanilla SPA PKCE login

---
 .gitignore                                    |   2 +
 README.md                                     |  14 +
 .../keycloakpattern/SecurityConfig.java       |  21 +
 e2e/package-lock.json                         |  28 +
 e2e/package.json                              |  12 +
 e2e/pattern1.mjs                              |  71 +++
 frontend/Dockerfile                           |  12 +
 frontend/index.html                           |  61 +-
 frontend/nginx.conf                           |   1 +
 frontend/package-lock.json                    | 523 ++++++++++++++++++
 frontend/package.json                         |  16 +
 frontend/src/app.js                           | 138 +++++
 frontend/src/pkce.js                          |  26 +
 frontend/test/pkce.test.mjs                   |  18 +
 scripts/verify-pattern1.sh                    |  21 +
 15 files changed, 951 insertions(+), 13 deletions(-)
 create mode 100644 e2e/package-lock.json
 create mode 100644 e2e/package.json
 create mode 100644 e2e/pattern1.mjs
 create mode 100644 frontend/package-lock.json
 create mode 100644 frontend/package.json
 create mode 100644 frontend/src/app.js
 create mode 100644 frontend/src/pkce.js
 create mode 100644 frontend/test/pkce.test.mjs
 create mode 100755 scripts/verify-pattern1.sh

diff --git a/.gitignore b/.gitignore
index 8f0f1cc..215efbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,6 @@
 *.iml
 
 backend/target/
+**/node_modules/
+frontend/dist/
 build/
diff --git a/README.md b/README.md
index ac1a49e..d8a7f29 100644
--- a/README.md
+++ b/README.md
@@ -96,3 +96,17 @@ Keycloak을 잠시 중지하고 export한 뒤 자동으로 다시 올립니다.
 
 runtime export에는 실제 client secret과 credential hash가 포함될 수 있어
 gitignored `build/keycloak-export/`에 권한 `0600`으로만 저장됩니다.
+
+## AP1: SPA Direct + Resource Server
+
+`develop-keycloak-pattern1`은 vanilla JavaScript SPA가 `spa-public` client로
+Authorization Code + PKCE S256 로그인을 수행하는 패턴입니다. access/refresh
+token은 명시적인 in-memory store에만 보관되므로 새로고침하면 사라집니다.
+
+```bash
+./scripts/verify-pattern1.sh
+```
+
+브라우저에서 `http://localhost:8088`을 열어 로그인한 뒤 보호 API를 호출할 수
+있습니다. SPA는 `http://localhost:8081/api/me`를 직접 호출하며 Spring
+Resource Server가 Bearer JWT를 검증합니다.
diff --git a/backend/src/main/java/com/example/keycloakpattern/SecurityConfig.java b/backend/src/main/java/com/example/keycloakpattern/SecurityConfig.java
index d4c2129..41b68af 100644
--- a/backend/src/main/java/com/example/keycloakpattern/SecurityConfig.java
+++ b/backend/src/main/java/com/example/keycloakpattern/SecurityConfig.java
@@ -1,11 +1,16 @@
 package com.example.keycloakpattern;
 
+import java.util.List;
+
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 
 @Configuration
 public class SecurityConfig {
@@ -13,6 +18,7 @@ public class SecurityConfig {
     @Bean
     SecurityFilterChain apiSecurity(HttpSecurity http) throws Exception {
         return http
+            .cors(Customizer.withDefaults())
             .csrf(csrf -> csrf.disable())
             .sessionManagement(session ->
                 session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
@@ -24,4 +30,19 @@ public class SecurityConfig {
             .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
             .build();
     }
+
+    @Bean
+    CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration configuration = new CorsConfiguration();
+        configuration.setAllowedOrigins(List.of(
+            "http://localhost:8088",
+            "http://127.0.0.1:8088"
+        ));
+        configuration.setAllowedMethods(List.of("GET", "OPTIONS"));
+        configuration.setAllowedHeaders(List.of("Authorization", "Content-Type"));
+
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/api/**", configuration);
+        return source;
+    }
 }
diff --git a/e2e/package-lock.json b/e2e/package-lock.json
new file mode 100644
index 0000000..78d42d6
--- /dev/null
+++ b/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"
+      }
+    }
+  }
+}
diff --git a/e2e/package.json b/e2e/package.json
new file mode 100644
index 0000000..06a4dd4
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/e2e/pattern1.mjs b/e2e/pattern1.mjs
new file mode 100644
index 0000000..0028c89
--- /dev/null
+++ b/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();
+}
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index de7eb7e..652cbdf 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,4 +1,16 @@
+FROM node:24-alpine AS build
+
+WORKDIR /workspace
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY src ./src
+COPY test ./test
+RUN npm test && npm run build
+
 FROM nginx:1.29-alpine
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY index.html /usr/share/nginx/html/index.html
+COPY --from=build /workspace/dist/app.js /usr/share/nginx/html/app.js
diff --git a/frontend/index.html b/frontend/index.html
index 8b1109a..1b8c8ff 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,31 +3,66 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Keycloak Authentication Patterns</title>
+  <meta name="referrer" content="no-referrer">
+  <title>AP1 · SPA Direct + Resource Server</title>
   <style>
     :root {
       color-scheme: light dark;
       font-family: system-ui, sans-serif;
     }
     body {
-      max-width: 48rem;
-      margin: 8vh auto;
+      max-width: 56rem;
+      margin: 6vh auto;
       padding: 0 1.5rem;
-      line-height: 1.6;
+      line-height: 1.55;
+    }
+    button {
+      margin: 0 0.5rem 0.5rem 0;
+      padding: 0.6rem 0.9rem;
+      cursor: pointer;
+    }
+    code, pre {
+      border-radius: 0.35rem;
+      background: color-mix(in srgb, CanvasText 9%, Canvas);
     }
     code {
-      padding: 0.15rem 0.35rem;
-      border-radius: 0.25rem;
-      background: color-mix(in srgb, CanvasText 10%, Canvas);
+      padding: 0.1rem 0.3rem;
+    }
+    pre {
+      min-height: 8rem;
+      padding: 1rem;
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+    .notice {
+      border-left: 0.3rem solid #e09f3e;
+      padding-left: 1rem;
     }
   </style>
 </head>
 <body>
-  <h1>Keycloak Authentication Patterns</h1>
-  <p>공통 Docker Compose baseline이 실행 중입니다.</p>
-  <p>
-    공개 API는 <code>/api/public</code>, 보호 API는
-    <code>/api/me</code>에서 확인할 수 있습니다.
-  </p>
+  <main>
+    <h1>AP1 · SPA Direct + Resource Server</h1>
+    <p>
+      바닐라 JavaScript SPA가 <code>spa-public</code> client로 Authorization
+      Code + PKCE를 수행하고, access token을 직접 Spring Resource Server에
+      전달합니다.
+    </p>
+    <p class="notice">
+      access/refresh token은 메모리에만 존재합니다. 새로고침하면 사라지는 것이
+      이 패턴의 의도된 보안 경계입니다.
+    </p>
+
+    <section>
+      <button id="login" type="button">Keycloak 로그인</button>
+      <button id="call-api" type="button" disabled>보호 API 호출</button>
+      <button id="pkce-demo" type="button">수동 PKCE 생성</button>
+      <button id="logout" type="button" disabled>로그아웃</button>
+    </section>
+
+    <p id="session-state" data-authenticated="false">세션 확인 중…</p>
+    <pre id="result" aria-live="polite"></pre>
+  </main>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index 731d30e..3e53c62 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -21,6 +21,7 @@ server {
     }
 
     location / {
+        add_header Cache-Control "no-store";
         try_files $uri $uri/ /index.html;
     }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..a64b91b
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,523 @@
+{
+  "name": "keycloak-pattern1-spa",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "keycloak-pattern1-spa",
+      "version": "1.0.0",
+      "dependencies": {
+        "oidc-client-ts": "3.5.0"
+      },
+      "devDependencies": {
+        "esbuild": "0.28.1"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/oidc-client-ts": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.5.0.tgz",
+      "integrity": "sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jwt-decode": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..cde3d9a
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "keycloak-pattern1-spa",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "esbuild src/app.js --bundle --format=esm --outfile=dist/app.js --minify --sourcemap",
+    "test": "node --test test/*.test.mjs"
+  },
+  "dependencies": {
+    "oidc-client-ts": "3.5.0"
+  },
+  "devDependencies": {
+    "esbuild": "0.28.1"
+  }
+}
diff --git a/frontend/src/app.js b/frontend/src/app.js
new file mode 100644
index 0000000..183bf7e
--- /dev/null
+++ b/frontend/src/app.js
@@ -0,0 +1,138 @@
+import {
+  InMemoryWebStorage,
+  UserManager,
+  WebStorageStateStore,
+} from "oidc-client-ts";
+
+import { createPkcePair } from "./pkce.js";
+
+const authority = "http://localhost:8080/realms/keycloak-patterns";
+const backendBaseUrl = "http://localhost:8081";
+
+const userManager = new UserManager({
+  authority,
+  client_id: "spa-public",
+  redirect_uri: "http://localhost:8088/callback.html",
+  post_logout_redirect_uri: "http://localhost:8088/",
+  response_type: "code",
+  scope: "openid profile email",
+  automaticSilentRenew: true,
+  monitorSession: false,
+  loadUserInfo: false,
+  userStore: new WebStorageStateStore({
+    store: new InMemoryWebStorage(),
+  }),
+  stateStore: new WebStorageStateStore({
+    store: window.sessionStorage,
+  }),
+});
+
+const loginButton = document.querySelector("#login");
+const logoutButton = document.querySelector("#logout");
+const apiButton = document.querySelector("#call-api");
+const pkceButton = document.querySelector("#pkce-demo");
+const sessionState = document.querySelector("#session-state");
+const result = document.querySelector("#result");
+
+let currentUser = null;
+
+function renderJson(value) {
+  result.textContent = JSON.stringify(value, null, 2);
+}
+
+function tokenMetadata(user) {
+  return {
+    subject: user.profile.sub,
+    username: user.profile.preferred_username,
+    expiresAt: new Date(user.expires_at * 1000).toISOString(),
+    accessTokenHeldBy: "browser memory",
+    refreshTokenHeldBy: user.refresh_token ? "browser memory" : "not issued",
+  };
+}
+
+function renderSession(user) {
+  currentUser = user;
+  const authenticated = Boolean(user && !user.expired);
+  sessionState.dataset.authenticated = String(authenticated);
+  sessionState.textContent = authenticated
+    ? `${user.profile.preferred_username} 로그인됨 · token은 메모리에만 보관`
+    : "로그인되지 않음 · 브라우저 저장소에 token 없음";
+  loginButton.disabled = authenticated;
+  logoutButton.disabled = !authenticated;
+  apiButton.disabled = !authenticated;
+
+  if (authenticated) {
+    renderJson(tokenMetadata(user));
+  }
+}
+
+async function finishSigninCallback() {
+  const params = new URLSearchParams(window.location.search);
+  const isCallback = window.location.pathname === "/callback.html"
+    && (params.has("code") || params.has("error"));
+
+  if (!isCallback) {
+    return null;
+  }
+
+  const user = await userManager.signinRedirectCallback();
+  window.history.replaceState({}, document.title, "/");
+  return user;
+}
+
+async function callProtectedApi() {
+  if (!currentUser || currentUser.expired) {
+    throw new Error("로그인이 필요합니다.");
+  }
+
+  const response = await fetch(`${backendBaseUrl}/api/me`, {
+    headers: {
+      Authorization: `Bearer ${currentUser.access_token}`,
+    },
+  });
+  const body = await response.json();
+  renderJson({
+    httpStatus: response.status,
+    resourceServerResponse: body,
+    tokenBoundary: tokenMetadata(currentUser),
+  });
+
+  if (!response.ok) {
+    throw new Error(`보호 API가 ${response.status}를 반환했습니다.`);
+  }
+}
+
+loginButton.addEventListener("click", () => userManager.signinRedirect());
+logoutButton.addEventListener("click", () => userManager.signoutRedirect());
+apiButton.addEventListener("click", () => {
+  callProtectedApi().catch((error) => renderJson({ error: error.message }));
+});
+pkceButton.addEventListener("click", () => {
+  createPkcePair()
+    .then(({ verifier, challenge, method }) => renderJson({
+      method,
+      verifierLength: verifier.length,
+      challengeLength: challenge.length,
+      note: "실제 로그인에서는 oidc-client-ts가 같은 S256 단계를 수행합니다.",
+    }))
+    .catch((error) => renderJson({ error: error.message }));
+});
+
+userManager.events.addUserLoaded(renderSession);
+userManager.events.addUserUnloaded(() => renderSession(null));
+userManager.events.addAccessTokenExpired(() => renderSession(null));
+
+window.__pattern1 = {
+  getAccessToken: () => currentUser?.access_token ?? null,
+  getRefreshToken: () => currentUser?.refresh_token ?? null,
+  getIdToken: () => currentUser?.id_token ?? null,
+  callProtectedApi,
+};
+
+try {
+  const callbackUser = await finishSigninCallback();
+  renderSession(callbackUser ?? await userManager.getUser());
+} catch (error) {
+  renderSession(null);
+  renderJson({ error: error.message });
+}
diff --git a/frontend/src/pkce.js b/frontend/src/pkce.js
new file mode 100644
index 0000000..9cacfca
--- /dev/null
+++ b/frontend/src/pkce.js
@@ -0,0 +1,26 @@
+function base64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary)
+    .replaceAll("+", "-")
+    .replaceAll("/", "_")
+    .replace(/=+$/u, "");
+}
+
+export async function createPkcePair(cryptoApi = globalThis.crypto) {
+  const verifierBytes = new Uint8Array(32);
+  cryptoApi.getRandomValues(verifierBytes);
+  const verifier = base64Url(verifierBytes);
+  const digest = await cryptoApi.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(verifier),
+  );
+
+  return {
+    verifier,
+    challenge: base64Url(new Uint8Array(digest)),
+    method: "S256",
+  };
+}
diff --git a/frontend/test/pkce.test.mjs b/frontend/test/pkce.test.mjs
new file mode 100644
index 0000000..45cacc4
--- /dev/null
+++ b/frontend/test/pkce.test.mjs
@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import { webcrypto } from "node:crypto";
+import test from "node:test";
+
+globalThis.btoa = (value) => Buffer.from(value, "binary").toString("base64");
+
+const { createPkcePair } = await import("../src/pkce.js");
+
+test("manual PKCE helper creates an RFC 7636 S256 pair", async () => {
+  const pair = await createPkcePair(webcrypto);
+
+  assert.equal(pair.method, "S256");
+  assert.equal(pair.verifier.length, 43);
+  assert.equal(pair.challenge.length, 43);
+  assert.match(pair.verifier, /^[A-Za-z0-9_-]+$/u);
+  assert.match(pair.challenge, /^[A-Za-z0-9_-]+$/u);
+  assert.notEqual(pair.verifier, pair.challenge);
+});
diff --git a/scripts/verify-pattern1.sh b/scripts/verify-pattern1.sh
new file mode 100755
index 0000000..7649c14
--- /dev/null
+++ b/scripts/verify-pattern1.sh
@@ -0,0 +1,21 @@
+#!/usr/bin/env sh
+set -eu
+
+if [ ! -f .env ]; then
+  echo "missing .env; copy .env.example and set local-only values" >&2
+  exit 1
+fi
+
+set -a
+. ./.env
+set +a
+
+docker compose down --volumes --remove-orphans
+docker compose up --build -d --wait
+
+npm --prefix e2e ci
+E2E_USERNAME=regular-user \
+E2E_PASSWORD="$REGULAR_USER_PASSWORD" \
+  npm --prefix e2e run test:pattern1
+
+echo "AP1 verified end to end"