SDK

Vue SDK

@authon/vue — Authon 인증을 위한 Vue 3 플러그인, 컴포저블, 컴포넌트. Composition API와 <script setup>.

npm: @authon/vueVue 3+TypeScript

설치

bash

npm install @authon/vue

플러그인 설정

앱 진입점 파일에 Authon Vue 플러그인을 등록하세요. 이렇게 하면 모든 파일에서 임포트하지 않고도 모든 컴포저블과 컴포넌트를 전역으로 사용할 수 있습니다.

src/main.ts

import { createApp } from "vue";
import { AuthonPlugin } from "@authon/vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router);
app.use(AuthonPlugin, {
  publishableKey: "pk_live_your_publishable_key",

  // Optional — override API base URL
  apiUrl: "https:1

  2
  theme: "auto",

  3
  locale: "en",
});

app.mount("#app");

컴포저블

useAuthon()

인증 액션을 위한 기본 컴포저블. 반응형 refs와 비동기 메서드를 반환합니다.

components/Header.vue

<template>
  <header>
    <nav v-if="!isLoading">
      <template v-if="isSignedIn">
        <span>Hello, {{ user?.displayName }}</span>
        <button @click="signOut">Sign out</button>
      </template>
      <template v-else>
        <button @click="openSignIn">Sign in</button>
        <button @click="openSignUp">Sign up</button>
      </template>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { useAuthon } from "@authon/vue";

const {
  isSignedIn,
  isLoading,
  user,
  openSignIn,
  openSignUp,
  signOut,
  getToken,
} = useAuthon();
</script>

useUser()

사용자 데이터 읽기에 집중한 컴포저블. 프로필 정보만 표시하는 컴포넌트에서 유용합니다.

<template>
  <div v-if="!isLoading && user" class="profile">
    <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="user.displayName ?? 0" />
    <h2>{{ user.displayName }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup lang="ts">
import { useUser } from "@authon/vue";

const { user, isLoading } = useUser();
</script>

컴포넌트

플러그인 설치 시 모든 Authon Vue 컴포넌트가 전역으로 등록됩니다. 이름 충돌을 방지하기 위해 Authon 접두사가 붙습니다.

AuthonSignedIn / AuthonSignedOut

인증 상태에 따라 슬롯 콘텐츠를 표시하거나 숨기는 조건부 래퍼.

App.vue

<template>
  <div>
    <AuthonSignedIn>
      <!-- Rendered only when user is signed in -->
      <Dashboard />
      <AuthonUserButton />
    </AuthonSignedIn>

    <AuthonSignedOut>
      <!-- Rendered only when user is NOT signed in -->
      <LandingPage />
    </AuthonSignedOut>
  </div>
</template>

<template>
  <div>
    <!-- Popup mode — opens modal on mount -->
    <AuthonSignIn mode="popup" />
    <AuthonSignUp mode="popup" />

    <!-- Embedded mode — renders inline form container -->
    <AuthonSignIn mode="embedded" />
  </div>
</template>

AuthonUserButton

로그아웃 드롭다운이 있는 드롭인 아바타 버튼. 사용자가 로그인하지 않은 경우 아무것도 렌더링하지 않습니다.

<template>
  <header class="app-header">
    <AppLogo />
    <AuthonUserButton />
  </header>
</template>

라우터 가드

authonGuard 로 인증이 필요한 라우트를 보호하세요. meta.requiresAuth:

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import { authonGuard } from "@authon/vue";
import Home from "@/views/Home.vue";
import Dashboard from "@/views/Dashboard.vue";
import Settings from "@/views/Settings.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/dashboard",
      component: Dashboard,
      meta: { requiresAuth: true },
    },
    {
      path: "/settings",
      component: Settings,
      meta: { requiresAuth: true },
    },
  ],
});

// Redirect to /sign-in when meta.requiresAuth is true and user is not signed in
router.beforeEach(authonGuard({ signInPath: "/sign-in" }));

export default router;

토큰 사용

getToken() 의 useAuthon() 로 API 요청에 JWT를 첨부하세요:

<script setup lang="ts">
import { useAuthon } from "@authon/vue";
import { ref, onMounted } from "vue";

const { getToken } = useAuthon();
const items = ref([]);

onMounted(async () => {
  const token = getToken();
  const res = await fetch("/api/items", {
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    },
  });
  items.value = await res.json();
});
</script>