UI quickstart improvements

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,26 @@
 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 }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  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)), "..");
@@ -207,6 +213,9 @@ async function main() {
         lib_version: getLibVersion(scenarioDir, frameworkDir),
         install: getInstallCommand(scenarioDir),
         repo_path: `samples/${path.relative(SAMPLES, scenarioDir)}`,
+        ...(manifest.scenarios[scenarioId]?.run_command && {
+          run_command: manifest.scenarios[scenarioId].run_command,
+        }),
       };
     }
   }

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}}"

snippets.json

@@ -39,7 +39,8 @@
       "lib": "react-oidc-context",
       "lib_version": "3.3.1",
       "install": "oidc-client-ts react-oidc-context",
-      "repo_path": "samples/react/login-pkce"
+      "repo_path": "samples/react/login-pkce",
+      "run_command": "yarn install && yarn dev"
     }
   }
 }