@authon/nuxt

English | 한국어

@authon/nuxt

Drop-in Nuxt 3 authentication with plugin, composables, and route middleware — self-hosted Clerk alternative, Auth0 alternative

Prerequisites

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

• 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.)

• Get your API keys from Project Settings → API Keys

  • Publishable Key (pk_live_... or pk_test_...) — safe to use in client-side code
  • Secret Key (sk_live_... or sk_test_...) — server-side only, never expose to clients

• 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/nuxt

Quick Start

// plugins/authon.client.ts
import { createAuthonPlugin } from '@authon/nuxt';

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  const authon = createAuthonPlugin(config.public.authonKey, {
    apiUrl: config.public.authonApiUrl,
    theme: 'auto',
  });
  return { provide: { authon } };
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      authonKey: process.env.NUXT_PUBLIC_AUTHON_KEY,
      authonApiUrl: process.env.NUXT_PUBLIC_AUTHON_API_URL,
    },
  },
});

<!-- pages/index.vue -->
<script setup lang="ts">
const { $authon } = useNuxtApp();
const { client, isSignedIn, user } = $authon;
</script>

<template>
  <div v-if="isSignedIn">
    <p>Welcome, {{ user?.displayName }}</p>
    <button @click="client.signOut()">Sign out</button>
  </div>
  <div v-else>
    <button @click="client.openSignIn()">Sign in</button>
  </div>
</template>

Common Tasks

Add Google OAuth Login

<script setup lang="ts">
const { $authon } = useNuxtApp();

async function signInWithGoogle() {
  await $authon.client.signInWithOAuth('google');
}
</script>

<template>
  <button @click="signInWithGoogle">Sign in with Google</button>
</template>

Protect a Route

// middleware/auth.ts
import { createAuthMiddleware } from '@authon/nuxt';

export default defineNuxtRouteMiddleware((to, from) => {
  const { $authon } = useNuxtApp();
  return createAuthMiddleware($authon, '/sign-in')(to, from);
});

<!-- pages/dashboard.vue -->
<script setup>
definePageMeta({ middleware: 'auth' });
const { $authon } = useNuxtApp();
</script>

<template>
  <h1>Welcome, {{ $authon.user?.displayName }}</h1>
</template>

Get Current User

<script setup lang="ts">
const { $authon } = useNuxtApp();
const { user, isLoading } = $authon;
</script>

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

Add Email/Password Auth

<script setup lang="ts">
import { ref } from 'vue';
const { $authon } = useNuxtApp();
const email = ref('');
const password = ref('');

async function handleSignIn() {
  await $authon.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">
const { $authon } = useNuxtApp();
</script>

<template>
  <button @click="$authon.client.signOut()">Sign Out</button>
</template>

Environment Variables

Variable	Required	Description
NUXT_PUBLIC_AUTHON_API_URL	Yes	Your Authon server URL
NUXT_PUBLIC_AUTHON_KEY	Yes	Project publishable key

API Reference

Plugin

Function	Returns
createAuthonPlugin(key, config?)	AuthonPluginState { client, user, isSignedIn, isLoading }
createAuthMiddleware(authon, redirectTo?)	Route middleware function
renderSocialButtons(options)	Cleanup function

Composables

Composable	Returns
useAuthon()	AuthonPluginState (access via useNuxtApp().$authon in practice)
useUser()	{ user, isLoading }
useAuthonWeb3()	Web3 wallet auth
useAuthonPasswordless()	Magic link and OTP
useAuthonPasskeys()	Passkey registration and auth

Comparison

Feature	Authon	Clerk	Auth.js
Self-hosted	Yes	No	Partial
Pricing	Free	$25/mo+	Free
OAuth providers	10+	20+	80+
Nuxt 3 module	Yes	No	Via Sidebase
MFA/Passkeys	Yes	Yes	Plugin
Web3 auth	Yes	No	No

License

MIT