apideck-libraries · jakeprins · May 7, 2026 · May 5, 2026 · May 5, 2026 · May 5, 2026
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 .DS_Store
 node_modules
 .cache
+.parcel-cache
 dist
 .env
 storybook-static

diff --git a/example/.env.example b/example/.env.example
@@ -0,0 +1,9 @@
+# Copy to .env and fill in. .env is gitignored.
+# Use a session JWT from an account in unify's `oauthCsrf` allowlist
+# (22222222 / 11111111 / cm3mogvfz004ebogk8rqdbgpi) to exercise the
+# new nonce + /confirm path.
+VITE_VAULT_TOKEN=
+VITE_VAULT_UNIFIED_API=crm
+VITE_VAULT_SERVICE_ID=hubspot
+# Leave blank for production unify, or set to e.g. https://staging-unify.apideck.com
+VITE_VAULT_UNIFY_BASE_URL=
diff --git a/example/index.html b/example/index.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="/index.tsx"></script>
   </body>
 </html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,13 +1,39 @@
-import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../.';
+import { Vault } from '../.';
+import '../dist/styles.css';
+
+// Configure via example/.env (see .env.example):
+//   VITE_VAULT_TOKEN, VITE_VAULT_UNIFIED_API, VITE_VAULT_SERVICE_ID,
+//   VITE_VAULT_UNIFY_BASE_URL (optional, e.g. staging)
+const env = (import.meta as any).env ?? {};
+const token: string = env.VITE_VAULT_TOKEN ?? '';
+const unifiedApi: string = env.VITE_VAULT_UNIFIED_API ?? 'crm';
+const serviceId: string = env.VITE_VAULT_SERVICE_ID ?? 'hubspot';
+const unifyBaseUrl: string | undefined = env.VITE_VAULT_UNIFY_BASE_URL;
 
 const App = () => {
+  if (!token) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'system-ui' }}>
+        <h1>No JWT configured</h1>
+        <p>
+          Create <code>example/.env</code> with{' '}
+          <code>VITE_VAULT_TOKEN=…</code> (see <code>.env.example</code>) and
+          restart <code>yarn start</code>.
+        </p>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <Thing />
-    </div>
+    <Vault
+      token={token}
+      open
+      unifiedApi={unifiedApi}
+      serviceId={serviceId}
+      unifyBaseUrl={unifyBaseUrl}
+    />
   );
 };
 

diff --git a/example/package.json b/example/package.json
@@ -1,24 +1,25 @@
 {
   "name": "example",
   "version": "1.0.0",
-  "main": "index.js",
   "license": "MIT",
+  "private": true,
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "vite",
+    "build": "vite build"
   },
   "dependencies": {
-    "react-app-polyfill": "^1.0.0"
-  },
-  "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
-    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.8.4",
-    "parcel": "^1.12.3",
-    "typescript": "^3.4.5"
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^4.5.5",
+    "vite": "^5.4.11"
+  },
+  "resolutions": {
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11"
   }
 }
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -1,18 +1,17 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
-    "target": "es6",
-    "module": "commonjs",
+    "target": "es2020",
+    "module": "esnext",
     "jsx": "react",
     "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "noImplicitAny": false,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "removeComments": true,
     "strictNullChecks": true,
-    "preserveConstEnums": true,
-    "sourceMap": true,
-    "lib": ["es2015", "es2016", "dom"],
-    "types": ["node"]
-  }
+    "skipLibCheck": true,
+    "lib": ["es2020", "dom", "dom.iterable"]
+  },
+  "include": ["index.tsx", "vite.config.ts"]
 }
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// Force a single React copy across the example AND the in-tree vault-core source.
+// Without this, Vite finds nested React copies in the parent's node_modules and
+// the React tree fails with "Invalid hook call".
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+    alias: {
+      react: path.resolve(__dirname, '../node_modules/react'),
+      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
+    },
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom'],
+  },
+  css: { postcss: { plugins: [] } },
+  server: {
+    port: 1234,
+    open: false,
+  },
+});