@xid-kit/react

Provider React 19, hooks, componentes de controle e blocos de construção de UI hospedada para aplicativos de clientes.

Configuração do provedor

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.