Card de autenticação
Os fornecedores sentam- se sob o formulário de e-mail e organizam três formas a partir do mesmo array: empilhadas com rótulos, em linha como ícones compactos ou espalhadas por colunas iguais. Passe a mídia para a divisão de duas colunas com arte. Um modo de verificação cobre o passo de código único. O formulário está descontrolado e entrega- lhe o seu FormData, de modo que envolve qualquer biblioteca de autenticação que já use.
Instalação
Você pode adicionar o bloco de cartão de autenticação usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add auth-cardUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Disposição
Ambos os layouts colocam os provedores após o formulário de e-mail, já que esse é o caminho ao redor do cartão. empilhado dá a cada provedor um botão de largura completa com o seu nome, que se adapta a uma página de entrada dedicada onde há espaço para soletrá-los. inline encolhe- os para quadrados só de ícones, compactos o suficiente para um modal ou um painel estreito e capazes de transportar mais provedores no mesmo espaço. Ambos leram o mesmo providers Array, então trocar é um suporte.
{/* Stacked: full-width buttons with labels, under the form */}<AuthCard layout="stacked" providers={["google", "apple", "github"]} />
{/* Inline: icon-only squares, under the form */}<AuthCard layout="inline" providers={["google", "apple", "github", "x", "figma", "slack"]}/>
{/* Grid: icon-only buttons across equal columns */}<AuthCard layout="grid" providers={["apple", "google", "figma"]} />Dividir com obras de arte
Passando media transforma a carta numa divisão de duas colunas: o formulário à esquerda, o que quer que a entregue à direita. É a forma para uma página de inscrição dedicada, onde há espaço para obras de arte e os campos extras que a acompanham. Abaixo md a mídia é largada em vez de empilhada, uma vez que uma imagem alta acima dos campos empurra o formulário de uma tela de telefone para nenhum ganho.
media toma qualquer nó, então uma única imagem ou um vídeo funciona. AuthMediaCarousel envia ao lado do cartão para o caso comum: entregar-lhe uma lista de imagens e cruza-se entre eles por conta própria, mantendo-se no primeiro abaixo prefers-reduced-motion. Ele não oferece flechas de propósito — arte ao lado de uma forma de sinal é atmosfera, e controles convidam o visitante para longe do que eles vieram fazer.
Três opções normalmente viajam com ele: centered para o título, confirmarPasseword para emparelhar os dois campos de senha em uma linha, e footnote para impressão pequena que se senta sob o cartão em vez de aglomerar o CTA. Os provedores usam layout="grid", que espalha botões somente de ícones em colunas iguais para que eles leiam como uma linha de controles.
Ao clicar em Continuar, você concorda com nossos Termos de Serviço e Política de Privacidade.
import { AuthMediaCarousel } from "@/components/application/auth/auth-media-carousel";
<AuthCard mode="signup" layout="grid" centered confirmPassword providers={["apple", "google", "figma"]} footnote="By clicking continue, you agree to our Terms of Service and Privacy Policy." media={ <AuthMediaCarousel slides={[ { src: "/art/one.webp" }, { src: "/art/two.webp" }, { src: "/art/three.webp" }, { src: "/art/four.webp" }, ]} /> }/>
{/* Any node works — a single image, a video, a gradient */}<AuthCard media={<img src="/art/one.webp" alt="" className="size-full object-cover" />} />Com logotipo
logo coloca uma marca acima do título, seguindo centered para o seu alinhamento. Ele leva um nó em vez de um caminho de imagem de propósito: o cartão permanece agnóstico da marca, de modo que uma cópia instalada não carrega nenhuma das obras de arte da BoardUI e cai em seu próprio. A demonstração passa o crachá Pro animado.
{/* logo takes a node, so it is your mark, not a src the card owns */}<AuthCard centered logo={<ProLogoMark scale={40 / 56} animated />} title="Sign in to BoardUI Pro" description="Your license unlocks every Pro component and template."/>
{/* Left-aligned when centered is off */}<AuthCard mode="signup" logo={<AppLogo className="size-10" />} />Assine e inscreva-se
mode muda a cópia e os campos. signin Lembra-te de mim e de um elo de password esquecido; signup adiciona um campo de nome e a linha de termos, e deixa cair os dois controles que só fazem sentido em uma visita de retorno.
<AuthCard mode="signin" /> {/* Welcome back, remember me, forgot password */}<AuthCard mode="signup" /> {/* Adds a name field and the terms line */}Código de verificação
mode="verify" é o passo depois de entrar ou subir: as caixas OTP substituem os campos de e-mail e senha, uma ação de reenviar substitui o link para o outro modo, e os provedores desaparecem completamente, uma vez que quem estiver olhando para isso já escolheu como eles se inscrevem. Ele mantém a mesma forma alinhada com a esquerda que os outros dois modos, de modo que o passo lê como parte do mesmo fluxo, e toma uma marca de e-mail por padrão, que logo Ativações.
Passar e-mail para indicar o endereço na descrição, e onComplete para agir no momento em que o último dígito pousa em vez de esperar pelo botão.
<AuthCard mode="verify" email="mertcan@boardui.com" codeLength={6} onComplete={(code) => verifyCode(code)} onResend={() => resend()}/>
{/* Four boxes instead of six */}<AuthCard mode="verify" email={email} codeLength={4} />Fornecedores
Qualquer uma das 24 marcas do botão social, na ordem que você listá-las. Eles usam o delineado white aparência, que é o que mostra a marca multicolor de cada provedor: uma pilha de preenchimentos de marca saturada compete consigo mesmo e não faz nenhuma opção legível.
{/* Any of the 24 social button brands, in any order */}<AuthCard providers={["google", "microsoft", "okta"]} />
{/* Email only: pass an empty array and the divider disappears with it */}<AuthCard providers={[]} />Ligar.
O cartão é o shell, não uma opinião sobre autenticação. O formulário está descontrolado e onSubmit dá-lhe a sua FormData, enquanto onProvider fogos com a marca que foi clicada, então ambos vão diretamente para NextAuth, Clerk, Supabase ou seu próprio endpoint.
<AuthCard mode="signup" // The form is uncontrolled; you get its FormData on submit. onSubmit={(data) => { const email = data.get("email"); const password = data.get("password"); // ...hand these to your auth library }} onProvider={(provider) => signIn(provider)} switchHref="/sign-in"/>