All skills
clerk avatar

/clerk-nuxt-patterns

@ca5e365 official
by clerkclerk/skills83 stars
5

Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.

Use this Skill: https://skilld.dev/gh/clerk/skills/clerk-nuxt-patterns

This session only. Nothing lands on disk.

referencesserver-api-routes.md

≈406 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Server API Routes (HIGH)

Auth Context in Nitro

event.context.auth is automatically populated by @clerk/nuxt for all server routes.

// server/api/me.get.ts
export default defineEventHandler(async (event) => {
  const { userId } = event.context.auth ?? {}

  if (!userId) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }

  return { userId }
})

Using clerkClient

Import clerkClient from @clerk/nuxt/server to access the Clerk backend API:

// server/api/user.get.ts
import { clerkClient } from '@clerk/nuxt/server'

export default defineEventHandler(async (event) => {
  const { userId } = event.context.auth ?? {}

  if (!userId) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }

  const user = await clerkClient(event).users.getUser(userId)

  return {
    id: user.id,
    firstName: user.firstName,
    email: user.emailAddresses[0]?.emailAddress,
  }
})

Org-Scoped Server Routes

// server/api/projects.get.ts
export default defineEventHandler(async (event) => {
  const { userId, orgId } = event.context.auth ?? {}

  if (!userId) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }

  if (!orgId) {
    throw createError({ statusCode: 403, message: 'No active organization' })
  }

  const projects = await db.projects.findMany({ where: { orgId } })
  return projects
})

Error Codes

  • 401 — not authenticated (no valid session)
  • 403 — authenticated but no permission (wrong role, no org)

Docs

Source: SKILL.md on GitHub

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides legitimate Nuxt 3 authentication patterns using the official Clerk SDK. All code snippets, configurations, and dependencies follow established best practices for secure application development.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at ca5e365. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 6 months ago
What it can do
Network
metadata
{
  "author": "clerk",
  "version": "1.0.0"
}
All 1 allowed tools
WebFetch
  • Nuxt
  • Auth
  • clerk
  • authentication
  • middleware
  • ssr
  • composables
  • nitro

README badge

README badge for clerk/skills/clerk-nuxt-patterns

Provides Nuxt 3 patterns for Clerk authentication, covering route protection with middleware, server API routes via Nitro, and client-side composables like useAuth and useUser. Includes SSR-safe patterns and organization-aware auth flows using @clerk/nuxt.

Generated from the current SKILL.md.

Does this skill work with Nuxt 3?
Yes. The skill covers Nuxt 3 patterns specifically, including auto-imports, composables, and the Nitro server runtime.
How do I protect routes from unauthenticated users?
Add `definePageMeta({ middleware: 'auth' })` to your page component. The `@clerk/nuxt` module auto-registers the auth middleware.
Can I use useAuth in server API routes?
No. useAuth is client-only. Use `event.context.auth` in Nitro server routes instead, or import `clerkClient` from `@clerk/nuxt/server`.
What causes hydration mismatches with auth state?
Rendering auth state before the component mounts. Fix this by wrapping sensitive content in `<ClientOnly>` or checking `isLoaded` before rendering.
How do I set up environment variables?
Use `NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY` for the public key and `NUXT_CLERK_SECRET_KEY` for the secret key in your `.env` file.

Generated from the current SKILL.md. These answers refresh after source changes.