> ## 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.

# Integração com Clerk

> Aprenda como integrar o Clerk ao seu aplicativo Lovable

<div id="why-clerk">
  ## Por que usar o Clerk?
</div>

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/what-is-clerk.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=fbdaff4ce1fd8ffdc791bc1a9306a37f" alt="What Is Clerk Pn" width="2648" height="1272" data-path="images/what-is-clerk.png" />

[Clerk](https://clerk.com) cuida de autenticação e gerenciamento de usuários para que você não precise desenvolver isso do zero. Com apenas alguns Prompts de IA e etapas de configuração, você obtém:

* Login e cadastro seguros (social, senha, MFA)
* Componentes de UI prontos: perfis de usuário, gerenciamento de organizações, assumir a identidade de usuários
* Suporte para apps B2B (equipes, funções, convites)
* Integração com Supabase, Stripe (em breve) e mais
* Modo de lista de espera para gerenciar acesso antecipado
* Plano gratuito generoso: 10 mil MAUs

<div id="step-by-step-integration-guide">
  ## Guia passo a passo de integração
</div>

<iframe width="100%" height="315" src="https://www.youtube.com/embed/tyAsNwu_xCI?si=VHCGf2IlFRQzVLeD" title="Reprodutor de vídeo do YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

Confira o guia passo a passo:

<Steps>
  <Step title="Configurar seu app Clerk" stepNumber="1">
    <Steps>
      <Step title="Etapa 1">
        Crie uma conta na Clerk → [Clerk.com](https://clerk.com)
      </Step>

      <Step title="Etapa 2">
        No painel da Clerk, crie um novo app

        <Steps>
          <Step title="Etapa 1">
            Acesse sua conta na Clerk & crie um novo app

            <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/create-clerk-application.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=3eb11dfb0f3f85b0b6b6b49bb14b9add" alt="Criar aplicação Clerk Pn" width="1840" height="1048" data-path="images/create-clerk-application.png" />
          </Step>

          <Step title="Etapa 2">
            Ative os provedores de autenticação desejados (por exemplo, Google, GitHub)
          </Step>

          <Step title="Etapa 3">
            Ative “Waitlist” em **Configure > Restrictions**

            <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-waitlist.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=0dbc9a96b783c89dea49cc40e6c26baf" alt="Clerk Waitlist Pn" width="1838" height="1026" data-path="images/clerk-waitlist.png" />
          </Step>

          <Step title="Etapa 4">
            Copie sua **chave de API pública**

            <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-api-key.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=4b100e07e88809bfebdc636c799d445a" alt="Clerk Api Key Pn" width="1840" height="1028" data-path="images/clerk-api-key.png" />
          </Step>
        </Steps>
      </Step>

      <Step title="Etapa 3">
        **Adicione Clerk ao seu app Lovable**

        <Steps>
          <Step title="Etapa 1">
            No **Lovable**, adicione Clerk como seu provedor de autenticação.

            Prompt de IA para o Lovable:

            <Info>
              Vamos criar um ótimo aplicativo de gestão de projetos e tarefas no estilo do Asana. Os usuários devem conseguir fazer login e se cadastrar usando Clerk para autenticação e gerenciamento de usuários. Vamos começar construindo uma ótima página inicial e usar o componente de lista de espera (waitlist) do Clerk para permitir que os usuários entrem enquanto construímos o restante do app.
            </Info>

            <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/asana-clone-lovable.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=779eedc11c2ad10d0fa6151f937e31ac" alt="Asana Clone Lovable Pn" width="1830" height="1024" data-path="images/asana-clone-lovable.png" />
          </Step>

          <Step title="Etapa 2">
            Cole sua **chave de API pública** quando for solicitado
          </Step>

          <Step title="Etapa 3">
            O Lovable cria a estrutura das páginas de login e cadastro

            <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/waitlist-component-clerk.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=76350e4c4aabb03f8d73ada79c99c6c4" alt="Componente Waitlist Clerk Pn" width="1830" height="1016" data-path="images/waitlist-component-clerk.png" />
          </Step>

          <Step title="Etapa 4">
            Publique & teste — agora você está usando autenticação com Clerk
          </Step>
        </Steps>
      </Step>
    </Steps>
  </Step>

  <Step title="Ativar o modo Lista de Espera (opcional)" stepNumber="2">
    <Note>
      **Por que usar uma lista de espera?** – Reúna primeiros usuários antes de lançar seu app!
    </Note>

    Use a lista de espera nativa do Clerk para coletar usuários antes do lançamento.

    <Steps>
      <Step title="Passo 1">
        No dashboard do Clerk: **Configure > Restrictions > Waitlist**
      </Step>

      <Step title="Passo 2">
        Novos cadastros serão exibidos como **pending**
      </Step>

      <Step title="Passo 3">
        * Usuários que se cadastrarem agora ficarão **pending approval**
        * Administradores podem aprovar usuários pelo dashboard do Clerk

                  <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-waitlist-pending.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=b1cb4e017c6696f2170d48e643819c37" alt="Clerk Waitlist Pending Pn" width="1836" height="1024" data-path="images/clerk-waitlist-pending.png" />
      </Step>

      <Step title="Passo 4 (Bônus)">
        Personalize os e-mails da lista de espera (branding, conteúdo)

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-email-templates.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=5283305d887e73b091f90f38de79222c" alt="Clerk Email Templates Pn" width="1838" height="1026" data-path="images/clerk-email-templates.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/sms-code-verification.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=c8864119b5019a606848a5ec3314f35f" alt="Sms Code Verification Pn" width="1820" height="1016" data-path="images/sms-code-verification.png" />
      </Step>
    </Steps>
  </Step>

  <Step title="Gerenciar usuários e equipes no Clerk" stepNumber="3">
    Configure o acesso por equipe no seu app.

    <Steps>
      <Step title="Passo 1">
        No dashboard do Clerk: ative **Organizations**

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/organization-management-clerk.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=dee1358df6209650a4e64f09270f9075" alt="Organization Management Clerk Pn" width="1834" height="1010" data-path="images/organization-management-clerk.png" />
      </Step>

      <Step title="Passo 2">
        Defina funções (Admin, Member, Viewer, etc.)
      </Step>

      <Step title="Passo 3">
        Convide usuários para a sua organização por e-mail
      </Step>

      <Step title="Passo 4">
        Atribua funções e permissões pelo dashboard
      </Step>

      <Step title="Passo 5">
        Use um Prompt de IA no Lovable para:

        <Info>
          Pedir para os usuários criarem/entrarem em uma organização após o cadastro
        </Info>

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-organization-create.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=d73b6ac4b451427dd6d5745679331f59" alt="Clerk Organization Create Pn" width="584" height="748" data-path="images/clerk-organization-create.png" />
      </Step>
    </Steps>

    <Note>
      **Usando o componente User Profile do Clerk**

      * Fornece um dashboard de gerenciamento de usuários pronto para uso
      * Oferece suporte a logins sociais e autenticação por senha
      * Usuários podem gerenciar suas próprias contas e autenticação em duas etapas (2FA)

              <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/clerk-organization-members.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=219f9a2976ea8de50adce5d6beb0e779" alt="Clerk Organization Members Pn" width="1832" height="1016" data-path="images/clerk-organization-members.png" />
    </Note>
  </Step>

  <Step title="Modo de representação (para administradores)" stepNumber="4">
    <Tip>
      **O que é o Modo de Personificação?**

      Administradores podem fazer login como qualquer usuário para solucionar problemas
    </Tip>

    Solucione problemas do seu app como se você fosse um usuário específico.

    <Steps>
      <Step title="Step 1">
        No dashboard do Clerk, em Users, clique em um usuário
      </Step>

      <Step title="Step 2">
        Clique em **Impersonate**
      </Step>

      <Step title="Step 3">
        Veja seu app a partir da perspectiva desse usuário
      </Step>

      <Step title="Step 4">
        Segurança: quem está personificando um usuário não pode executar ações sensíveis (por exemplo, alterar a senha)
      </Step>
    </Steps>
  </Step>

  <Step title="Integrar ao Supabase (avançado)" stepNumber="5">
    Combine a autenticação do Clerk com o backend do Supabase.

    <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/supabase-clerk.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=099ac332afdc631e19a074357aa1d909" alt="Supabase Clerk Pn" width="640" height="748" data-path="images/supabase-clerk.png" />

    <Note>
      **Por que integrar com o Supabase?**

      * Armazenar dados de usuário em um banco de dados
      * Autenticação segura com tokens JWT
      * Conectar a autenticação aos recursos do app
    </Note>

    **Como integrar:**

    <Steps>
      <Step title="Etapa 1">
        No Supabase, vá para **Settings > API > JWT Secret (**[**documentation**](https://clerk.com/docs/integrations/databases/supabase)**)**

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/supabase-clerk-integration-doc.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=4c1b798ebc7906a678616e2c56048bb2" alt="Supabase Clerk Integration Doc Pn" width="1585" height="1180" data-path="images/supabase-clerk-integration-doc.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/sql-editor-supabase.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=639f9464df1fbf406c91d6fd2d408bd8" alt="Sql Editor Supabase Pn" width="1832" height="1046" data-path="images/sql-editor-supabase.png" />
      </Step>

      <Step title="Etapa 2">
        No Clerk: **JWT Templates > Add Supabase**, cole o segredo JWT

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/Supabase-api-key-clerk.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=6ffb7d603fffe943419234209130d04e" alt="Supabase Api Key Clerk Pn" width="1670" height="1034" data-path="images/Supabase-api-key-clerk.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/jwt-template-clerk.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=5be5b5dd4b216455362ab2b6c8e5542a" alt="Jwt Template Clerk Pn" width="1838" height="1014" data-path="images/jwt-template-clerk.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/jwt-template-clerk-configuration.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=f0364188f00ba2f836cee7cf5b46282f" alt="Jwt Template Clerk Configuration Pn" width="1834" height="1028" data-path="images/jwt-template-clerk-configuration.png" />
      </Step>

      <Step title="Etapa 3">
        Ative o **Clerk como provedor de autenticação**

        Atualize as políticas RLS para usar `auth.uid()` do Clerk

        No Lovable, use este Prompt de IA:

        <Info>
          Vamos configurar o Supabase para integrar com o Clerk. O Clerk foi configurado com um segredo do Supabase. Aqui está um exemplo de implementação do cliente Supabase usando o Clerk. Use isto como referência.

          *\[Importar configuração do cliente Supabase]*
        </Info>
      </Step>

      <Step title="Etapa 4">
        Confirme que os tokens emitidos pelo Clerk são aceitos pelo Supabase

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/supabase-tasks-table.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=161f00d83acbb33f24220fbd3ccff779" alt="Supabase Tasks Table Pn" width="778" height="382" data-path="images/supabase-tasks-table.png" />
      </Step>
    </Steps>
  </Step>

  <Step title="Adicionar um domínio personalizado (opcional)" stepNumber="6">
    <Note>
      **Por que usar um domínio personalizado?**

      Aumenta o reconhecimento e a confiança na marca

      [Mais informações aqui](https://docs.lovable.dev/tips-tricks/custom-domain).
    </Note>

    <Steps>
      <Step title="Etapa 1">
        No Lovable: **Projeto > Configurações > Domínio personalizado**
      </Step>

      <Step title="Etapa 2">
        Insira o domínio que você comprou (por exemplo, `app.yourcompany.com`)
      </Step>

      <Step title="Etapa 3">
        O Lovable configura automaticamente o DNS (sem precisar sair do Lovable)
      </Step>

      <Step title="Etapa 4">
        Publique e teste seu app com o novo domínio.
      </Step>

      <Step title="Etapa 5">
        Pronto ✅ — seu app agora é white-label
      </Step>
    </Steps>
  </Step>

  <Step title="Considerações finais e próximos passos" stepNumber="7">
    **Seu app agora tem:**

    * Autenticação segura com Clerk
    * Uma lista de espera para coletar primeiros usuários
    * Recursos de gerenciamento de usuários e equipes
    * Integração com o banco de dados Supabase
    * Um domínio personalizado profissional
  </Step>
</Steps>

<div id="bonus-build-b2b-features-in-minutes">
  ## Bônus: construa recursos B2B em minutos
</div>

Clerk oferece:

* Acesso baseado em funções para organizações
* Fluxos de convite (por e-mail, UI pré-pronta)
* Personalização do perfil da organização (logo, nome)
* Troca entre múltiplas organizações (por exemplo, no estilo do Slack)

**Peça ao Lovable para:**

<Info>
  Adicionar uma interface de troca de organização
</Info>

<Info>
  Permitir que os usuários convidem colegas de equipe
</Info>

<div id="tips-troubleshooting">
  ## Dicas e solução de problemas
</div>

* **Já usa Supabase Auth?** Você pode alternar para o Clerk sem precisar reescrever a lógica do seu app. Basta configurar o JWT corretamente e trocar o provedor de autenticação.
* **Personalização de e‑mail:** O Clerk permite que você edite todos os modelos de e‑mails transacionais (lista de espera, convites, aprovações).
* **Login em dispositivos móveis**: O Clerk é compatível com passkeys, OTP e SMS — nenhuma configuração extra é necessária no Dev Mode.
* **Conformidade**: O Clerk está em conformidade com SOC2, HIPAA e GDPR.

<div id="frequently-asked-questions-faq">
  ## Perguntas frequentes (FAQ)
</div>

<AccordionGroup>
  <Accordion title="Posso mudar do Supabase Auth para o Clerk com facilidade?">
    Sim. Clerk e Supabase funcionam bem juntos. Você só precisa:

    * Configurar o Clerk para emitir JWTs
    * Adicionar o segredo JWT do Supabase no Clerk
    * Atualizar as políticas RLS do Supabase para usar o `auth.uid()` do Clerk

    Isso permite conectar o Clerk a um app existente baseado em Supabase com mudanças mínimas.
  </Accordion>

  <Accordion title="Preciso configurar provedores OAuth como Google ou GitHub?">
    Só para produção. No modo de desenvolvimento, o Clerk fornece credenciais compartilhadas para testes. Para produção:

    * Configure suas próprias credenciais de Google/GitHub/etc.
    * Adicione-as no Clerk em **OAuth settings**
  </Accordion>

  <Accordion title="Qual é a diferença entre Organizations e Users?">
    * **Users**: Indivíduos que podem fazer login no seu app
    * **Organizations**: Grupos de usuários (times, empresas)

    Use organizations quando você quiser:

    * Acesso baseado em função (Admin, Member, etc.)
    * Que usuários convidem colegas de equipe
    * Fluxos no estilo SaaS B2B
  </Accordion>

  <Accordion title="O que é &#x22;Impersonation Mode&#x22;?">
    Ele permite que administradores façam login como qualquer usuário — muito útil para:

    * Depurar problemas de usuários
    * Entender a experiência deles
    * Fornecer suporte em tempo real

    <Note>
      O Clerk limita o que quem está em modo de impersonação pode fazer (por exemplo, não é possível alterar senhas).
    </Note>
  </Accordion>

  <Accordion title="Posso personalizar os componentes de UI do Clerk?">
    Sim. O Clerk oferece:

    * Suporte completo a CSS via props `appearance`
    * A opção de criar UIs totalmente personalizadas usando hooks React do Clerk

    Você pode manter o visual pronto para uso ou combinar totalmente com a identidade visual do seu app.
  </Accordion>

  <Accordion title="Posso enviar e-mails para usuários da minha waitlist a partir do Clerk?">
    Atualmente:

    * Usuários são notificados automaticamente quando são aprovados na lista de espera
    * O suporte a e-mails em massa está **chegando em breve**

    Por enquanto, exporte os e-mails e use sua ferramenta de e-mail preferida.
  </Accordion>

  <Accordion title="O Clerk é gratuito para usar?">
    Sim! O Clerk tem um plano gratuito generoso:

    * Até **10.000 usuários ativos mensais (MAUs)**
    * Planos pagos a partir de **US\$ 25/mês**, com cobrança baseada em uso depois disso

    Você pode usá-lo em produção sem pagar até ganhar escala.
  </Accordion>

  <Accordion title="O Clerk oferece suporte à conformidade (SOC2, HIPAA, GDPR)?">
    Sim. O Clerk é:

    * **Certificado SOC 2**
    * **Compatível com HIPAA**
    * **Pronto para GDPR**

    Ideal para times que constroem em setores regulados.
  </Accordion>

  <Accordion title="Posso usar o Clerk com o Stripe para cobrança?">
    Em breve. Você poderá:

    * Definir planos (por exemplo, Free, Pro, Enterprise)
    * Permitir que usuários/orgs gerenciem assinaturas pela UI do Clerk
    * Sincronizar dados automaticamente com o Stripe

    Siga [@clerkdev](https://x.com/clerkdev?lang=en) no X para novidades.
  </Accordion>
</AccordionGroup>

Quer adicionar uma pergunta a este FAQ? [Fale com a gente no Discord](https://discord.gg/lovable-dev)!

<div id="final-thoughts">
  ## Considerações finais
</div>

Clerk transforma a autenticação em um Prompt de IA. Você não precisa desenvolver isso por conta própria.

**Com apenas alguns cliques e instruções, seu app agora tem:**

* Autenticação segura e escalável
* Gestão de equipes e organizações
* Ferramentas de impersonação para depuração
* Dados e controle de acesso com Supabase
* Suporte a domínio personalizado para uma experiência do usuário mais profissional