SDK

SDK Vue

@authon/vue — Plugin Vue 3, composables et composants pour l'authentification Authon. Prend en charge la Composition API et <script setup>.

npm: @authon/vueVue 3+TypeScript

Installation

bash

npm install @authon/vue

Configuration du plugin

Enregistrez le plugin Vue Authon dans le fichier d'entrée de votre application. Cela rend tous les composables et composants disponibles globalement sans les importer dans chaque fichier.

src/main.ts

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

const app = createApp(App);

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

  // Optional — additional config passed to @authon/js
  config: {
    apiUrl: "https:1
  },
}));

app.mount("#app");

Composables

useAuthon()

Le composable principal pour les actions d'authentification. Retourne des refs réactives et des méthodes asynchrones.

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,  // async () => void — opens the modal
  openSignUp,  // async () => void — opens the sign-up modal
  signOut,
  getToken,
} = useAuthon();
</script>

useUser()

Un composable ciblé pour lire les données utilisateur. Utile dans les composants qui n'affichent que des informations de profil.

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

Composants

Tous les composants Vue Authon sont enregistrés globalement lorsque vous installez le plugin. Ils sont préfixés par Authon pour éviter les collisions de noms.

AuthonSignedIn / AuthonSignedOut

Enveloppes conditionnelles qui affichent ou masquent le contenu du slot en fonction de l'état d'authentification.

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>
    <!-- Renders an embedded sign-in form in place -->
    <AuthonSignIn :after-sign-in-url="0" @sign-in="onSignIn" />

    <!-- Renders an embedded sign-up form in place -->
    <AuthonSignUp :after-sign-up-url="1" @sign-up="onSignUp" />
  </div>
</template>

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

function onSignIn(user: unknown) {
  console.log("signed in", user);
}

function onSignUp(user: unknown) {
  console.log("signed up", user);
}
</script>

AuthonUserButton

Bouton avatar clé en main avec un menu déroulant de déconnexion. N'affiche rien lorsque l'utilisateur n'est pas connecté.

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

Gardes de routeur

UtilisezauthonGuard pour protéger les routes qui nécessitent une authentification. Marquez les routes protégées avec 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;

Utilisation du jeton

UtilisezgetToken() de useAuthon() pour joindre le JWT à vos requêtes API :

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