Clerk Hello World

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

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.