setup-dune-auth

Dune 認証を設定する

React アプリで Dune 認証を設定し、Fusion 内の CDF と通信できるようにします。フローは 2 種類あります。app.json に基づいて選択してください。

フローを選択する

app.json がある場合は読み込みます。

app.json infra	フロー	認証ソース	追加パッケージ
"appsApi"	Apps API（新しい Fusion アプリホスト）	@cognite/app-sdk の connectToHostApp	@cognite/app-sdk
なし／その他	Classic（従来の Files API）	@cognite/dune の DuneAuthProvider と useDune()	—

app.json がない場合は、ユーザーに確認してください。npx @cognite/dune create のデフォルトである Apps API を選択してください。

ステップ 1 — 状態を確認し、対応するか判断する

package.json、src/main.tsx（または src/index.tsx）、vite.config.ts、app.json を読み込みます。

次のいずれかに該当する場合、すでに有効な設定が存在します。その場合は何もせず、変更なしと報告してください。

• Classic：エントリーファイルで、@cognite/dune の <DuneAuthProvider> が <App /> をラップしている。
• Apps API、ジェネレーターパターン：App.tsx（または任意のコンポーネント）内で、@cognite/app-sdk の connectToHostApp が呼び出され、その認証状態がアプリの他の部分に渡されている。
• Apps API、ラッパーパターン：エントリーファイルで、@cognite/dune の <AppSdkAuthProvider> が <App /> をラップしている。（これは有効な代替パターンです。Classic と同じ useDune() API を使い、ボイラープレートも少なくなります。ジェネレーターのデフォルトに「修正」しようとしないでください。）

ロックファイルからパッケージマネージャーを判別します（pnpm-lock.yaml → pnpm、yarn.lock → yarn、それ以外は npm）。

ステップ 2 — 不足している依存関係をインストールする

両方のフローで必要です。

パッケージ	種類
@cognite/dune	ランタイム（Apps API モードでも Vite プラグインを提供）
@cognite/sdk	ランタイム
@tanstack/react-query	ランタイム
vite-plugin-mkcert	開発用

Apps API のみ、以下もインストールします。

パッケージ	種類
@cognite/app-sdk	ランタイム

package.json にすでに含まれているものはスキップします。判別したパッケージマネージャーを使います（pnpm add、npm install、yarn add。開発用依存関係には -D／--save-dev）。

ステップ 3 — Vite の設定

vite.config.ts には次の内容が必要です。

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" },
});

• base: "./" — Fusion の iframe へのデプロイに必要です。
• mkcert() — 開発サーバーで HTTPS を有効にします（Fusion の親ページは HTTPS です）。
• fusionOpenPlugin() — 開発 URL を Fusion 内で自動的に開きます。
• server.port: 3001 — 慣例的に使用します。ポートが設定されていない場合、プラグインは 3001 にフォールバックします。

不足しているものだけを追加してください。既存のプラグインは削除しないでください。

ステップ 4 — エントリーファイルとコンポーネントを接続する

Classic フロー

src/main.tsx：

import { DuneAuthProvider } from "@cognite/dune";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60 * 1000, gcTime: 10 * 60 * 1000 } },
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <DuneAuthProvider>
        <App />
      </DuneAuthProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

コンポーネントでは useDune() を使用します。

import { useDune } from "@cognite/dune";

const { sdk, isLoading, error } = useDune();
// sdk is an authenticated CogniteClient

Apps API フロー（ジェネレーターのデフォルト）

src/main.tsx では、認証プロバイダーでラップしません。認証は App.tsx 内で処理します。

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60 * 1000, gcTime: 10 * 60 * 1000 } },
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

src/App.tsx では、@cognite/app-sdk の connectToHostApp を呼び出します。ハンドシェイクは非同期のため、完了するまでローダーを表示します。

import { connectToHostApp } from "@cognite/app-sdk";
import { useEffect, useState } from "react";

function App() {
  const [project, setProject] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | undefined>();

  useEffect(() => {
    let cancelled = false;
    connectToHostApp({ applicationName: "<your-app-name>" })
      .then(async ({ api }) => {
        if (cancelled) return;
        setProject(await api.getProject());
      })
      .catch((err: unknown) => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : String(err));
      })
      .finally(() => {
        if (!cancelled) setIsLoading(false);
      });
    return () => { cancelled = true; };
  }, []);

  // render isLoading / error / authenticated UI
}

ホストがアプリを識別できるように、applicationName: appConfig.externalId（app.json から取得）を使用します。

Apps API フロー — ラッパーによる代替パターン

プロジェクトですでに @cognite/dune の <AppSdkAuthProvider> を使っている場合は、そのままにしてください。同じ connectToHostApp のハンドシェイクをラップし、Classic フローと同じ useDune() API を提供します。Apps API モードではどちらのパターンも有効です。

ステップ 5 — 置き換えられたコードを整理する

冗長になったものだけを削除します。

• カスタム CDF 認証プロバイダー／フック
• CogniteClient の手動インスタンス化
• OIDC／トークン管理コード
• CDF 環境変数（VITE_CDF_PROJECT、VITE_CDF_CLUSTER など）。Dune／ホストがこれらを提供します。

判断に迷う場合はそのまま残し、ユーザーに伝えてください。