@econneq/auth-react

React integration for the Econneq Auth SDK — provider, hooks, guards, and Zustand stores.

Position in the install order

1. auth-core   ◄── prerequisite
2. auth-react  ◄── you are here
3. auth-ui     (depends on this)

Install @econneq/auth-core first — this package re-exports its types and routes runtime calls through its engines.

Install

npm install @econneq/auth-core @econneq/auth-react

Peer deps you must already have: react >=18, react-dom >=18.

Wire the provider once

// src/auth/provider.tsx
'use client'
import { AuthProvider } from '@econneq/auth-react'
import { defineAuthConfig } from '@econneq/auth-core'

const config = defineAuthConfig({
  apiBaseUrl: 'https://api.example.com',
  tenantMode: true,
})

export default function Providers({ children }: { children: React.ReactNode }) {
  return <AuthProvider config={config}>{children}</AuthProvider>
}

What you get

Hooks

• useAuth() — login, logout, current stage
• useSession() — user, tenant, tokens, isAuthenticated
• usePermission(perm), useAnyPermission(perms), useAllPermissions(perms), useRole(role)

Guards (client-side)

• <AuthGuard> — render only when authenticated, else fallback
• <TenantGuard> — require a selected tenant
• <PermissionGuard permission="…"> — gate by permission

Stores (advanced)

• useAuthStore, useTenantStore — direct Zustand access when hooks aren't granular enough

Example

'use client'
import { useAuth, useSession, AuthGuard } from '@econneq/auth-react'

export function Header() {
  const { logout } = useAuth()
  const { user }   = useSession()
  return (
    <AuthGuard fallback={<a href="/auth/login">Sign in</a>}>
      <div>Hi {user?.fullName} <button onClick={logout}>Logout</button></div>
    </AuthGuard>
  )
}

Build

npm run build      # tsup → dist
npm run typecheck
npm run dev        # tsup --watch

Notes

• 'use client' directive lives inside the package — safe to import from server components, but the hooks/guards run client-side.
• Zustand is bundled (not a peer dep) so versions don't clash with the host app.