コンポーネント

SignIn

Name: Authon
Author: Authon

メール/パスワード認証とOAuthプロバイダーフローを処理する事前構築済みサインインコンポーネント。ポップアップとインラインモードに対応。

使い方

tsx

import { SignIn } from "@authon/react";

// Popup mode — triggers a modal on click
<SignIn mode="popup" />

// Inline mode — renders the form directly on the page
<SignIn mode="inline" />

Props

Prop	型	デフォルト	説明
mode	"popup" \| "inline"	"popup"	サインインUIの表示方法
afterSignInUrl	string	provider default	サインイン後のリダイレクトURL
className	string	—	トリガーボタンのCSSクラス（ポップアップモード）
children	ReactNode	"Sign in"	トリガーボタンの内容（ポップアップモード）

ポップアップモード

ポップアップモードはクリック時にサインインモーダルを開くボタンをレンダリングします。ボタンの外観をカスタマイズできます：

tsx

<SignIn mode="popup" className="my-custom-btn">
  Sign in to your account
</SignIn>

インラインモード

インラインモードはサインインフォームを直接レンダリングします。専用のサインインページに便利です：

app/sign-in/page.tsx

import { SignIn } from "@authon/react";

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-950">
      <SignIn
        mode="inline"
        afterSignInUrl="/dashboard"
      />
    </div>
  );
}

カスタマイズ

サインインUIはAuthonダッシュボード → Customizeタブのカスタマイズ設定を使用してスタイリングされます。以下を設定できます：

ブランド名とロゴ
プライマリグラデーションカラー
カード背景色
角の丸み
OAuthプロバイダーの順序