コンポーネント

SignUp

メール/パスワードとOAuthプロバイダーによるユーザー登録を処理する事前構築済みサインアップコンポーネント。必要に応じてメール認証フローを表示。

使い方

tsx

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

// Popup mode
<SignUp mode="popup" />

// Inline mode
<SignUp mode="inline" afterSignUpUrl="/onboarding" />

Props

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

登録フロー

プロジェクト設定でメール認証を有効にした場合、SignUpコンポーネントは自動的に複数ステップのフローを処理します：

ユーザーがメール + パスワードを入力（またはOAuthを選択）

6桁コード付きの認証メールを送信

ユーザーがコードを入力すると自動的にサインイン

専用サインアップページ

app/sign-up/page.tsx

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

export default function SignUpPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignUp
        mode="inline"
        afterSignUpUrl="/onboarding"
      />
    </div>
  );
}