Hey folks! 
With everyone upgrading to Internet Identity 2.0 / id.ai, now’s a great moment to simplify your frontend auth + data fetching.
If you’re building with React, ic-reactor v3 makes login ridiculously easy thanks to createAuthHooks — it handles session restore, the II popup, agent updates, and reactive state behind the scenes. You basically just call login() when the user clicks, and everything works.
Quick Installation (important: include auth package!)
npm add @ic-reactor/react@beta @icp-sdk/core @icp-sdk/auth @tanstack/react-query
# or pnpm / yarn equivalents
Super Simple Setup
- Create your
ClientManager (one time, e.g. in a context/provider file):
// clientManager.ts
import { ClientManager } from "@ic-reactor/core";
import { QueryClient } from "@tanstack/react-query";
export const queryClient = new QueryClient();
export const clientManager = new ClientManager({
queryClient,
// Optional: try the new experimental feature for automatic env detection!
// Great for @icp-sdk toolchain / icp-cli dev servers (reads ic_env cookie)
// ⚠️ Experimental — may have issues with localhost update calls
// withCanisterEnv: true,
// Or use: withProcessEnv: true // classic dfx / env vars detection
});
- Generate auth hooks:
// authHooks.ts
import { createAuthHooks } from "@ic-reactor/react";
import { clientManager } from "./clientManager";
export const { useAuth, useUserPrincipal, useAgentState } = createAuthHooks(clientManager);
- In your component:
import { useAuth } from "./authHooks";
function LoginButton() {
const { login, logout, isAuthenticated, identity, isAuthenticating } = useAuth();
if (isAuthenticating) return <div>Signing in...</div>;
if (isAuthenticated) {
return (
<div>
Welcome {identity?.getPrincipal().toText().slice(0, 8)}...!
<button onClick={logout}>Logout</button>
</div>
);
}
return (
<button
onClick={() => login({
// Default to `https://id.ai` For already live apps with legacy II users:
identityProvider: "https://id.ai/?feature_flag_guided_upgrade=true"
})}
>
Login with Internet Identity
</button>
);
}
The useAuth() call automatically:
- Restores existing session on mount
- Switches to authenticated agent
- Keeps TanStack Query in sync (invalidates on identity change)
Bonus mention: the new withCanisterEnv: true option (experimental) auto-detects your dev environment from the ic_env cookie when using modern @icp-sdk tools/icp-cli — super handy for seamless staging ↔ mainnet switching without manual host config. Just be cautious on localhost update calls for now.
Saves tons of boilerplate compared to raw actors.
Try it out during this II 2.0 wave — feedback very welcome!
Full announcement & docs: [v3 Beta Announcement] IC Reactor: The "Missing" Data-Fetching Library for Internet Computer
ClientManager ref: ClientManager | IC Reactor
Auth hooks overview: createAuthHooks | IC Reactor
Happy coding & smooth upgrades! 
