ホーム/AI アプリ構築・連携/extension-core-infrastructure
E

extension-core-infrastructure

by @caffeinelabsv
4.6(120)

この Skill は、AI アプリケーション向けに、バックエンド接続設定、Internet Identity 認証フック、Actor 管理ユーティリティ、および React アプリのエントリポイントを含むコアインフラストラクチャを提供します。AI 駆動型アプリケーションの開発開始プロセスを簡素化し、安全で信頼性の高い認証とバックエンド通信を保証します。これにより、開発者はビジネスロジックの実装に集中でき、プロジェクトの迅速な提供とアプリケーションの安定性向上に貢献します。

reactauthenticationbackend-integrationinfrastructureai-app-developmentGitHub
インストール方法
npx skills add https://github.com/caffeinelabs/skills --skill extension-core-infrastructure
compare_arrows

Before / After 効果比較

1 组
使用前

ユーザーや開発者は、複雑なバックエンド接続を手動で設定し、ID 認証ロジックを実装し、React アプリケーションの基本構造を構築する必要がありました。これは、複数のライブラリの統合とデバッグを伴うことが多く、時間とエラーが発生しやすく、プロジェクトの開始が遅れる原因となっていました。

使用後

この Skill は、すぐに使えるバックエンド接続、Internet Identity 認証フック、および React アプリのエントリポイントを提供します。開発者は簡単な統合でプロジェクトを迅速に開始でき、インフラストラクチャの構築にかかる時間と労力を大幅に削減します。

SKILL.md

Core Infrastructure

Core infrastructure extension for Caffeine AI.

Overview

This component provides the foundational infrastructure for all projects: backend connection configuration, Internet Identity authentication hooks, and actor management utilities.

Requirements

Requries

"@icp-sdk/auth": "^7.1.0"
"@icp-sdk/core": "^5.3.0"

Integration

Core infrastructure is automatically included in every project. No manual integration steps are required.

Frontend

The core-infrastructure frontend package (@caffeineai/core-infrastructure) is automatically included in every project.

App Entry Point

Wrap the app with InternetIdentityProvider and QueryClientProvider:

import { InternetIdentityProvider } from "@caffeineai/core-infrastructure";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import ReactDOM from "react-dom/client";
import App from "./App";

const queryClient = new QueryClient();

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

useInternetIdentity() — Authentication Hook

Provides identity state, login, and logout for Internet Identity.

Return Values

FieldTypeDescription
identityIdentity | undefinedThe user's identity (available after login or session restore)
login() => voidOpens the II popup. Fire-and-forget — do not await.
clear() => voidLogs out and clears stored identity. Fire-and-forget.
isAuthenticatedbooleantrue when user has a valid identity. Use this for UI gating.
isInitializingbooleantrue while AuthClient is loading from IndexedDB
isLoggingInbooleantrue while the II popup is open
isLoginSuccessbooleantrue only after interactive login (NOT after page reload restore)
isLoginErrorbooleantrue if login or initialization failed
loginErrorError | undefinedThe error object when isLoginError is true

Auth State Lifecycle

ScenariologinStatusisAuthenticated
Page load, no stored session"idle"false
Restoring stored session"initializing"false → true
Stored session restored after reload"idle"true
Interactive login in progress"logging-in"false
Interactive login just completed"success"true
Login popup failed / cancelled"loginError"false

IMPORTANT: isLoginSuccess is only true after an interactive login via the popup — NOT when a stored identity is restored on page reload. Always use isAuthenticated for conditional rendering.

Usage

Gate authenticated UI on isAuthenticated:

const { isAuthenticated } = useInternetIdentity();

{isAuthenticated ? <AuthenticatedApp /> : <LoginScreen />}

Disable the login button while initializing or logging in:

const { login, isInitializing, isLoggingIn } = useInternetIdentity();

<button onClick={() => login()} disabled={isInitializing || isLoggingIn}>
  Sign in
</button>

login() and clear() are fire-and-forget — the hook's state fields (isLoggingIn, isInitializing) track the async lifecycle. Do not wrap them in local useState / isPending logic.

useActor() — Backend Actor Hook

Creates and manages a typed backend actor instance. Automatically re-creates the actor when the user's identity changes (login/logout).

import { useActor } from "@caffeineai/core-infrastructure";
import { createActor } from "declarations/backend";

function MyComponent() {
  const { actor, isFetching } = useActor(createActor);

  // actor is null while loading, then the typed backend actor
  if (!actor || isFetching) return <Loading />;

  // Call backend methods directly
  const data = await actor.myBackendMethod();
}

Return Values

FieldTypeDescription
actorT | nullThe typed backend actor, or null while loading
isFetchingbooleantrue while the actor is being created

When the identity changes (login, logout, or session restore), the actor is automatically re-created with the new identity and all dependent queries are invalidated and refetched.

ユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数27.4K
評価4.6 / 5.0
バージョン
更新日2026年10月23日
比較事例1 件

ユーザー評価

4.6(120)
5
37%
4
43%
3
13%
2
5%
1
2%

この Skill を評価

0.0

対応プラットフォーム

🤖claude-code

タイムライン

作成2026年6月25日
最終更新2026年10月23日
🎁 Agent 知識カード
アンケート