@logi-auth/button-svelte

Svelte 용 "Sign in with logi" 버튼 컴포넌트. @logi-auth/browser 위에 얹은 얇은 UI 래퍼입니다.

설치

npm i @logi-auth/button-svelte @logi-auth/browser

svelte(>=4), @logi-auth/browser(^1.0.0)는 peerDependency 입니다. 프로젝트에 이미 설치되어 있어야 합니다.

사용 예제

clientId / redirectUri 로 바로 사용

<script lang="ts">
  import { LogiAuthButton } from "@logi-auth/button-svelte";

  function onError(err: unknown) {
    console.error("logi 로그인 실패", err);
  }
</script>

<LogiAuthButton
  clientId="logi_xxx"
  redirectUri={window.location.origin + "/auth/callback"}
  {onError}
/>

기존 LogiAuth 인스턴스 재사용

콜백 처리(handleCallback)에도 같은 인스턴스를 쓰는 경우, 인스턴스를 만들어 auth prop 으로 넘기세요.

<script lang="ts">
  import { LogiAuth } from "@logi-auth/browser";
  import { LogiAuthButton } from "@logi-auth/button-svelte";

  const auth = new LogiAuth({
    clientId: "logi_xxx",
    redirectUri: window.location.origin + "/auth/callback",
  });
</script>

<LogiAuthButton {auth} theme="dark" label="1pass로 로그인" />

Props

Prop	타입	필수	설명
auth	LogiAuth	auth 또는 (clientId+redirectUri) 중 하나	재사용할 LogiAuth 인스턴스
clientId	string	〃	OAuth client_id (developer portal 발급)
redirectUri	string	〃	등록된 redirect_uri
scopes	string[]	아니오	기본 scope 오버라이드
returnTo	string	아니오	콜백에서 복원할 임의 값
prompt	"none" | "login" | "consent" | "select_account"	아니오	OIDC prompt 파라미터
theme	"light" | "dark"	아니오	버튼 테마 (기본 "light")
label	string	아니오	버튼 텍스트 (기본 "logi로 계속하기")
disabled	boolean	아니오	버튼 비활성화
onError	(error: unknown) => void	아니오	signIn() 실패 시 호출 (sessionStorage 불가 환경 포함)

콜백 처리(handleCallback)는 이 컴포넌트의 책임이 아닙니다 — RP 앱의 /auth/callback 라우트에서 @logi-auth/browser를 직접 사용하세요.

빌드

npm install
npm run build  # dist/ 에 JS + LogiAuthButton.svelte + .svelte.d.ts 생성 (@sveltejs/package)
npm run check  # svelte-check