clerk/clerk-nuxt-patterns

Was macht clerk-nuxt-patterns?

Nuxt 3 Auth-Patterns mit @clerk/nuxt – Middleware, Composables, Server-API-Routen, SSR. Auslöser: Nuxt Auth, useAuth Composables, clerkMiddleware Nuxt, Server-API Clerk, Nuxt Routenschutz.

Überblick

Diese Skill zeigt, wie man Clerk in eine Nuxt 3-Anwendung integriert. Sie umfasst:

• Middleware – Routenschutz auf Basis des Authentifizierungsstatus (clerkMiddleware).
• Composables – Verwendung von useAuth, useUser und useSession in Komponenten und Seiten.
• Server-API-Routen – Sichere API-Endpunkte mithilfe von getAuth() und clerkClient im server/api/-Verzeichnis.
• SSR – korrekte serverseitige Authentifizierung mit Cookietransfer.

Installation

npm install @clerk/nuxt

Füge @clerk/nuxt zur modules-Sektion in deiner nuxt.config.ts hinzu:

export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  runtimeConfig: {
    public: {
      clerk: {
        publishableKey: process.env.NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY
      }
    }
  }
})

Middleware (Route Protection)

Erstelle eine Middleware-Datei, z. B. middleware/auth.global.ts:

export default defineNuxtRouteMiddleware(async (to, from) => {
  const { isSignedIn } = useAuth()
  if (!isSignedIn.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})

Oder verwende die clerkMiddleware auf einer Seite:

// pages/admin.vue
definePageMeta({
  middleware: 'auth'
})

Composables

useAuth() – Gibt den Authentifizierungsstatus zurück:

const { isSignedIn, userId, sessionId, signOut } = useAuth()

useUser() – Gibt Benutzerdetails zurück:

const { user } = useUser()

Server API Routes

In server/api/protected.ts:

import { getAuth } from '@clerk/nuxt/server'

export default defineEventHandler(async (event) => {
  const { userId } = getAuth(event)
  if (!userId) {
    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
  }
  return { message: `Hallo, Benutzer ${userId}!` }
})

SSR (Server-Side Rendering)

Clerk Nuxt unterstützt SSR automatisch, indem es das Sitzungscookie bei serverseitigen Anfragen liest. Stelle sicher, dass dein runtimeConfig.public.clerk korrekt gesetzt ist.

Webhooks (empfohlen)

Verwende Clerk-Webhooks, um Benutzerereignisse serverseitig zu verarbeiten (z. B. in server/api/webhooks/clerk.ts).

Referenzen

• Clerk Nuxt Documentation
• Clerk Nuxt GitHub