Skip to main content

​
なぜ Clerk なのか？

What Is Clerk Pn Clerk は、認証とユーザー管理を代わりに処理してくれるので、ゼロから実装する必要がありません。いくつかのプロンプトと設定手順を踏むだけで、次のような機能がすぐに利用できます：
  • セキュアなサインイン & サインアップ（ソーシャル、パスワード、MFA）
  • 組み込み UI コンポーネント：ユーザープロフィール、組織管理、ユーザーなり替わり（impersonation）
  • B2B アプリ向けのサポート（チーム、ロール、招待）
  • Supabase、Stripe（近日対応予定）などとの連携
  • 早期アクセスを管理するウェイトリストモード
  • 充実した無料枠：10K MAUs（月間アクティブユーザー 1 万人）

​
ステップごとの連携ガイド

手順は次のとおりです。
1

Clerk アプリのセットアップ

1

ステップ 1

Clerk アカウントを作成 → Clerk.com
2

ステップ 2

Clerk のダッシュボードで新しいアプリを作成します
1

ステップ 1

Clerk にサインインし、新しいアプリを作成しますCreate Clerk Application Pn
2

ステップ 2

利用したい認証プロバイダを有効化します（例: Google、GitHub）
3

ステップ 3

Configure > Restrictions の「Waitlist」を有効にしますClerk Waitlist Pn
4

ステップ 4

Public API Key をコピーしますClerk Api Key Pn
3

ステップ 3

Clerk を Lovable アプリに追加する
1

ステップ 1

Lovable で、Clerk を認証プロバイダとして追加します。Lovable へのプロンプト:
Asana のようなスタイルで、美しいプロジェクト・タスク管理アプリを作りましょう。ユーザーは、Clerk を使った認証とユーザー管理でログインとサインアップができるようにしてください。まずは見栄えの良いホームページを作成し、アプリの残りを構築している間は、ユーザーが参加できるように Clerk の waitlist コンポーネントを使いましょう。
Asana Clone Lovable Pn
2

ステップ 2

指示されたら Public API Key を貼り付けます
3

ステップ 3

Lovable がログインページとサインアップページを自動生成しますWaitlist Component Clerk Pn
4

ステップ 4

デプロイしてテストします — これで Clerk 認証が利用できるようになりました
2

ウェイトリストモードを有効にする（任意）

なぜウェイトリストを使うのか？ – アプリを公開する前に、初期ユーザーを集めましょう！
アプリ公開前のユーザーを集めるには、Clerk の組み込みウェイトリスト機能を使いましょう。
1

ステップ 1

Clerk ダッシュボードで Configure > Restrictions > Waitlist に移動します
2

ステップ 2

新規サインアップは pending として表示されます
3

ステップ 3

  • サインアップしたユーザーは pending approval（承認待ち）になります
  • 管理者は Clerk ダッシュボードからユーザーを承認できます Clerk ウェイトリストの保留状態 Pn
4

ステップ 4（ボーナス）

ウェイトリスト用メール（ブランディングや内容）をカスタマイズしますClerk メールテンプレート PnSMS コード認証 Pn
3

Clerk でのユーザーとチームの管理

アプリにチームベースのアクセスを設定します。
1

Step 1

Clerk ダッシュボードで Organizations を有効にするOrganization Management Clerk Pn
2

Step 2

ロールを定義する（Admin、Member、Viewer など）
3

Step 3

メールでユーザーを組織に招待する
4

Step 4

ダッシュボードからロールと権限を割り当てる
5

Step 5

Lovable に次の内容でプロンプトを送る:
サインアップ後に、ユーザーに組織を作成または参加するよう促す
Clerk Organization Create Pn
Clerk の User Profile コンポーネントを使う
  • あらかじめ用意されたユーザー管理ダッシュボードを提供
  • ソーシャルログインおよびパスワード認証をサポート
  • ユーザー自身でアカウントと 2FA を管理できる Clerk Organization Members Pn
4

代理ログインモード（管理者用）

Impersonation Mode とは？管理者は任意のユーザーとしてログインし、問題の調査やトラブルシューティングができます
特定のユーザーになりきって、そのユーザーとしてアプリをトラブルシューティングできます。
1

Step 1

Clerk ダッシュボード > Users で、対象のユーザーをクリックします
2

Step 2

Impersonate をクリックします
3

Step 3

そのユーザーの視点からアプリを確認します
4

Step 4

セキュリティ: Impersonation 中の管理者は、パスワード変更などの機密性の高い操作は実行できません
5

Supabase との連携（上級向け）

Clerk Auth と Supabase バックエンドを組み合わせます。Supabase Clerk Pn
なぜ Supabase と連携するのか？
  • ユーザーデータをデータベースに保存する
  • JWT トークンによるセキュアな認証
  • 認証をアプリの機能と連携させる
連携方法:
1

Step 1

Supabase で、Settings > API > JWT Secret（ドキュメント） に移動します。Supabase Clerk Integration Doc PnSql Editor Supabase Pn
2

Step 2

Clerk で、JWT Templates > Add Supabase を開き、JWT シークレットを貼り付けます。Supabase Api Key Clerk PnJwt Template Clerk PnJwt Template Clerk Configuration Pn
3

Step 3

Clerk を認証プロバイダーとして有効化します。RLS ポリシーを更新して、Clerk の auth.uid() を使用するようにします。Lovable に次のプロンプトを入力します:
Clerk と連携するように Supabase をセットアップしましょう。Clerk には Supabase シークレットが設定済みです。ここに、Clerk を使った Supabase クライアント実装の例があります。これを参考にしてください。[Supabase client configuration import]
4

Step 4

Clerk が発行したトークンが Supabase によって受け入れられることを確認します。Supabase Tasks Table Pn
6

カスタムドメインを追加（任意）

なぜ独自ドメインを使うのか？ブランド認知と信頼性を高めるためです詳しくはこちら
1

ステップ 1

Lovable 内で: プロジェクト > Settings > Custom Domain
2

ステップ 2

購入したドメインを入力します（例: app.yourcompany.com）
3

ステップ 3

Lovable が自動で DNS を設定します（Lovable から離れる必要はありません）
4

ステップ 4

新しいドメインでアプリをデプロイしてテストします。
5

ステップ 5

完了 ✅ — あなたのアプリはホワイトラベル対応になりました
7

まとめと今後のステップ

これであなたのアプリには、次の機能が備わりました：
  • Clerk を使ったセキュアな認証
  • 早期ユーザーを集めるためのウェイトリスト
  • ユーザーとチームの管理機能
  • Supabase データベース連携
  • プロフェッショナルな独自ドメイン

​
ボーナス: 数分で B2B 機能を構築する

Clerk は次の機能をサポートしています:
  • 組織向けロールベースのアクセス制御
  • 招待フロー（メールベース、事前構築済み UI）
  • 組織プロフィールのカスタマイズ（ロゴ、名前）
  • 複数組織の切り替え（例: Slack スタイル）
Lovable に次のように依頼してみましょう:
組織切り替え用 UI を追加する
ユーザーがチームメイトを招待できるようにする

​
ヒントとトラブルシューティング

  • すでに Supabase Auth を使っていますか？ アプリのロジックを書き直さずに Clerk に切り替えられます。JWT を正しく設定して、認証プロバイダーを入れ替えるだけです。
  • メールのカスタマイズ: Clerk では、すべてのトランザクションメールテンプレート（ウェイティングリスト、招待、承認）を編集できます。
  • モバイルログイン: Clerk はパスキー、OTP、SMS に対応しており、Dev モードでは追加の設定は不要です。
  • コンプライアンス: Clerk は SOC2、HIPAA、GDPR に準拠しています。

​
よくある質問（FAQ）

はい。Clerk と Supabase はうまく連携します。次の設定を行うだけです。
  • Clerk を設定して JWT を発行するようにする
  • Clerk に Supabase の JWT シークレットを追加する
  • Supabase の RLS ポリシーを、Clerk の auth.uid() を使うように更新する
これにより、既存の Supabase バックエンドのアプリに、最小限の変更で Clerk を組み込めます。
本番環境でのみ必要です。開発モードでは、Clerk がテスト用の共有クレデンシャルを提供します。本番環境では、次のことを行ってください。
  • 独自の Google / GitHub / その他のクレデンシャルを用意する
  • Clerk の OAuth settings に追加する
  • Users：あなたのアプリにログインできる個々のユーザー
  • Organizations：ユーザーのグループ（チーム、企業など）
次のような場合は Organizations を使いましょう。
  • ロールベースのアクセス（Admin、Member など）
  • ユーザーにチームメイトを招待してもらいたい場合
  • B2B SaaS 形式のフロー
管理者が任意のユーザーとしてログインできるモードです。次のような場面でとても役立ちます。
  • ユーザーの問題をデバッグする
  • ユーザーの体験を把握する
  • ライブサポートを提供する
Clerk は、インパーソネーション中の管理者ができることを制限しています（例：パスワードの変更は不可）。
はい。Clerk では次のことができます。
  • appearance プロップを使ったフル CSS 対応
  • Clerk の React hooks を使って、完全にカスタムな UI を構築するオプション
そのままの外観を使うことも、アプリのブランドに完全に合わせることもできます。
現時点では次の動作になります。
  • ウェイティングリストから承認されたユーザーには自動通知される
  • 一括メール送信のサポートは 近日対応予定
それまでは、メールアドレスをエクスポートして、お好みのメールツールを使用してください。
はい。Clerk には十分な無料枠があります。
  • 月間アクティブユーザー（MAU）10,000人 まで
  • 有料プランは $25/月 からで、その後は利用量に応じた課金
スケールするまでは、支払いなしで本番環境でも利用できます。
はい。Clerk は次のとおりです。
  • SOC 2 認証取得済み
  • HIPAA 準拠
  • GDPR 対応
規制産業向けのプロダクトを開発するチームに最適です。
近日対応予定です。次のことができるようになります。
  • プランの定義（例：Free、Pro、Enterprise）
  • Clerk の UI から、ユーザー / Organization にサブスクリプションを管理してもらう
  • Stripe にデータを自動同期する
最新情報は X で @clerkdev をフォローしてください。
この FAQ に質問を追加してほしい場合は、Discord でお知らせください。

​
最後に

Clerk は認証をプロンプトで完結させます。もう自分で実装する必要はありません。 数回のクリックとプロンプトを入力するだけで、あなたのアプリには次のような機能が備わります：
  • 安全でスケーラブルな認証
  • チームと組織の管理
  • デバッグ用のなりすましツール
  • Supabase を利用したデータおよびアクセス制御
  • 洗練された UX のためのカスタムドメイン対応