---
title: "@vonvon-kit/react"
description: "React 19 provider, hooks, control components, and hosted UI building blocks for customer applications."
locale: "en"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/react

## Provider setup

Registry status: UNPUBLISHED. Install this SDK only from the repository source checkout; do not use an external package registry.

```tsx
import { VonvonProvider } from '@vonvon-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
<VonvonProvider
  mode="oidc"
  issuer="https://vonvon.id"
  clientId="client_abc123"
  redirectUri="https://app.example.com/auth/callback"
>
  {children}
</VonvonProvider>
  )
}
```

## Hooks

| Hook | Returns |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: VonvonUser \| null |
| `useSession` | isLoaded, isSignedIn, session: VonvonSession \| null |
| `useSessionList` | isLoaded, sessions, setActive for multi-session switcher |
| `useSignIn` | Hosted Auth sign-in flow helpers |
| `useOrganization` | isLoaded, organization: VonvonOrganization \| null, membership |
| `useOrganizationList` | isLoaded, userMemberships for organization switcher UI |
| `useAPIKeys` | Management API key list and actions for console embeds |
| `useVonvonContext` | Raw VonvonContextValue (advanced use; prefer typed hooks above) |

## Control components

| Component | Props type | Purpose |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | Renders children only when the session is loaded and signed in |
| `SignedOut` | `SignedOutProps` | Renders children only when loaded and not signed in |
| `Protect` | `ProtectProps` | Permission and role gate with optional fallback UI |
| `VonvonLoaded` | `VonvonLoadedProps` | Renders children after SDK hydration completes (isLoaded true) |
| `VonvonLoading` | `VonvonLoadingProps` | Renders children while SDK is still loading (isLoaded false) |
| `VonvonFailed` | `VonvonFailedProps` | Renders children when SDK load fails with an unrecoverable error (status error) |
| `VonvonDegraded` | `VonvonDegradedProps` | Renders children when SDK is loaded but in degraded state (status degraded) |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | OAuth redirect callback handler: reloads session state and redirects to afterSignInUrl or calls onSuccess |
| `RedirectToSignIn` | `RedirectToSignInProps` | Mounts and immediately redirects to the sign-in page |
| `RedirectToSignUp` | `RedirectToSignUpProps` | Mounts and immediately redirects to the sign-up page |
| `RedirectToUserProfile` | `RedirectToUserProfileProps` | Mounts and immediately redirects to the user profile page |
| `RedirectToOrganizationProfile` | `RedirectToOrganizationProfileProps` | Mounts and immediately redirects to the organization profile page |
| `RedirectToCreateOrganization` | `RedirectToCreateOrganizationProps` | Mounts and immediately redirects to the create organization page |
| `SignInButton` | `SignInButtonProps` | Unstyled button that navigates to the sign-in URL on click |
| `SignUpButton` | `SignUpButtonProps` | Unstyled button that navigates to the sign-up URL on click |
| `SignOutButton` | `SignOutButtonProps` | Unstyled button that calls signOut on click |

## UI components

| Component | Use |
| --- | --- |
| `SignIn` | Embedded sign-in panel (Hosted Auth) |
| `SignUp` | Embedded sign-up panel |
| `UserAvatar` | User avatar image with fallback initials |
| `UserButton` | Avatar menu with session switch and sign-out |
| `UserProfile` | Account security and profile management |
| `OrganizationSwitcher` | Active org selector |
| `OrganizationProfile` | Members, roles, SSO admin embed |
| `CreateOrganization` | Org creation flow |
| `OrganizationList` | List of user organizations for switcher UI |

## Not yet implemented

The following are on the public roadmap but are not exported from the current package. Do not assume availability in this version.

| Symbol | Design commitment |
| --- | --- |
| `GoogleOneTap` | One-tap sign-in embed |
| `Waitlist` | Waitlist sign-up gate component |
| Billing components | Usage and plan management embeds |
| `useReverification` | Step-up authentication hook |

## Appearance

Pass `appearance` to prebuilt UI components such as `SignIn`, `UserProfile`, or `OrganizationSwitcher`, not to `VonvonProvider`. The exported Appearance types provide typed CSS-variable and element-class overrides; all visible copy uses Lingui runtime descriptors.

Source: https://vonvon.id/sdks/react/index.mdx