clerk-nuxt-patterns

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.

45stars3forksUpdated 6/5/2026

Security #nuxt3 #authentication #middleware #ssr #clerk #javascript

Security Assessment

Medium Risk(65/100)

Detected risks:

Secret Exposure([references/ssr-auth.md] token =)

Sensitive File Access([SKILL.md] .env, [references/nuxt-middleware.md] .env)

Security Score65/100

About clerk-nuxt-patterns

The `clerk-nuxt-patterns` skill provides a structured approach to integrating authentication into Nuxt 3 applications using the `@clerk/nuxt` package. It addresses common challenges developers face when implementing secure user authentication, including route protection, server-side API authentication, and SSR-safe patterns. By centralizing these patterns, it simplifies the process of adding authentication and ensures consistent, secure handling of user sessions across client and server contexts.

Key features of this skill include middleware-based route protection, composables for reactive client-side user state (`useAuth` and `useUser`), and server API authentication via Nitro routes using `clerkClient`. It also supports SSR-safe authentication patterns, allowing developers to manage user state seamlessly during server-side rendering. The skill provides auto-imported components and composables, eliminating the need for explicit imports in `<script setup>`, and includes organization-aware patterns for B2B scenarios, allowing conditional rendering based on organization membership and roles.

This skill is ideal for developers building Nuxt 3 applications that require robust authentication and user management. It supports scenarios such as protecting dashboards, implementing organization-specific views, and securing server API endpoints. Target users include front-end developers seeking a simplified and standardized authentication workflow, full-stack developers managing SSR and API authentication, and teams aiming for scalable, maintainable authentication patterns in Nuxt 3 projects.

FAQ

How do I protect a page route using `clerk-nuxt-patterns`?

You can protect routes by using the built-in middleware. Add `definePageMeta({ middleware: 'auth' })` in your page's `<script setup>` section to enable route protection.

Can I use `useAuth` in server-side code?

No, `useAuth` is client-only. For server routes, you should use `event.context.auth` inside Nitro server routes to access authentication information.

What environment variables are required for this skill?

You need `NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY` for public client usage and `NUXT_CLERK_SECRET_KEY` for server authentication. Make sure to use the `NUXT_PUBLIC_` prefix for variables accessible on the client.

Does `clerk-nuxt-patterns` support SSR?

Yes, it provides SSR-safe authentication patterns. You should handle rendering with `<ClientOnly>` or check the `isLoaded` state to avoid hydration mismatches.