createAuthHooks

createAuthHooks is a factory function that creates React hooks for managing Internet Identity authentication. The hooks are bound to a specific ClientManager instance.

Import

import { createAuthHooks } from "@ic-reactor/react"

Usage

import { createAuthHooks } from "@ic-reactor/react"
import { clientManager } from "./reactor"

const { useAuth, useUserPrincipal, useAgentState } =
  createAuthHooks(clientManager)

Parameters

Parameter	Type	Description
clientManager	ClientManager	The ClientManager instance to bind to

Return Value

createAuthHooks returns an object containing:

Property	Type	Description
useAuth	Hook	Main hook for auth actions and state
useUserPrincipal	Hook	Current user’s Principal
useAgentState	Hook	Agent initialization state

Complete Example

src/reactor/index.ts

import { ClientManager } from "@ic-reactor/core"
import { QueryClient } from "@tanstack/query-core"

export const queryClient = new QueryClient()

export const clientManager = new ClientManager({
  queryClient,
  withProcessEnv: true,
})

src/reactor/hooks.ts

import { createAuthHooks } from "@ic-reactor/react"
import { clientManager } from "./index"

export const { useAuth, useUserPrincipal, useAgentState } =
  createAuthHooks(clientManager)

src/App.tsx

import { useAgentState } from "./reactor/hooks"
import { QueryClientProvider } from "@tanstack/react-query"
import { queryClient } from "./reactor"

function App() {
  const { isInitializing, error } = useAgentState()

  if (isInitializing) return <LoadingScreen />
  if (error) return <ErrorScreen error={error} />

  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  )
}

Notes

Note

All actors using the same ClientManager share authentication state. When the user logs in or out, queries are automatically invalidated.

Tip

The @icp-sdk/auth package is dynamically imported only when login() is called, keeping your bundle size small if auth isn’t used.

See Also

• Authentication Guide — In-depth auth patterns
• useAuth — Main auth hook reference
• createActorHooks — Creating actor hooks
• React Setup — Complete React configuration