组件

SignUp

处理邮箱/密码注册和 OAuth 登录方式的预构建注册组件。需要时自动显示邮箱验证流程。

使用

tsx

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

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

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

属性

属性	类型	默认值	描述
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>
  );
}