> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Clerk の統合
> Lovable アプリに Clerk を統合する方法を解説します
## なぜ Clerk なのか？
## ステップごとの連携ガイド
VIDEO
手順は次のとおりです。
Clerk アカウントを作成 → [Clerk.com](https://clerk.com)
Clerk のダッシュボードで新しいアプリを作成します
Clerk にサインインし、新しいアプリを作成します
利用したい認証プロバイダを有効化します（例: Google、GitHub）
**Configure > Restrictions** の「Waitlist」を有効にします
**Public API Key** をコピーします
**Clerk を Lovable アプリに追加する**
**Lovable** で、Clerk を認証プロバイダとして追加します。
Lovable へのプロンプト:
Asana のようなスタイルで、美しいプロジェクト・タスク管理アプリを作りましょう。ユーザーは、Clerk を使った認証とユーザー管理でログインとサインアップができるようにしてください。まずは見栄えの良いホームページを作成し、アプリの残りを構築している間は、ユーザーが参加できるように Clerk の waitlist コンポーネントを使いましょう。
指示されたら **Public API Key** を貼り付けます
Lovable がログインページとサインアップページを自動生成します
デプロイしてテストします — これで Clerk 認証が利用できるようになりました
**なぜウェイトリストを使うのか？** – アプリを公開する前に、初期ユーザーを集めましょう！
アプリ公開前のユーザーを集めるには、Clerk の組み込みウェイトリスト機能を使いましょう。
Clerk ダッシュボードで **Configure > Restrictions > Waitlist** に移動します
新規サインアップは **pending** として表示されます
* サインアップしたユーザーは **pending approval**（承認待ち）になります
* 管理者は Clerk ダッシュボードからユーザーを承認できます
ウェイトリスト用メール（ブランディングや内容）をカスタマイズします
アプリにチームベースのアクセスを設定します。
Clerk ダッシュボードで **Organizations** を有効にする
ロールを定義する（Admin、Member、Viewer など）
メールでユーザーを組織に招待する
ダッシュボードからロールと権限を割り当てる
Lovable に次の内容でプロンプトを送る:
サインアップ後に、ユーザーに組織を作成または参加するよう促す
**Clerk の User Profile コンポーネントを使う**
* あらかじめ用意されたユーザー管理ダッシュボードを提供
* ソーシャルログインおよびパスワード認証をサポート
* ユーザー自身でアカウントと 2FA を管理できる
**Impersonation Mode とは？**
管理者は任意のユーザーとしてログインし、問題の調査やトラブルシューティングができます
特定のユーザーになりきって、そのユーザーとしてアプリをトラブルシューティングできます。
Clerk ダッシュボード > Users で、対象のユーザーをクリックします
**Impersonate** をクリックします
そのユーザーの視点からアプリを確認します
セキュリティ: Impersonation 中の管理者は、パスワード変更などの機密性の高い操作は実行できません
Clerk Auth と Supabase バックエンドを組み合わせます。
**なぜ Supabase と連携するのか？**
* ユーザーデータをデータベースに保存する
* JWT トークンによるセキュアな認証
* 認証をアプリの機能と連携させる
**連携方法:**
Supabase で、**Settings > API > JWT Secret（**[**ドキュメント**](https://clerk.com/docs/integrations/databases/supabase)**）** に移動します。
Clerk で、**JWT Templates > Add Supabase** を開き、JWT シークレットを貼り付けます。
**Clerk を認証プロバイダーとして有効化**します。
RLS ポリシーを更新して、Clerk の `auth.uid()` を使用するようにします。
Lovable に次のプロンプトを入力します:
Clerk と連携するように Supabase をセットアップしましょう。Clerk には Supabase シークレットが設定済みです。ここに、Clerk を使った Supabase クライアント実装の例があります。これを参考にしてください。
*\[Supabase client configuration import]*
Clerk が発行したトークンが Supabase によって受け入れられることを確認します。
**なぜ独自ドメインを使うのか？**
ブランド認知と信頼性を高めるためです
[詳しくはこちら](https://docs.lovable.dev/tips-tricks/custom-domain)
Lovable 内で: **プロジェクト > Settings > Custom Domain**
購入したドメインを入力します（例: `app.yourcompany.com`）
Lovable が自動で DNS を設定します（Lovable から離れる必要はありません）
新しいドメインでアプリをデプロイしてテストします。
完了 ✅ — あなたのアプリはホワイトラベル対応になりました
**これであなたのアプリには、次の機能が備わりました：**
* 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](https://x.com/clerkdev?lang=en) をフォローしてください。
この FAQ に質問を追加してほしい場合は、[Discord でお知らせください](https://discord.gg/lovable-dev)。
## 最後に
Clerk は認証をプロンプトで完結させます。もう自分で実装する必要はありません。
**数回のクリックとプロンプトを入力するだけで、あなたのアプリには次のような機能が備わります：**
* 安全でスケーラブルな認証
* チームと組織の管理
* デバッグ用のなりすましツール
* Supabase を利用したデータおよびアクセス制御
* 洗練された UX のためのカスタムドメイン対応
[Clerk](https://clerk.com) は、認証とユーザー管理を代わりに処理してくれるので、ゼロから実装する必要がありません。いくつかのプロンプトと設定手順を踏むだけで、次のような機能がすぐに利用できます：
* セキュアなサインイン & サインアップ（ソーシャル、パスワード、MFA）
* 組み込み UI コンポーネント：ユーザープロフィール、組織管理、ユーザーなり替わり（impersonation）
* B2B アプリ向けのサポート（チーム、ロール、招待）
* Supabase、Stripe（近日対応予定）などとの連携
* 早期アクセスを管理するウェイトリストモード
* 充実した無料枠：10K MAUs（月間アクティブユーザー 1 万人）