Integração com Clerk
Aprenda como integrar o Clerk com sua aplicação Lovable
Por que Clerk?
Clerk cuida da autenticação e gerenciamento de usuários para que você não precise construir do zero. Com apenas alguns prompts e etapas de configuração, você obtém:
- Login e cadastro seguros (social, senha, MFA)
- Componentes de UI pré-construídos: perfis de usuário, gerenciamento de organizações, personificação
- Suporte para aplicações 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: 10K MAUs
Guia de Integração Passo a Passo
Aqui está um guia passo a passo:1
Configure Seu App Clerk
1
Passo 1
Crie uma Conta Clerk → Clerk.com
2
Passo 2
No painel do Clerk, crie um novo app
1
Passo 1
Faça login no Clerk e crie um novo app
2
Passo 2
Habilite os provedores de autenticação desejados (ex: Google, GitHub)
3
Passo 3
Habilite “Waitlist” em Configure > Restrictions
4
Passo 4
Copie sua Public API Key
3
Passo 3
Adicione Clerk ao Seu App Lovable
1
Passo 1
No Lovable, adicione Clerk como seu provedor de autenticação.Instrua o Lovable:
Vamos construir um belo app de gerenciamento 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 homepage atraente e usar o componente de waitlist do Clerk para permitir que os usuários se inscrevam enquanto construímos o resto do app.
2
Passo 2
Cole sua Public API Key quando solicitado
3
Passo 3
Lovable cria as páginas de login e cadastro
4
Passo 4
Faça deploy e teste — agora você está usando Clerk Auth
2
Ativar Modo Waitlist (Opcional)
Por que usar uma waitlist? – Colete usuários iniciais antes de lançar seu app!
1
Passo 1
No painel do Clerk: Configure > Restrictions > Waitlist
2
Passo 2
Novos cadastros aparecerão como pending
3
Passo 3
- Usuários que se cadastrarem agora estarão aguardando aprovação
- Administradores podem aprovar usuários pelo painel do Clerk
4
Passo 4 (Bônus)
Personalize emails da waitlist (marca, conteúdo)
3
Gerenciando Usuários e Times no Clerk
Configure acesso baseado em times no seu app.
1
Passo 1
No painel do Clerk: habilite Organizations
2
Passo 2
Defina funções (Admin, Member, Viewer, etc.)
3
Passo 3
Convide usuários para sua organização por email
4
Passo 4
Atribua funções e permissões pelo painel
5
Passo 5
Instrua o Lovable para:
Pedir aos usuários para criar/entrar em uma organização após o cadastro
Usando o Componente User Profile do Clerk
- Fornece um painel de gerenciamento de usuários pré-construído
- Suporta logins sociais e autenticação por senha
- Usuários podem gerenciar suas próprias contas e 2FA
4
Modo de Personificação (Para Administradores)
O que é o Modo de Personificação?Administradores podem fazer login como qualquer usuário para solucionar problemas
1
Passo 1
No painel do Clerk > Usuários, clique em um usuário
2
Passo 2
Clique em Personificar
3
Passo 3
Visualize seu app da perspectiva deles
4
Passo 4
Segurança: personificadores não podem realizar ações sensíveis (ex: alterar senha)
5
Integrar com Supabase (Avançado)
Combine a autenticação do Clerk com o backend do Supabase.
Como integrar:
Por que integrar com o Supabase?
- Armazenar dados do usuário em um banco de dados
- Autenticação segura com tokens JWT
- Conectar autenticação aos recursos do app
1
Passo 1
2
Passo 2
No Clerk: Modelos JWT > Adicionar Supabase, cole o segredo JWT
3
Passo 3
Habilite o Clerk como provedor de autenticaçãoAtualize as políticas RLS para usar
auth.uid() do ClerkPeça ao Lovable para: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 isso como referência.[Importação da configuração do cliente Supabase]
4
Passo 4
Confirme que os tokens emitidos pelo Clerk são aceitos pelo Supabase
6
Adicionar um Domínio Personalizado (Opcional)
Por que usar um domínio personalizado?Aumenta o reconhecimento da marca e confiançaMais informações aqui.
1
Passo 1
No Lovable: Configurações > Domínio Personalizado
2
Passo 2
Digite seu domínio comprado (ex:
app.suaempresa.com)3
Passo 3
O Lovable configura automaticamente o DNS (não precisa sair do Lovable)
4
Passo 4
Faça o deploy e teste seu app com o novo domínio.
5
Passo 5
Pronto ✅ — seu app agora tem marca própria
7
Considerações Finais e Próximos Passos
Seu app agora tem:
- Autenticação segura com Clerk
- Uma lista de espera para coletar usuários iniciais
- Recursos de gerenciamento de usuários e equipes
- Integração com banco de dados Supabase
- Um domínio personalizado profissional
Bônus: Construa Recursos B2B em Minutos
Clerk suporta:- Controle de acesso baseado em funções para organizações
- Fluxos de convite (baseados em email, UI pré-construída)
- Personalização de perfil da organização (logo, nome)
- Alternância entre múltiplas organizações (ex: estilo Slack)
Adicionar UI de alternador de organizações
Permitir que usuários convidem colegas de equipe
Dicas e Solução de Problemas
- Já está usando Supabase Auth? Você pode migrar para o Clerk sem reescrever a lógica da sua aplicação. Apenas configure o JWT corretamente e troque o provedor de autenticação.
- Personalização de email: O Clerk permite editar todos os templates de email transacionais (lista de espera, convites, aprovações).
- Login mobile: O Clerk suporta passkeys, OTP e SMS — nenhuma configuração extra necessária no Dev Mode.
- Conformidade: O Clerk é compatível com SOC2, HIPAA e GDPR.
Perguntas Frequentes (FAQ)
Posso migrar do Supabase Auth para o Clerk facilmente?
Posso migrar do Supabase Auth para o Clerk facilmente?
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
Preciso configurar provedores OAuth como Google ou GitHub?
Preciso configurar provedores OAuth como Google ou GitHub?
Apenas para produção. No modo de desenvolvimento, o Clerk fornece credenciais compartilhadas para testes. Para produção:
- Configure suas próprias credenciais do Google/GitHub/etc.
- Adicione-as no Clerk em Configurações OAuth
Qual é a diferença entre Organizações e Usuários?
Qual é a diferença entre Organizações e Usuários?
- Usuários: Indivíduos que podem fazer login no seu app
- Organizações: Grupos de usuários (equipes, empresas)
- Acesso baseado em funções (Admin, Membro, etc.)
- Usuários convidando colegas de equipe
- Fluxos estilo SaaS B2B
O que é o "Modo de Personificação"?
O que é o "Modo de Personificação"?
Permite que administradores façam login como qualquer usuário — super útil para:
- Debugar problemas de usuários
- Entender a experiência deles
- Fornecer suporte ao vivo
O Clerk limita o que personificadores podem fazer (ex: sem mudanças de senha).
Posso personalizar os componentes de UI do Clerk?
Posso personalizar os componentes de UI do Clerk?
Sim. O Clerk oferece:
- Suporte completo a CSS via props
appearance - A opção de construir UIs totalmente customizadas usando hooks React do Clerk
Posso enviar emails para meus usuários da lista de espera pelo Clerk?
Posso enviar emails para meus usuários da lista de espera pelo Clerk?
Atualmente:
- Usuários são notificados automaticamente quando aprovados da lista de espera
- Suporte a email em massa está chegando em breve
O Clerk é gratuito para usar?
O Clerk é gratuito para usar?
Sim! O Clerk tem um plano gratuito generoso:
- Até 10.000 Usuários Ativos Mensais (MAUs)
- Planos pagos começam em $25/mês, com preços baseados em uso depois
O Clerk suporta conformidade (SOC2, HIPAA, GDPR)?
O Clerk suporta conformidade (SOC2, HIPAA, GDPR)?
Sim. O Clerk é:
- Certificado SOC 2
- Compatível com HIPAA
- Pronto para GDPR
Posso usar o Clerk com Stripe para cobrança?
Posso usar o Clerk com Stripe para cobrança?
Em breve. Você logo poderá:
- Definir planos (ex: Gratuito, Pro, Enterprise)
- Permitir que usuários/organizações gerenciem assinaturas pela UI do Clerk
- Sincronizar dados automaticamente com o Stripe
Considerações Finais
Clerk transforma autenticação em um prompt. Você não precisa construir isso sozinho. Com apenas alguns cliques e prompts, seu app agora tem:- Autenticação segura e escalável
- Gerenciamento de equipes e organizações
- Ferramentas de impersonificação para debugging
- Dados e controle de acesso baseados em Supabase
- Suporte a domínio customizado para uma UX polida