認証カード
サインインとサインアップブロックは、ソーシャルログインボタン上に構築されています。 プロバイダーはメールフォームの下に座り、同じ配列から3つの方法を配置します。 ラベルを積み重ね、コンパクトなアイコンとしてインラインにし、または同じ列を渡ってスプレッドします。 アートワークで2列の分割のためのメディアを渡す。 検証モードは、ワンタイムコードステップをカバーしています。 フォームは制御解除され、フォームデータを手渡すので、すでに使用しているすべてのauthライブラリをラップします。
インストール
auth カードブロックを CLI または手動で追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add auth-card共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
レイアウト
両方のレイアウトは、カードが構築されているパスであるため、メールフォームの後にプロバイダを置く。 スタッキング 各プロバイダにその名で全幅ボタンを与え、その名は、それらを綴る部屋がある専用のサインインページに適しています。 inline それらをアイコンのみの正方形に縮小し、モジュールや狭いパネルに十分なコンパクトで、同じスペースでより多くのプロバイダを運ぶことができます。 両方同じを読む providers 配列なので、スイッチングは1つのプロップです。
{/* 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"]} />アートワークのスプリット
渡る media カードを2列の分割に変えます。左のフォームは、右に渡します。それは、アートワークとそれに続く余分なフィールドのための部屋がある専用のサインアップページのための形です。以下 md の フィールドの上の背が高い画像が無利得のために電話画面をオフにするので、メディアはスタックよりも低下します。
media どのノードも撮るので、単一の画像やビデオ作品も撮れます。 AuthMediaCarousel 一般的なケースのカードと一緒に出荷:それを画像のリストに渡し、それ自身でそれらの間でクロスフェードし、最初に保持します。 prefers-reduced-motion。それは目的に矢印を提供しません - サインのフォームの横のアートワークは雰囲気であり、彼らは何をやってきたかから離れて訪問者を招待制御します。
3つのオプションは通常、それで旅行: centered 見出しのために、 confirmPassword 1行で2つのパスワードフィールドをペアリングし、 footnote CTAを混雑させるのではなく、カードの下に座っている小さなプリントのために。 プロバイダーは、 layout="grid"つまり、アイコンのみのボタンを同じ列に広げるので、コントロールの1列として読みます。
続行をクリックすると、サービス利用規約とプライバシーポリシーに同意します。
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" />} />ロゴを使って
logo タイトルの上のマークを置きます, 以下 centered そのアライメントのために。 それは目的のイメージパスではなく、ノードを取ります: カードは、ブランドアグノスティックを維持します。そのため、インストールされたコピーは、BoardUIのアートワークのどれもを運び、自分でドロップします。 デモは、アニメーションのProバッジを渡します。
{/* 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" />} />サインアップしてサインアップ
mode コピーとフィールドを切り替えます。 signin 私を思い出させ、忘れた言葉のリンクを運びます。 signup 名前フィールドと用語線を追加し、戻りの訪問に感心させる2つのコントロールをドロップします。
<AuthCard mode="signin" /> {/* Welcome back, remember me, forgot password */}<AuthCard mode="signup" /> {/* Adds a name field and the terms line */}認証コード
mode="verify" OTPボックスは、メールとパスワードのフィールドを交換し、残りのアクションは、リンクを他のモードに置き換え、プロバイダは完全に消えます。これはすでにサインインする方法を選択したので、これは完全に見ているからです。 これは、他の2つのモードと同じ左揃えの形状を保持しているので、ステップは同じフローの一部として読み、デフォルトでメールマークを取ります。 logo オーバーライド。
パス Eメール: 記述のアドレスを名前を付けるために、 onComplete ボタンを待つのではなく、最後の数字の土地を操作する。
<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} />プロバイダー
あなたがそれらをリストするために、ソーシャルボタンの24ブランドのいずれか。 彼らは概略を使用しています white 外観は、各プロバイダーの実際のマルチカラーマークを示すものです。飽和ブランドのスタックは、それ自体と競争し、単一のオプションが読みやすくなります。
{/* 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={[]} />接続方法
カードは、認証に関する意見ではなく、シェルです。フォームは制御されず、 onSubmit 手をつけて FormData, しばらくの間 onProvider クリックされたブランドで火を出すので、NextAuth、Clrk、Supabase、または独自のエンドポイントに直進します。
<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"/>