@logi-auth/button-vue

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

설치

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

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

사용 예제

clientId / redirectUri 로 바로 사용

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

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

<template>
  <LogiAuthButton
    client-id="logi_xxx"
    :redirect-uri="window.location.origin + '/auth/callback'"
    :on-error="onError"
  />
</template>

기존 LogiAuth 인스턴스 재사용

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

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

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

<template>
  <LogiAuthButton :auth="auth" theme="dark" label="1pass로 로그인" />
</template>

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/ 에 ESM + CJS + .d.ts 생성 (vite build + vue-tsc)
npm run typecheck  # vue-tsc --noEmit