Home/AI App Building & Integration/extension-core-infrastructure
E

extension-core-infrastructure

by @caffeinelabsv
4.6(120)

This skill provides core infrastructure for AI applications, including backend connection configuration, Internet Identity authentication hooks, Actor management utilities, and a React app entry point. It streamlines the setup process for AI-driven applications, ensuring secure and reliable identity verification and backend communication. Developers can thus focus on implementing core business logic, accelerating project delivery and enhancing application stability.

reactauthenticationbackend-integrationinfrastructureai-app-developmentGitHub
Installation
npx skills add https://github.com/caffeinelabs/skills --skill extension-core-infrastructure
compare_arrows

Before / After Comparison

1 组
Before

Users or developers had to manually configure complex backend connections, implement identity authentication logic, and set up the basic structure for React applications. This often involved integrating and debugging multiple libraries, which was time-consuming and error-prone, leading to slow project initiation.

After

This skill provides out-of-the-box backend connection, Internet Identity authentication hooks, and a React app entry point. Developers can quickly launch projects with simple integration, significantly reducing the time and effort spent on infrastructure setup.

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.

User Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs27.4K
Rating4.6 / 5.0
Version
Updated2026年10月23日
Comparisons1

User Rating

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

Rate this Skill

0.0

Compatible Platforms

🤖claude-code

Timeline

Created2026年6月25日
Last Updated2026年10月23日
🎁 Agent Knowledge Cards
Survey