setup-flows-auth

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

import { fusionOpenPlugin } from "@cognite/dune/vite";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  base: "./",
  plugins: [react(), mkcert(), fusionOpenPlugin(), /* ... */],
  server: { port: 3001 },
  worker: { format: "es" },
});