Clerk Hello World

Overview

Make your first authenticated request using Clerk to verify the integration works.

Prerequisites

• Clerk SDK installed (clerk-install-auth completed)
• Environment variables configured
• ClerkProvider wrapping application

Instructions

Step 1: Create Protected Page

// app/dashboard/page.tsx
import { auth, currentUser } from '@clerk/nextjs/server'

export default async function DashboardPage() {
  const { userId } = await auth()
  const user = await currentUser()

  if (!userId) {
    return <div>Please sign in to access this page</div>
  }

  return (
    <div>
      <h1>Hello, {user?.firstName || 'User'}!</h1>
      <p>Your user ID: {userId}</p>
      <p>Email: {user?.emailAddresses[0]?.emailAddress}</p>
    </div>
  )
}

Step 2: Create Protected API Route

// app/api/hello/route.ts
import { auth } from '@clerk/nextjs/server'

export async function GET() {
  const { userId } = await auth()

  if (!userId) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  return Response.json({
    message: 'Hello from Clerk!',
    userId,
    timestamp: new Date().toISOString()
  })
}

Step 3: Test Authentication Flow

// Client-side test component
'use client'
import { useUser, useAuth } from '@clerk/nextjs'

export function AuthTest() {
  const { user, isLoaded, isSignedIn } = useUser()
  const { getToken } = useAuth()

  if (!isLoaded) return <div>Loading...</div>
  if (!isSignedIn) return <div>Not signed in</div>

  const testAPI = async () => {
    const token = await getToken()
    const res = await fetch('/api/hello', {
      headers: { Authorization: `Bearer ${token}` }
    })
    console.log(await res.json())
  }

  return (
    <div>
      <p>Signed in as: {user.primaryEmailAddress?.emailAddress}</p>
      <button onClick={testAPI}>Test API</button>
    </div>
  )
}

Output

• Protected page showing user information
• API route returning authenticated user data
• Successful request/response verification

Error Handling

| Error | Cause | Solution | |-------|-------|----------| | userId is null | User not authenticated | Redirect to sign-in or check middleware | | currentUser returns null | Session expired | Refresh page or re-authenticate | | 401 Unauthorized | Token missing or invalid | Check Authorization header | | Hydration Error | Server/client mismatch | Use 'use client' for client hooks |

Examples

Using with React Hooks

'use client'
import { useUser, useClerk } from '@clerk/nextjs'

export function UserProfile() {
  const { user } = useUser()
  const { signOut } = useClerk()

  return (
    <div>
      <img src={user?.imageUrl} alt="Profile" />
      <h2>{user?.fullName}</h2>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  )
}

Express.js Example

import { clerkMiddleware, requireAuth } from '@clerk/express'

app.use(clerkMiddleware())

app.get('/api/protected', requireAuth(), (req, res) => {
  res.json({
    message: 'Hello!',
    userId: req.auth.userId
  })
})

Resources

• Clerk Auth Object
• Clerk Hooks
• Protected Routes

Next Steps

Proceed to clerk-local-dev-loop for local development workflow setup.