Clerk Install & Auth

clerk-install-auth

Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".

Dicklesworthstone/pi_agent_rust·0installs1.8Kstars

SKILL.md

Full skill instructions

Clerk Install & Auth

Overview

Set up Clerk SDK and configure authentication credentials for your application.

Prerequisites

Node.js 18+ (Next.js, React, Express, etc.)
Package manager (npm, pnpm, or yarn)
Clerk account with API access
Publishable and Secret keys from Clerk dashboard

Instructions

Step 1: Install SDK

# Next.js
npm install @clerk/nextjs

# React
npm install @clerk/clerk-react

# Express/Node.js
npm install @clerk/express

# Remix
npm install @clerk/remix

Step 2: Configure Environment Variables

# Create .env.local file
cat >> .env.local << 'EOF'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
EOF

Step 3: Add ClerkProvider (Next.js App Router)

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

Step 4: Add Middleware

// middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

Step 5: Verify Connection

import { auth } from '@clerk/nextjs/server'

export async function GET() {
  const { userId } = await auth()
  return Response.json({ authenticated: !!userId })
}

Output

Installed SDK package in node_modules
Environment variables configured in .env.local
ClerkProvider wrapping application
Middleware protecting routes

Error Handling

Error	Cause	Solution
Invalid API Key	Incorrect or mismatched keys	Verify keys in Clerk dashboard match environment
ClerkProvider Missing	SDK used outside provider	Wrap app root with ClerkProvider
Middleware Not Running	Matcher misconfigured	Check matcher regex in middleware.ts
Module Not Found	Installation failed	Run `npm install @clerk/nextjs` again

Examples

Next.js App Router Setup

// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

React SPA Setup

import { ClerkProvider } from '@clerk/clerk-react'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

function App() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <Router />
    </ClerkProvider>
  )
}

Resources

Next Steps

After successful auth, proceed to clerk-hello-world for your first authenticated request.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/Dicklesworthstone/pi_agent_rust --skill clerk-install-auth

View on GitHub

tests/ext_conformance/artifacts/plugins-community/plugins/saas-packs/clerk-pack/skills/clerk-install-auth/SKILL.md

deepgram-hello-world
Create a minimal working Deepgram transcription example. Use when starting a new Deepgram integration, testing your setup, or learning basic Deepgram API patterns. Trigger with phrases like "deepgram hello world", "deepgram example", "deepgram quick start", "simple transcription", "transcribe aud...
0 installs
interactive-shell
Cheat sheet + workflow for launching interactive coding-agent CLIs (Claude Code, Gemini CLI, Codex CLI, Cursor CLI, and pi itself) via the interactive_shell overlay or headless dispatch. Use for TUI agents and long-running processes that need supervision, fire-and-forget delegation, or headless b...
0 installs
documenso-prod-checklist
Execute Documenso production deployment checklist and rollback procedures. Use when deploying Documenso integrations to production, preparing for launch, or implementing go-live procedures. Trigger with phrases like "documenso production", "deploy documenso", "documenso go-live", "documenso launc...
0 installs
interactive-portfolio
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, sho...
0 installs