Skill Gallery
← スキル一覧に戻る
jeremylongshore

clerk-install-auth

by jeremylongshore

clerk-install-authは、システム間の統合と連携を実現するスキルです。APIとデータの統合により、シームレスな情報フローと業務効率の向上をサポートします。

⭐ 1,042🍴 135📅 2026年1月23日
aiautomationclaude-codedevopsmarketplacemcppluginsproductivity
GitHubで見るManusで実行

SKILL.md

name: clerk-install-auth description: | 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". allowed-tools: Read, Write, Edit, Bash(npm:), Bash(pnpm:), Grep version: 1.0.0 license: MIT author: Jeremy Longshore jeremy@intentsolutions.io

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

ErrorCauseSolution
Invalid API KeyIncorrect or mismatched keysVerify keys in Clerk dashboard match environment
ClerkProvider MissingSDK used outside providerWrap app root with ClerkProvider
Middleware Not RunningMatcher misconfiguredCheck matcher regex in middleware.ts
Module Not FoundInstallation failedRun 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.

スコア

総合スコア

85/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
○説明文

100文字以上の説明がある

0/10
✓人気

GitHub Stars 1000以上

+15
✓最近の活動

3ヶ月以内に更新

+5
✓フォーク

10回以上フォークされている

+5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

レビュー

💬

レビュー機能は近日公開予定です