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 }) # HTTP 401 Unauthorized }
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.