首页/AI 应用构建与集成/extension-core-infrastructure
E

extension-core-infrastructure

by @caffeinelabsv
4.6(120)

此技能为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 组
使用前

用户或开发者需要手动配置复杂的后端连接、实现身份认证逻辑,并为React应用搭建基础结构,这通常涉及多个库的集成和调试,耗时且容易出错,导致项目启动缓慢。

使用后

此技能提供开箱即用的后端连接、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 知识卡片
调研问卷