Merge pull request #13 from SecureAuthCorp/feat/AUT-13537-quickstart-improvements

UI quickstart improvements

Author: ksroda-sa

.github/workflows/extract.yml

@@ -17,9 +17,9 @@ jobs:
   validate:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: "22"
 
@@ -55,9 +55,9 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: "22"
 

placeholder-map.yaml

@@ -3,27 +3,13 @@
 # with generic {{PLACEHOLDER}} tokens in extracted snippets.
 
 js:
-  - pattern: "import.meta.env.VITE_ISSUER_URL"
+  - pattern: "import.meta.env.ISSUER_URL"
     placeholder: "{{ISSUER_URL}}"
-  - pattern: "import.meta.env.VITE_CLIENT_ID"
+  - pattern: "import.meta.env.CLIENT_ID"
     placeholder: "{{CLIENT_ID}}"
-  - pattern: "import.meta.env.VITE_REDIRECT_URI"
+  - pattern: "import.meta.env.REDIRECT_URI"
     placeholder: "{{REDIRECT_URI}}"
-  - pattern: "import.meta.env.VITE_SCOPES"
+  - pattern: "import.meta.env.SCOPES"
     placeholder: "{{SCOPES}}"
-  - pattern: "import.meta.env.VITE_POST_LOGOUT_URI"
+  - pattern: "import.meta.env.POST_LOGOUT_URI"
     placeholder: "{{POST_LOGOUT_URI}}"
-  - pattern: "process.env.REACT_APP_ISSUER_URL"
-    placeholder: "{{ISSUER_URL}}"
-  - pattern: "process.env.REACT_APP_CLIENT_ID"
-    placeholder: "{{CLIENT_ID}}"
-  - pattern: "process.env.REACT_APP_REDIRECT_URI"
-    placeholder: "{{REDIRECT_URI}}"
-  - pattern: "process.env.SA_ISSUER_URL"
-    placeholder: "{{ISSUER_URL}}"
-  - pattern: "process.env.SA_CLIENT_ID"
-    placeholder: "{{CLIENT_ID}}"
-  - pattern: "process.env.SA_CLIENT_SECRET"
-    placeholder: "{{CLIENT_SECRET}}"
-  - pattern: "process.env.SA_REDIRECT_URI"
-    placeholder: "{{REDIRECT_URI}}"

samples/react/login-pkce/.env.example

@@ -1,5 +1,5 @@
-VITE_ISSUER_URL=https://your-tenant.us.secureauth.com/your-workspace
-VITE_CLIENT_ID=your-client-id
-VITE_REDIRECT_URI=http://localhost:3000/callback
-VITE_POST_LOGOUT_URI=http://localhost:3000
-VITE_SCOPES=openid profile email
+ISSUER_URL=https://your-tenant.us.secureauth.com/your-workspace
+CLIENT_ID=your-client-id
+REDIRECT_URI=http://localhost:3000/callback
+POST_LOGOUT_URI=http://localhost:3000
+SCOPES=openid profile email

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

@@ -6,11 +6,11 @@ import { AuthProvider, useAuth } from "react-oidc-context";
 // @snippet:step2:start
 // @description Configure the OIDC client with your SecureAuth app settings
 const oidcConfig = {
-  authority: import.meta.env.VITE_ISSUER_URL,
-  client_id: import.meta.env.VITE_CLIENT_ID,
-  redirect_uri: import.meta.env.VITE_REDIRECT_URI,
-  post_logout_redirect_uri: import.meta.env.VITE_POST_LOGOUT_URI,
-  scope: import.meta.env.VITE_SCOPES,
+  authority: import.meta.env.ISSUER_URL,
+  client_id: import.meta.env.CLIENT_ID,
+  redirect_uri: import.meta.env.REDIRECT_URI,
+  post_logout_redirect_uri: import.meta.env.POST_LOGOUT_URI,
+  scope: import.meta.env.SCOPES,
 };
 // @snippet:step2:end
 

samples/react/login-pkce/vite.config.ts

@@ -1,9 +1,34 @@
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-  },
+const exposedEnvVars = [
+  "ISSUER_URL",
+  "CLIENT_ID",
+  "REDIRECT_URI",
+  "POST_LOGOUT_URI",
+  "SCOPES",
+];
+
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  if (command === "serve") {
+    const missing = exposedEnvVars.filter((key) => !env[key]);
+    if (missing.length > 0) {
+      throw new Error(
+        `Missing required env vars: ${missing.join(", ")}. Copy .env.example to .env and fill in the values.`,
+      );
+    }
+  }
+  return {
+    plugins: [react()],
+    define: Object.fromEntries(
+      exposedEnvVars.map((key) => [
+        `import.meta.env.${key}`,
+        JSON.stringify(env[key] ?? ""),
+      ]),
+    ),
+    server: {
+      port: 3000,
+    },
+  };
 });

samples/react/manifest.yaml

@@ -11,6 +11,7 @@ scenarios:
     grant: "Auth Code + PKCE"
     description: "Redirect users to SecureAuth for login. PKCE protects against code interception."
     callout: "Uses PKCE — no client secret needed. The browser generates a code_verifier/code_challenge pair."
+    run_command: "yarn install && yarn dev"
     config_rows:
       - label: "Client ID"
         value: "{{CLIENT_ID}}"

scripts/aggregate-manifests.ts

@@ -16,6 +16,7 @@ interface ScenarioManifest {
   description: string;
   callout?: string;
   extends?: string;
+  run_command?: string;
   config_rows: ConfigRow[];
 }
 

scripts/extract-snippets.ts

@@ -29,6 +29,12 @@ interface FrameworkSnippet {
   lib_version: string;
   install: string;
   repo_path: string;
+  run_command?: string;
+}
+
+interface ScenarioMeta {
+  run_command?: string;
+  [key: string]: unknown;
 }
 
 interface FrameworkManifest {
@@ -37,7 +43,7 @@ interface FrameworkManifest {
   lang: string;
   lib: string;
   docs_url: string;
-  scenarios: Record<string, unknown>;
+  scenarios: Record<string, ScenarioMeta>;
 }
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
@@ -200,13 +206,15 @@ async function main() {
         snippets[scenarioId] = {};
       }
 
+      const runCommand = manifest.scenarios[scenarioId]?.run_command;
       snippets[scenarioId][fw] = {
         steps: allSteps,
         framework: fw,
         lib: manifest.lib,
         lib_version: getLibVersion(scenarioDir, frameworkDir),
         install: getInstallCommand(scenarioDir),
         repo_path: `samples/${path.relative(SAMPLES, scenarioDir)}`,
+        ...(runCommand ? { run_command: runCommand } : {}),
       };
     }
   }

scripts/tsconfig.json

@@ -7,7 +7,8 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "outDir": "dist",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["node"]
   },
   "include": ["*.ts"]
 }

snippet-manifest.yaml

@@ -12,6 +12,7 @@ scenarios:
     grant: Auth Code + PKCE
     description: Redirect users to SecureAuth for login. PKCE protects against code interception.
     callout: Uses PKCE — no client secret needed. The browser generates a code_verifier/code_challenge pair.
+    run_command: yarn install && yarn dev
     config_rows:
       - label: Client ID
         value: "{{CLIENT_ID}}"