reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

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

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

© 2026 reopt-ai. All rights reserved.

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

Sign In With Reopt Button

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

A single CTA that kicks off the Reopt OAuth flow via authClient and surfaces errors through toasts.

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 Control
healthy

1,248

OAuth sessions

18

EAV entities

8,420

AI credits

3/4

Published terms

SDK verifierready

server-only clients · webhooks · terms

Controlbrandapp-ui

BrandApp Control Center

brandapp-sdk 인증, SDK verifier, OAuth secret rotation, EAV drift remediation, AI credit guard, webhook replay, 약관 publish 클라이언트를 한 화면에서 점검하는 운영 콘솔형 Surface입니다.

brandapp-sdkverifierautheavai+1
createReoptEavClientcreateReoptTermsClientcreateBrandappProviderSignInGate
열기
User Menubrandapp-ui

Reopt User Menu

세션 상태에 따라 Avatar + Dropdown(로그아웃) 또는 로그인 버튼을 렌더하는 사용자 메뉴. 로딩/비로그인/로그인 3-state 를 자동 분기합니다.

authsessiondropdownavatar
ReoptUserMenu
열기
Session Modalbrandapp-ui

Session Expired Dialog

한 번 로그인된 세션이 만료되거나 401 응답이 발생하면 전역 모달로 재로그인을 유도합니다. forceReauth=true 면 backdrop/ESC dismiss 가 비활성화됩니다.

authsessiondialogglobal
SessionExpiredDialogSESSION_EXPIRED_EVENT
열기
이전BrandApp Control Center다음Reopt User Menu