nuxt-clerk-utils

nuxt-clerk-utils

Clerk module that builds on top of vue-clerk

Features

• Server middleware based on h3-clerk
• Utilities for handling clerk webhooks

Requirements

This module only works with SSR (server-side rendering) enabled as it uses server API routes. You cannot use this module with nuxt generate.

Quick Setup

• Add nuxt-clerk-utils

# Using pnpm
pnpm add -D nuxt-clerk-utils

# Using yarn
yarn add --dev nuxt-clerk-utils

# Using npm
npm install --save-dev nuxt-clerk-utils

• Add nuxt-clerk-utils to nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-clerk-utils"],
});

Configuration

The following environment variables are required in order for this module to function correctly to be defined in your .env:

NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=".."
NUXT_CLERK_SECRET_KEY="..."

# Optional: Enable this if you want to handle clerk webhooks
NUXT_CLERK_WEBHOOK_SIGNING_SECRET=".."

Vue Composables

NOTE: All of the composables and components are re-exported from vue-clerk. See project documentation for usage

Server Utils

The following helpers are auto-imported in your server/ directory.

Session Management

// Get the current clerk session if it exists, null otherwise
const clerkSession = await getClerkSession(event);

// Require a clerk session (send back 401 if no `user` session exists)
const clerkSession = await requireClerkSession(event);

Webhooks

To work with webhooks, first create the webhook on the clerk dashboard, and define a handler for it in your app like so:

Note: You must provide the CLERK_WEBHOOK_SIGNING_SECRET env (see above)

When defining a webhook in this way, you can assume that the webhook is valid as its signature is automatically verified.

// server/routes/clerk.post.ts
export default defineClerkWebhook('user.created', ({ payload }) => {
  console.log('payload', payload)
})

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Prior art and acknowledgments

• nuxt-clerk
• nuxt-auth-utils