컴포넌트

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 제공자 순서