---
title: "@xid-kit/react"
description: "Provider React 19, hooks, componentes de controle e blocos de construção de UI hospedada para aplicativos de clientes."
locale: "pt-BR"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/pt-br/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react

## Configuração do provedor

```tsx
import { XidProvider } from '@xid-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
<XidProvider publishableKey="pk_live_..." apiUrl="https://xid.dev">
  {children}
</XidProvider>
  )
}
```

## Hooks

| Hook | Retornos |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: XidUser \| null |
| `useSession` | isLoaded, isSignedIn, session: XidSession \| null |
| `useSessionList` | isLoaded, sessions, setActive para o alternador de múltiplas sessões |
| `useSignIn` | Auxiliares do fluxo de login do Hosted Auth |
| `useOrganization` | isLoaded, organization: XidOrganization \| null, membership |
| `useOrganizationList` | isLoaded, userMemberships para a interface do alternador de organização |
| `useAPIKeys` | Lista de chaves da Management API e ações para embeds do console |
| `useXidContext` | XidContextValue bruto (uso avançado; prefira os hooks tipados acima) |

## Componentes de controle

| Componente | Tipo de props | Finalidade |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | Renderiza os filhos apenas quando a sessão está carregada e autenticada |
| `SignedOut` | `SignedOutProps` | Renderiza os filhos apenas quando carregado e não autenticado |
| `Protect` | `ProtectProps` | Controle de permissão e papel com interface de fallback opcional |
| `XidLoaded` | `XidLoadedProps` | Renderiza os filhos após a conclusão da hidratação do SDK (isLoaded true) |
| `XidLoading` | `XidLoadingProps` | Renderiza os filhos enquanto o SDK ainda está carregando (isLoaded false) |
| `XidFailed` | `XidFailedProps` | Renderiza os filhos quando o carregamento do SDK falha com um erro irrecuperável (status error) |
| `XidDegraded` | `XidDegradedProps` | Renderiza os filhos quando o SDK está carregado mas em estado degradado (status degraded) |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | Manipulador de callback de redirecionamento OAuth: recarrega o estado da sessao e redireciona para afterSignInUrl ou invoca onSuccess |
| `RedirectToSignIn` | `RedirectToSignInProps` | Monta e redireciona imediatamente para a página de login |
| `RedirectToSignUp` | `RedirectToSignUpProps` | Monta e redireciona imediatamente para a página de cadastro |
| `RedirectToUserProfile` | `RedirectToUserProfileProps` | Monta e redireciona imediatamente para a página de perfil do usuário |
| `RedirectToOrganizationProfile` | `RedirectToOrganizationProfileProps` | Monta e redireciona imediatamente para a página de perfil da organização |
| `RedirectToCreateOrganization` | `RedirectToCreateOrganizationProps` | Monta e redireciona imediatamente para a página de criação de organização |
| `SignInButton` | `SignInButtonProps` | Botão sem estilo que navega para a URL de login ao clicar |
| `SignUpButton` | `SignUpButtonProps` | Botão sem estilo que navega para a URL de cadastro ao clicar |
| `SignOutButton` | `SignOutButtonProps` | Botão sem estilo que chama signOut ao clicar |

## Componentes de interface

| Componente | Uso |
| --- | --- |
| `SignIn` | Painel de login incorporado (Hosted Auth) |
| `SignUp` | Painel de cadastro incorporado |
| `UserAvatar` | Imagem de avatar do usuário com iniciais de fallback |
| `UserButton` | Menu de avatar com troca de sessão e saída |
| `UserProfile` | Segurança da conta e gerenciamento de perfil |
| `OrganizationSwitcher` | Seletor de organização ativa |
| `OrganizationProfile` | Embed de administração de membros, papéis e SSO |
| `CreateOrganization` | Fluxo de criação de organização |
| `OrganizationList` | Lista de organizações do usuário para a interface de alternância |

## Ainda não implementado

Os itens a seguir estão no roadmap público, mas não são exportados pelo pacote atual. Não assuma disponibilidade nesta versão.

| Símbolo | Compromisso de design |
| --- | --- |
| `GoogleOneTap` | Embed de login com um toque |
| `Waitlist` | Componente de controle de acesso para lista de espera |
| Componentes de cobrança | Embeds de gerenciamento de uso e plano |
| `useReverification` | Hook de autenticação step-up |

## Aparência

Passe `appearance` para `XidProvider` para substituir variáveis CSS em embeds de white-label. Todas as strings visíveis ao usuário usam descritores de runtime do Lingui; os tipos `Appearance`, `AppearanceVariables` e `AppearanceElements` são exportados para substituições tipadas.

Source: https://xid.dev/pt-br/sdks/react/index.mdx