Clerk Install & Auth

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

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

• Clerk Documentation
• Clerk Dashboard
• Clerk Status

Next Steps

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