컴포넌트

UserButton

Name: Authon
Author: Authon

사용자 프로필과 로그아웃 버튼이 있는 드롭다운 메뉴를 표시하는 드롭인 사용자 아바타 버튼. 사용자가 로그인한 경우에만 렌더링됩니다.

사용법

tsx

import { UserButton } from "@authon/react";

// Drop into your header/navbar
function Header() {
  return (
    <nav>
      <UserButton />
    </nav>
  );
}

Props

Prop	타입	기본값	설명
afterSignOutUrl	string	provider default	로그아웃 후 리디렉션 URL
showName	boolean	false	아바타 옆에 사용자 이름 표시
size	"sm" \| "md" \| "lg"	"md"	아바타 버튼 크기

이름 표시

tsx

<UserButton showName afterSignOutUrl="/" />

아바타 표시

UserButton은 다음 우선순위로 사용자 아바타를 표시합니다:

1.OAuth 제공자의 프로필 사진 (Google, GitHub 등)
2.사용자가 업로드한 커스텀 아바타
3.표시 이름 기반으로 생성된 이니셜 아바타