vue

---
name: vue
description: Add authdog browser auth state to a Vue 3 app with @authdog/vue — AuthdogProvider, useUser/useSession/useSignIn composables, and low-level cookie/logout helpers for Web Request objects. No Nuxt module. Use when the user asks to integrate authdog auth into a Vue 3 app.
---

# authdog for Vue

The `@authdog/vue` SDK adds browser authentication state to Vue 3 through a provider and composables. It also exposes low-level cookie/logout helpers for standard Web `Request` objects. It does not ship a Nuxt module or adapter.

## When to use this skill

The user wants to add "Sign in with authdog" (or authdog session handling) to a Vue 3 app (`^3.5`).

## What you need from the user first

Their authdog **public key** (`pk_...`). Several composables take it explicitly as an argument.

## Steps

### 1. Install

```bash
npm install @authdog/vue
```

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

### 2. 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 accepts a `?token=` only when it has three JWT-shaped segments, stores it in `localStorage`, strips it from the URL, and reloads. This regex is not signature, issuer, audience, or expiry validation. The real validation happens when `fetchUser()` calls Authdog userinfo.

### 3. Use the 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** 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>
```

### 4. Server helpers (Nuxt / SSR)

`createAuthdogServer` reads the raw `authdog-session` cookie and provides logout. It requires both keys, but currently has no server-side `getUser` method and does not validate the session:

```ts
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)
```

No cookie callback exchange is included. In Nuxt, build server integration explicitly: validate the bearer token with a [backend SDK](../express/SKILL.md), set an HttpOnly cookie if needed, and enforce [authorization](https://www.authdog.com/docs/concepts/authorization) in server routes. Treat provider/composable state and `getSession()` as untrusted input.

## Gotchas

- **No Nuxt module**: there is no Nuxt adapter. Wire server validation yourself with a backend SDK.
- **`createAuthdogServer` has no `getUser`**: it reads the raw cookie and exposes logout only; it does not validate the session. Don't use it as an authentication decision.
- **JWT-shape regex is not validation**: the provider stores `?token=` after a shape check only. Real validation happens at `fetchUser()` → userinfo.

## Next steps

- [Sign up & sign in](https://www.authdog.com/docs/authentication): the flows the provider drives.
- [Backend requests](https://www.authdog.com/docs/backend): validate sessions on your API.
- [Roles & permissions](https://www.authdog.com/docs/permissions): the data behind `useAuthz`.

More agent context in authdog/agent-skills

31 other files this repository gives its agents.