Integração com Clerk

Aprenda como integrar o Clerk ao seu aplicativo Lovable

​

Por que usar o Clerk?

Clerk 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

​

Guia passo a passo de integração

Confira o guia passo a passo:

1. Configurar seu app Clerk
2. Ativar o modo Lista de Espera (opcional)

   Por que usar uma lista de espera? – Reúna primeiros usuários antes de lançar seu app!

   Use a lista de espera nativa do Clerk para coletar usuários antes do lançamento.
3. Gerenciar usuários e equipes no Clerk

   Configure o acesso por equipe no seu app.
4. Modo de representação (para administradores)

   O que é o Modo de Personificação?

   Administradores podem fazer login como qualquer usuário para solucionar problemas

   Solucione problemas do seu app como se você fosse um usuário específico.
5. Integrar ao Supabase (avançado)

   Combine a autenticação do Clerk com o backend do Supabase.

   

   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

   Como integrar:
6. Adicionar um domínio personalizado (opcional)

   Por que usar um domínio personalizado?

   Aumenta o reconhecimento e a confiança na marca

   Mais informações aqui.
7. Considerações finais e próximos passos

   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

​

Bônus: construa recursos B2B em minutos

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:

Adicionar uma interface de troca de organização

Permitir que os usuários convidem colegas de equipe

​

Dicas e solução de problemas

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

​

Perguntas frequentes (FAQ)

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.

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

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

O que é "Impersonation Mode"?

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

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

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.

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.

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.

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.

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 no X para novidades.

Quer adicionar uma pergunta a este FAQ? Fale com a gente no Discord!

​

Considerações finais

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