@authon/vue

English | 한국어

@authon/vue

Drop-in Vue 3 authentication with composables and components — Auth0 alternative

Prerequisites

Before installing the SDK, create an Authon project and get your API keys:

1. Create a project at Authon Dashboard

   • Click "Create Project" and enter your app name
   • Select the authentication methods you want (Email/Password, OAuth providers, etc.)

2. Get your API keys from Project Settings → API Keys

   • Publishable Key (pk_live_...) — use in your frontend code
   • Test Key (pk_test_...) — for development, enables Dev Teleport

3. Configure OAuth providers (optional) in Project Settings → OAuth

   • Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
   • Set the redirect URL to https://api.authon.dev/v1/auth/oauth/redirect

Test vs Live keys: Use pk_test_... during development. Switch to pk_live_... before deploying to production. Test keys use a sandbox environment with no rate limits.

Install

npm install @authon/vue

Quick Start

// src/main.ts
import { createApp } from 'vue';
import { createAuthon } from '@authon/vue';
import App from './App.vue';

const app = createApp(App);
app.use(createAuthon({
  publishableKey: 'pk_live_YOUR_PUBLISHABLE_KEY',
}));
app.mount('#app');

<!-- src/App.vue -->
<script setup lang="ts">
import { useAuthon, useUser, AuthonSignedIn, AuthonSignedOut, AuthonUserButton } from '@authon/vue';
const { openSignIn, signOut } = useAuthon();
const { user } = useUser();
</script>

<template>
  <AuthonSignedOut>
    <button @click="openSignIn()">Sign In</button>
  </AuthonSignedOut>
  <AuthonSignedIn>
    <p>Welcome, {{ user?.email }}</p>
    <AuthonUserButton />
    <button @click="signOut()">Sign Out</button>
  </AuthonSignedIn>
</template>

Common Tasks

Add Google OAuth Login

<script setup lang="ts">
import { useAuthon } from '@authon/vue';
const { client } = useAuthon();
</script>

<template>
  <button @click="client?.signInWithOAuth('google')">Sign in with Google</button>
</template>

Protect a Route

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('../views/Home.vue') },
    { path: '/dashboard', component: () => import('../views/Dashboard.vue'), meta: { requiresAuth: true } },
    { path: '/sign-in', component: () => import('../views/SignIn.vue') },
  ],
});

router.beforeEach((to, _from, next) => {
  if (to.meta.requiresAuth) {
    const authon = router.app?.config.globalProperties.$authon;
    if (!authon?.isSignedIn) return next({ path: '/sign-in', query: { redirect: to.fullPath } });
  }
  next();
});

export default router;

Get Current User

<script setup lang="ts">
import { useUser } from '@authon/vue';
const { user, isLoading } = useUser();
</script>

<template>
  <p v-if="isLoading">Loading...</p>
  <div v-else-if="user">
    <p>Email: {{ user.email }}</p>
    <p>Name: {{ user.displayName }}</p>
  </div>
  <p v-else>Not signed in</p>
</template>

Add Email/Password Auth

<script setup lang="ts">
import { ref } from 'vue';
import { useAuthon } from '@authon/vue';
const { client } = useAuthon();
const email = ref('');
const password = ref('');

async function handleSignIn() {
  await client?.signInWithEmail(email.value, password.value);
}
</script>

<template>
  <form @submit.prevent="handleSignIn">
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Sign In</button>
  </form>
</template>

Handle Sign Out

<script setup lang="ts">
import { useAuthon } from '@authon/vue';
const { signOut } = useAuthon();
</script>

<template>
  <button @click="signOut()">Sign Out</button>
</template>

Environment Variables

API Reference

Plugin

createAuthon({ publishableKey: string, config?: AuthonConfig })

Composables

Components

Comparison

License

MIT