MUST be used when migrating an existing React app to Flows, or when no Flows auth is wired up. Detects classic vs Apps API flow from `app.json` `infra` field, installs the right packages, and wires up the entry file. No-op when a valid auth setup is already in place. Triggers: migrate to Flows, add

Set Up Flows Authentication Wire a React app for Flows auth so it can talk to CDF inside Fusion. Two flows exist; pick one based on app.json . Pick the flow Read app.json if present: app.json infra Flow Auth source Extra package "appsApi" Apps API (new Fusion app host) connectToHostApp from @cognite/app sdk @cognite/app sdk missing / other Classic (legacy Files API) DuneAuthProvider + useDune() from @cognite/dune — No app.json ? Ask the user. Default to Apps API — it's the default for npx @cognite/cli@latest apps create . Step 1 — Read state, decide whether to act Read package.json , src/main.tsx (or src/index.tsx ), vite.config.ts , app.json . A valid setup already exists if any of these is true — in which case do nothing and report no op: Classic : <DuneAuthProvider from @cognite/dune wraps <App / in the entry file. Apps API, provider pattern : <CogniteSdkProvider from @cognite/app sdk/react wraps the app (in App.tsx or main.tsx ), and nested components consume the client via useCogniteSdk() . Requires @cognite/app sdk = 0.5.1 . Detect the package manager from the lock file ( pnpm lock.yaml → pnpm, yarn.lock → yarn, otherwise npm). Step 2 — Install missing deps Classic flow: Package Type @cognite/dune runtime @cognite/sdk runtime @tanstack/react query runtime vite plugin mkcert dev Apps API flow: Package Type @cognite/app sdk runtime @cognite/sdk runtime @tanstack/react query runtime vite plugin mkcert dev Skip anything already in package.json . Use the detected package manager ( pnpm add , npm install , yarn add ; D / save dev for dev deps). Step 3 — Vite config Add only what's missing. Don't remove existing plugins. Classic flow Apps API flow base: "./" — required for Fusion iframe deployment. mkcert() — provides HTTPS for the dev server (the Fusion parent is HTTPS). fusionOpenPlugin() — opens the dev URL inside Fusion automatically. manifestCspPlugin() (Apps API only) — enforces the CSP declared in manifest.json ; must be first. server.port: 3001 — convention; the plugin falls back to 3001 if no port is set. Step 4 — Wire up the entry file and component Classic flow src/main.tsx : In components, use useDune() : Apps API flow (generator default, @cognite/app sdk = 0.5.1 ) src/main.tsx does not wrap in any auth provider — auth is handled inside App.tsx : src/App.tsx uses CogniteSdkProvider from @cognite/app sdk/react . The provider handles the Comlink handshake, loading, and error states internally. Nested components read the client via useCogniteSdk() : useCogniteSdk() throws if called outside CogniteSdkProvider — always nest it inside. Step 5 — Clean up superseded code Remove only what's now redundant: Custom CDF auth providers/hooks Manual CogniteClient instantiation OIDC/token management code CDF env vars ( VITE CDF PROJECT , VITE CDF CLUSTER , etc.) — Flows/the host provide these If unsure, leave it and flag to the user.

setup-flows-auth