review fixes

Author: ksroda-sa

.github/workflows/extract.yml

@@ -3,6 +3,11 @@ name: Extract Snippets
 on:
   push:
     branches: [main]
+  pull_request:
+    paths:
+      - "samples/**"
+      - "scripts/**"
+      - "placeholder-map.yaml"
   workflow_dispatch:
 
 permissions:
@@ -36,13 +41,20 @@ jobs:
         working-directory: scripts
         run: yarn validate
 
+      - name: Verify no drift (PR only)
+        if: github.event_name == 'pull_request'
+        run: |
+          git diff --exit-code snippets.json snippet-manifest.yaml || \
+            (echo "::error::Extracted artifacts are out of date. Run 'cd scripts && yarn all' and commit the results." && exit 1)
+
       - name: Check for changes
         id: diff
+        if: github.event_name == 'push'
         run: |
           git diff --quiet snippets.json snippet-manifest.yaml || echo "changed=true" >> "$GITHUB_OUTPUT"
 
       - name: Commit updated artifacts
-        if: steps.diff.outputs.changed == 'true'
+        if: github.event_name == 'push' && steps.diff.outputs.changed == 'true'
         run: |
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"

samples/react/login-pkce/README.md

@@ -5,8 +5,8 @@ Minimal React app demonstrating OIDC login using Authorization Code + PKCE via `
 ## Setup
 
 1. Copy `.env.example` to `.env` and fill in your SecureAuth values
-2. `npm install`
-3. `npm run dev`
+2. `yarn install`
+3. `yarn dev`
 4. Open http://localhost:3000
 
 ## What this demonstrates

samples/react/login-pkce/src/App.tsx

@@ -30,7 +30,7 @@ function AuthButtons() {
     return (
       <div>
         <p>Welcome, {auth.user?.profile.name}</p>
-        <button onClick={() => auth.removeUser()}>Sign out</button>
+        <button onClick={() => auth.signoutRedirect()}>Sign out</button>
       </div>
     );
   }

samples/react/manifest.yaml

@@ -19,6 +19,6 @@ scenarios:
       - label: "Redirect URI"
         value: "{{REDIRECT_URI}}"
       - label: "Scopes"
-        value: "openid profile email"
+        value: "{{SCOPES}}"
       - label: "Grant"
         value: "Authorization Code + PKCE"

scripts/aggregate-manifests.ts

@@ -2,6 +2,7 @@ import { readFileSync, writeFileSync } from "fs";
 import { glob } from "glob";
 import yaml from "js-yaml";
 import path from "path";
+import { fileURLToPath } from "url";
 
 interface ConfigRow {
   label: string;
@@ -31,7 +32,7 @@ interface AggregatedScenario extends ScenarioManifest {
   frameworks: string[];
 }
 
-const ROOT = path.resolve(import.meta.dirname, "..");
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const SAMPLES = path.join(ROOT, "samples");
 
 async function main() {

scripts/extract-snippets.ts

@@ -2,6 +2,7 @@ import { readFileSync, writeFileSync } from "fs";
 import { glob } from "glob";
 import yaml from "js-yaml";
 import path from "path";
+import { fileURLToPath } from "url";
 
 interface PlaceholderMapping {
   pattern: string;
@@ -39,7 +40,7 @@ interface FrameworkManifest {
   scenarios: Record<string, unknown>;
 }
 
-const ROOT = path.resolve(import.meta.dirname, "..");
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const SAMPLES = path.join(ROOT, "samples");
 const TAG_START = /\/\/\s*@snippet:step(\d+):start/;
 const TAG_END = /\/\/\s*@snippet:step(\d+):end/;
@@ -113,6 +114,12 @@ function extractStepsFromFile(
 
     const endMatch = line.match(TAG_END);
     if (endMatch && currentStep !== null) {
+      const endStep = parseInt(endMatch[1], 10);
+      if (endStep !== currentStep) {
+        throw new Error(
+          `Mismatched snippet end tag in ${filePath}:${i + 1}. Expected @snippet:step${currentStep}:end but found @snippet:step${endStep}:end.`
+        );
+      }
       const code = applyPlaceholders(currentLines.join("\n"), lang, placeholderMap);
       steps.push({
         step: currentStep,

scripts/validate-structure.ts

@@ -2,15 +2,17 @@ import { existsSync, readFileSync } from "fs";
 import { glob } from "glob";
 import yaml from "js-yaml";
 import path from "path";
+import { fileURLToPath } from "url";
 
 interface FrameworkManifest {
   framework: string;
   scenarios: Record<string, unknown>;
 }
 
-const ROOT = path.resolve(import.meta.dirname, "..");
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const SAMPLES = path.join(ROOT, "samples");
-const TAG_PATTERN = /@snippet:step\d+:start/;
+const TAG_START = /@snippet:step(\d+):start/g;
+const TAG_END = /@snippet:step(\d+):end/g;
 
 let errors = 0;
 
@@ -51,9 +53,20 @@ async function main() {
       let hasSnippetTag = false;
       for (const file of sourceFiles) {
         const fileContent = readFileSync(path.join(scenarioDir, file), "utf-8");
-        if (TAG_PATTERN.test(fileContent)) {
-          hasSnippetTag = true;
-          break;
+        const starts = [...fileContent.matchAll(TAG_START)].map((m) => parseInt(m[1], 10));
+        const ends = [...fileContent.matchAll(TAG_END)].map((m) => parseInt(m[1], 10));
+
+        if (starts.length > 0) hasSnippetTag = true;
+
+        for (const step of starts) {
+          if (!ends.includes(step)) {
+            error(`Missing @snippet:step${step}:end in samples/${manifest.framework}/${dirName}/${file}`);
+          }
+        }
+        for (const step of ends) {
+          if (!starts.includes(step)) {
+            error(`Missing @snippet:step${step}:start in samples/${manifest.framework}/${dirName}/${file}`);
+          }
         }
       }