Setup Flows Auth

Automatically wires up authentication for React apps running inside Cognite Fusion so they can talk to CDF. Detects whether you're using the newer Apps API flow or the legacy Files API setup by checking app.json, installs the right packages (either @cognite/app-sdk or @cognite/dune), and scaffolds the provider pattern in your entry file. It's a no-op if auth is already configured. Saves you from reading migration docs and hunting down which CSP plugin goes where in vite.config.ts. The Apps API path uses CogniteSdkProvider with a cleaner hook-based API, while classic setups get DuneAuthProvider. Strips out any manual CogniteClient instantiation or environment variables you had lying around.

skills.sh installs: 1.9K
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cognitedata/builder-skills --skill setup-flows-auth --agent claude-code

Installs into .claude/skills of the current project.

Files

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.