@geenius-auth/react

React hooks, headless components, and provider for Convex authentication. Built on @convex-dev/auth with shared types from @geenius-auth/shared.

Installation

pnpm add @geenius-auth/react @convex-dev/auth convex

Quick Start

// main.tsx
import { ConvexAuthProviderWrapper } from '@geenius-auth/react/provider'

<ConvexAuthProviderWrapper convexUrl={import.meta.env.VITE_CONVEX_URL}>
  <App />
</ConvexAuthProviderWrapper>

Hooks

useAuth()

Unified auth state and actions.

const { signIn, signUp, signOut, isAuthenticated, isLoading } = useAuth()

useRequireAuth(options?)

Redirect-based auth guard.

useRequireAuth({ redirectTo: '/signin' })

useAuthForm({ mode })

Form state management with validation.

const form = useAuthForm({ mode: 'signIn', onSuccess: () => navigate('/') })

Components

| Component | Description | |-----------|-------------| | SignInForm | Headless sign-in form with render prop | | SignUpForm | Headless sign-up form with password confirmation | | AuthGuard | Protected route wrapper | | UserMenu | User dropdown with sign-out |

Exports

| Entrypoint | Contents | |------------|----------| | @geenius-auth/react | Hooks + all components | | @geenius-auth/react/provider | ConvexAuthProviderWrapper | | @geenius-auth/react/components | Individual components |