reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/brandapp-ui/Sign In With Reopt Button
Auth Buttonbrandapp-ui 예제

Sign In With Reopt Button

Reopt OAuth 로그인 트리거 버튼. 실패 시 useToast로 에러 메시지를 노출하고, 진행 중에는 Spinner + pendingLabel을 렌더합니다.

authoauthbutton
opt surface add sign-in-with-reopt-button
SignInWithReoptButton
1024px

Success path

클릭 시 1.4초 pending을 시뮬레이션하고 성공 토스트를 띄웁니다. 실제 환경에서는 브라우저가 Reopt OAuth 엔드포인트로 리다이렉트됩니다.

Error path

OAuth 클라이언트가 비활성/오타인 경우 useToast로 에러 메시지가 노출됩니다. 버튼은 idle 상태로 복귀합니다.

실제 Surface는 @/lib/auth-client의 signInWithReopt(callbackURL)을 호출합니다. 이 데모는 네트워크 왕복을 setTimeout으로 대체한 로컬 시뮬레이션입니다.

관련 예제

brandapp-ui

BrandApp Control Center

brandapp-ui - Control

Examples
createReoptEavClientcreateReoptTermsClient
brandapp-ui

Reopt User Menu

brandapp-ui - User Menu

Examples
ReoptUserMenu
brandapp-ui

Session Expired Dialog

brandapp-ui - Session Modal

Examples
SessionExpiredDialog
이전BrandApp Control Center다음Reopt User Menu