组件

SignIn

处理邮箱/密码认证和 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" />

属性

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

自定义

品牌名称和 Logo
主渐变颜色
卡片背景色
圆角半径
OAuth 登录方式排序