Clerk Hello World

概要

Clerkを使用して初めての認証付きリクエストを作成し、統合が正常に機能していることを確認します。

前提条件

• Clerk SDKがインストール済み（clerk-install-authが完了）
• 環境変数が設定済み
• アプリケーションをClerkProviderでラップ

手順

ステップ 1: 保護されたページを作成

// 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>
  )
}

ステップ 2: 保護されたAPIルートを作成

// 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()
  })
}

ステップ 3: 認証フローをテスト

// 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>
  )
}

出力

• ユーザー情報を表示する保護されたページ
• 認証済みユーザーデータを返すAPIルート
• リクエスト/レスポンスの確認成功

エラーハンドリング

エラー	原因	解決策
userId is null	ユーザーが認証されていない	サインインページへリダイレクトするか、ミドルウェアを確認
currentUser returns null	セッションの有効期限切れ	ページを再読み込みするか、再認証
401 Unauthorized	トークンが欠落しているか無効	Authorizationヘッダーを確認
Hydration Error	サーバー/クライアントの不一致	クライアントフックに 'use client' を使用

例

Reactフックでの使用

'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の例

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

app.use(clerkMiddleware())

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

リソース

• Clerk Auth Object
• Clerk Hooks
• Protected Routes

次のステップ

ローカル開発ワークフローのセットアップについては、clerk-local-dev-loopに進んでください。