Authdog
Console

Vue

Last updated Jul 11, 2026
View as Markdown

The @authdog/vue SDK adds authentication to Vue 3 and Nuxt apps: a provider component, a set of composables for the browser, and a server client for SSR. It reads the session Authdog issues and exposes the current user and their permissions.

Install

Bash
npm install @authdog/vue

Requires Vue ^3.5. The package ships three entry points: @authdog/vue (composables), @authdog/vue/client (provider), and @authdog/vue/server (SSR).

Wrap your app

Every composable reads from AuthdogProvider, so mount it at the root:

Vue
<script setup lang="ts">
import { AuthdogProvider } from "@authdog/vue/client"
</script>

<template>
  <AuthdogProvider>
    <YourApp />
  </AuthdogProvider>
</template>

On load the provider reads the ?token= appended by the sign-in redirect, validates it, persists the session, and strips it from the URL.

Composables

  • useUser() — { user, isLoading, error, isAuthenticated, fetchUser(publicKey) }
  • useSession() — { session, isLoading } where session is { token, isAuthenticated }
  • useSignIn() — { signIn(publicKey, redirectUrl?), isLoading, error }
  • useSignUp(), useSignOut() — { signOut, isLoading, error }
  • useOrganization(), useOrganizationList() — the caller's tenants
  • useAuthz() — { permissions, hasPermission, hasAnyPermission, hasAllPermissions, ... }

useUser().fetchUser(publicKey) and useSignIn().signIn(publicKey, ...) take your environment's public key (pk_...) explicitly:

Vue
<script setup lang="ts">
import { onMounted } from "vue"
import { useUser } from "@authdog/vue"

const { user, isLoading, fetchUser } = useUser()
onMounted(() => fetchUser(import.meta.env.VITE_AUTHDOG_PUBLIC_KEY))
</script>

Server-side sessions

For SSR and API routes, createAuthdogServer reads and verifies the session on the server — this is the real enforcement point:

TypeScript
import { createAuthdogServer } from "@authdog/vue/server"

const authdog = createAuthdogServer({
  publicKey: process.env.AUTHDOG_PUBLIC_KEY!,
  secretKey: process.env.AUTHDOG_SECRET_KEY!,
})

// authdog.getSession(request), authdog.logout(request)

Composables and the provider are UX conveniences; treat the server session check as the security boundary, and pair it with your authorization model.

Next steps