> ## 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.
# Integrazione con Clerk
> Scopri come integrare Clerk con la tua app Lovable
## Perché Clerk?
[Clerk](https://clerk.com) gestisce l'autenticazione e la gestione degli utenti, così non devi implementarli da zero. Con pochi prompt e alcuni passaggi di configurazione, ottieni:
* Accesso e registrazione sicuri (social, password, MFA)
* Componenti UI predefiniti: profili utente, gestione organizzazioni, impersonificazione utente
* Supporto per app B2B (team, ruoli, inviti)
* Integrazione con Supabase, Stripe (presto disponibile) e altro
* Modalità lista d'attesa per gestire l'accesso anticipato
* Generoso piano gratuito: 10.000 MAU
## Guida passo passo all'integrazione
Ecco una guida passo passo:
Crea un account Clerk → [Clerk.com](https://clerk.com)
Nel pannello di controllo di Clerk, crea una nuova app
Accedi a Clerk e crea una nuova app
Abilita i provider di autenticazione desiderati (ad es. Google, GitHub)
Abilita “Waitlist” in **Configure > Restrictions**
Copia la tua **chiave API pubblica**
**Aggiungi Clerk alla tua app Lovable**
In **Lovable**, aggiungi Clerk come provider di autenticazione.
Dai questa istruzione a Lovable:
Creiamo una bellissima app di gestione progetti e attività nello stile di Asana. Gli utenti devono potersi autenticare e registrare usando Clerk per l’autenticazione e la gestione degli utenti. Iniziamo creando una homepage accattivante e utilizziamo il componente di waitlist di Clerk per permettere agli utenti di iscriversi mentre costruiamo il resto dell’app.
Incolla la tua **chiave API pubblica** quando richiesto
Lovable genera automaticamente le pagine di accesso e registrazione
Distribuisci e testa: ora stai usando l’autenticazione con Clerk
**Perché usare una waitlist?** – Raccogli i primi utenti ancora prima di lanciare la tua app!
Usa la waitlist integrata di Clerk per raccogliere utenti prima del lancio dell’app.
Nel pannello di controllo di Clerk: **Configure > Restrictions > Waitlist**
Le nuove iscrizioni verranno visualizzate come **pending**
* Gli utenti che si iscrivono verranno ora contrassegnati come **pending approval**
* Gli amministratori possono approvare gli utenti dal pannello di controllo di Clerk
Personalizza le email della waitlist (branding, contenuto)
Imposta l’accesso per team nella tua app.
Nel pannello di controllo di Clerk: abilita **Organizations**
Definisci i ruoli (Admin, Member, Viewer, ecc.)
Invita gli utenti alla tua organizzazione via email
Assegna ruoli e permessi dal pannello di controllo
Chiedi a Lovable di:
Chiedere agli utenti di creare o unirsi a un’organizzazione dopo la registrazione
**Utilizzo del componente User Profile di Clerk**
* Fornisce un dashboard predefinito per la gestione degli utenti
* Supporta accesso social e autenticazione tramite password
* Gli utenti possono gestire i propri account e la 2FA
**Che cos'è la modalità di impersonazione?**
Gli admin possono accedere come qualsiasi utente per risolvere i problemi
Risolvi i problemi della tua app come se fossi un utente specifico.
Nella dashboard di Clerk > Users, clicca su un utente
Clicca su **Impersonate**
Visualizza la tua app dalla sua prospettiva
Sicurezza: chi impersona un utente non può eseguire azioni sensibili (ad es. cambiare la password)
Combina l'autenticazione di Clerk con il backend Supabase.
**Perché integrare con Supabase?**
* Archivia i dati utente in un database
* Autenticazione sicura con token JWT
* Collega l'autenticazione alle funzionalità dell'app
**Come integrare:**
In Supabase, vai a **Settings > API > JWT Secret (**[**documentation**](https://clerk.com/docs/integrations/databases/supabase)**)**
In Clerk: **JWT Templates > Add Supabase**, incolla il JWT secret
Abilita **Clerk come provider di autenticazione**
Aggiorna i criteri RLS per usare `auth.uid()` da Clerk
Chiedi a Lovable di eseguire la seguente Istruzione:
Configuriamo Supabase per integrarlo con Clerk. Clerk è stato configurato con un secret Supabase. Ecco un esempio di implementazione del client Supabase usando Clerk. Usalo come riferimento.
*\[Importa configurazione client Supabase]*
Conferma che i token emessi da Clerk siano accettati da Supabase
**Perché usare un dominio personalizzato?**
Aumenta il riconoscimento del brand e la fiducia degli utenti
[Maggiori informazioni qui](https://docs.lovable.dev/tips-tricks/custom-domain).
In Lovable: **Progetto > Impostazioni > Dominio personalizzato**
Inserisci il dominio che hai acquistato (ad es. `app.yourcompany.com`)
Lovable configura automaticamente il DNS (non devi uscire da Lovable)
Distribuisci e testa la tua app con il nuovo dominio.
Fatto ✅ — la tua app è ora white-label, con il tuo brand
**La tua app ora include:**
* Autenticazione sicura con Clerk
* Una waitlist per raccogliere i primi utenti
* Funzionalità di gestione utenti e team
* Integrazione con il database Supabase
* Un dominio personalizzato professionale
## Bonus: crea funzionalità B2B in pochi minuti
Clerk offre:
* Accesso basato sui ruoli per le organizzazioni
* Flussi di invito (via email, UI predefinita)
* Personalizzazione del profilo dell'organizzazione (logo, nome)
* Passaggio tra più organizzazioni (ad es. stile Slack)
**Chiedi a Lovable di:**
Aggiungere l'interfaccia per cambiare organizzazione
Consentire agli utenti di invitare i colleghi
## Suggerimenti e risoluzione dei problemi
* **Stai già usando Supabase Auth?** Puoi passare a Clerk senza riscrivere la logica della tua app. Ti basta configurare correttamente JWT e sostituire il provider di autenticazione.
* **Personalizzazione email:** Clerk ti permette di modificare tutti i modelli di email transazionali (lista d'attesa, inviti, approvazioni).
* **Accesso da mobile**: Clerk supporta passkey, OTP e SMS — nessuna configurazione aggiuntiva necessaria in Dev Mode.
* **Compliance**: Clerk è conforme a SOC2, HIPAA e GDPR.
## Domande frequenti (FAQ)
Sì. Clerk e Supabase funzionano bene insieme. Devi solo:
* Configurare Clerk per emettere JWT
* Aggiungere il secret JWT di Supabase in Clerk
* Aggiornare le policy RLS di Supabase per usare `auth.uid()` di Clerk
In questo modo puoi collegare Clerk a un'app esistente basata su Supabase con modifiche minime.
Solo in produzione. In modalità sviluppo, Clerk fornisce credenziali condivise per i test. Per la produzione:
* Configura le tue credenziali Google/GitHub/etc.
* Aggiungile in Clerk in **OAuth settings**
* **Users**: individui che possono accedere alla tua app
* **Organizations**: gruppi di utenti (team, aziende)
Usa le organizations quando vuoi:
* Accesso basato sui ruoli (Admin, Member, ecc.)
* Consentire agli utenti di invitare i colleghi
* Flussi in stile SaaS B2B
Consente agli amministratori di accedere come qualsiasi utente — estremamente utile per:
* Risolvere problemi degli utenti
* Comprendere la loro esperienza d'uso
* Fornire supporto in tempo reale
Clerk limita ciò che chi impersona può fare (ad esempio, niente modifiche alla password).
Sì. Clerk offre:
* Pieno supporto CSS tramite le props `appearance`
* La possibilità di creare UI completamente personalizzate usando gli hook React di Clerk
Puoi mantenere l'aspetto predefinito oppure adattarlo completamente al brand della tua app.
Al momento:
* Gli utenti vengono avvisati automaticamente quando vengono approvati dalla lista d'attesa
* Il supporto per email di massa **arriverà presto**
Per ora, esporta gli indirizzi email e usa il tuo strumento di email preferito.
Sì! Clerk ha un piano gratuito molto generoso:
* Fino a **10.000 Monthly Active Users (MAU)**, ovvero utenti attivi mensili
* I piani a pagamento partono da **\$25/mese**, con tariffazione basata sull'utilizzo oltre quella soglia
Puoi usarlo in produzione senza pagare finché non inizi a scalare.
Sì. Clerk è:
* **Certificato SOC 2**
* **Conforme a HIPAA**
* **Pronto per il GDPR**
Ideale per i team che operano in settori regolamentati.
In arrivo. Presto potrai:
* Definire piani (ad es. Free, Pro, Enterprise)
* Consentire a utenti/organizzazioni di gestire gli abbonamenti dall'UI di Clerk
* Sincronizzare automaticamente i dati con Stripe
Segui [@clerkdev](https://x.com/clerkdev?lang=en) su X per gli aggiornamenti.
Vuoi aggiungere una domanda a questa FAQ? [Faccelo sapere su Discord](https://discord.gg/lovable-dev)!
## Considerazioni finali
Clerk trasforma l'autenticazione in un'istruzione. Non devi implementarla tu.
**Con pochi clic e prompt, la tua app ora ha:**
* Autenticazione sicura e scalabile
* Gestione di team e organizzazioni
* Strumenti di impersonazione per il debug
* Dati e controllo degli accessi basati su Supabase
* Supporto per domini personalizzati per un'esperienza utente curata
[Clerk](https://clerk.com) gestisce l'autenticazione e la gestione degli utenti, così non devi implementarli da zero. Con pochi prompt e alcuni passaggi di configurazione, ottieni:
* Accesso e registrazione sicuri (social, password, MFA)
* Componenti UI predefiniti: profili utente, gestione organizzazioni, impersonificazione utente
* Supporto per app B2B (team, ruoli, inviti)
* Integrazione con Supabase, Stripe (presto disponibile) e altro
* Modalità lista d'attesa per gestire l'accesso anticipato
* Generoso piano gratuito: 10.000 MAU