컴포넌트
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 컴포넌트가 자동으로 다단계 흐름을 처리합니다:
1
사용자가 이메일 + 비밀번호 입력 (또는 OAuth 선택)2
6자리 코드가 포함된 인증 이메일 발송3
사용자가 코드를 입력하면 자동으로 로그인됨전용 회원가입 페이지
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>
);
}