Vibe code usando Lovable AI e Logto per creare velocemente la tua app e gestire i flussi di login
Lovable è un agente di codifica basato sull'IA che ti aiuta a creare app full-stack usando il linguaggio naturale: frontend, backend, database e deployment, tutto in un unico posto. Con il supporto di Logto, puoi ora aggiungere login sicuro, gestione utenti e flussi di autenticazione senza sforzi.
Product & Design
Dagli agenti generici ai copiloti specifici per attività, gli sviluppatori stanno assistendo a un cambiamento fondamentale nel modo in cui il software viene creato. Ma tra tutte le categorie di agenti, una si distingue come la più entusiasmante e in rapido sviluppo: gli agenti di codifica.
Strumenti come Lovable, Cursor, Windsurf e Replit stanno facendo notizia trasformando il linguaggio naturale in software reale e funzionante all'istante. Nessuna configurazione. Nessun boilerplate. Solo puro risultato.
Oggi entra in scena un nuovo termine: Vibe Coding.
Promosso da Lovable, il vibe coding è un nuovo modo di creare app dialogando con l’IA. In questo articolo, vedremo davvero cosa significa vibe coding, esploreremo come funziona Lovable come uno dei principali agenti di codifica, e percorreremo i passaggi per creare una app full-stack: completa di registrazione, login, gestione utenti e identità in pochi minuti.
Che cos'è Lovable AI?
Lovable è una piattaforma di sviluppo basata su chat dove le tue idee diventano direttamente codice funzionante, layout e persino app ospitate. Non scrivi codice tradizionale: descrivi ciò che vuoi:
“Ho bisogno di una dashboard semplice con due grafici e una sidebar.”
E l’IA genera un’anteprima live e codice sorgente modificabile, spesso in pochi secondi.
Sotto il cofano, Lovable usa framework moderni come React e Tailwind, permettendoti di esportare il tuo progetto, ospitarlo autonomamente o effettuare il deploy all'istante.
Quali sono le funzionalità fondamentali di Lovable AI
Ecco una tabella dettagliata basata sulle 9 funzionalità chiave della piattaforma Lovable:
| # | Funzionalità | Descrizione | Valore |
|---|---|---|---|
| 1 | App Full-stack guidata dal linguaggio naturale | Descrivi ciò che vuoi in inglese semplice e ottieni una app funzionante con frontend, backend, DB e auth, tutto generato istantaneamente. | Riduce drasticamente i tempi di sviluppo ed elimina la barriera della configurazione boilerplate. |
| 2 | Intelligenza di codifica AI e debugging | Assistente integrato che suggerisce codice, corregge bug e aiuta a navigare tra file, log e API tramite chat. | Migliora la produttività e accelera l’apprendimento per sviluppatori non esperti. |
| 3 | Proprietà reale del codice e sync con GitHub | Fornisce codice pronto per la produzione (React, Node, ecc.) e si sincronizza bidirezionalmente con GitHub. | Ti assicura la piena proprietà del codice ed evita il vendor lock-in. |
| 4 | Integrazioni backend | Supporto nativo per Supabase, Stripe e altri servizi backend. | Collega facilmente database, storage, pagamenti e auth senza scrivere boilerplate. |
| 5 | Editing visuale e Sketch-to-code | Carica schizzi o screenshot (es. interfacce disegnate a mano o esportazioni Figma) per generare vero codice UI. Include modalità di editing visuale. | Offre flessibilità a designer e non-coder per intervenire direttamente sulla UI. |
| 6 | Deployment e domini personalizzati | Pipeline di deploy integrata con supporto hosting e setup dominio personalizzato. | Rende la pubblicazione delle app immediata—senza bisogno di gestire più servizi. |
| 7 | Collaborazione e sync in tempo reale | I membri del team possono collaborare in tempo reale, vedere i cambiamenti istantaneamente e gestire la cronologia delle versioni. | Abilita pair programming, flussi di revisione e ambienti favorevoli al team. |
| 8 | Analisi di sicurezza | Controlli di sicurezza integrati durante la pubblicazione, soprattutto con Supabase. | Rileva vulnerabilità prima del rilascio, aumentando la fiducia dei tuoi utenti. |
| 9 | Ecosistema di apprendimento e template | Offre tutorial, librerie di prompt, template preimpostati e risorse didattiche. | Abbassa la curva di apprendimento e migliora l’onboarding degli sviluppatori. |
Vantaggi principali dell’uso di Lovable per lo sviluppo app
Lovable mette in discussione alcune delle assunzioni radicate nei workflow tipici degli sviluppatori:
- Che ti serva una finestra VS Code vuota per iniziare.
- Che ti servano mockup Figma prima del layout.
- Che servano ticket prima della logica.
Invece, Lovable offre un ambiente dove il linguaggio naturale diventa la UX principale sia per il codice che per la costruzione del prodotto intero.
Questo ha grandi implicazioni per:
- Prototipazione: Mai più mockup statici: prova idee di UX reali in poche ore.
- Onboarding: I nuovi membri possono esplorare codice e funzionalità dialogando.
- Accessibilità: Designer e PM possono contribuire senza scrivere codice.
Per chi non ha esperienza da sviluppatore professionista, Lovable libera un nuovo livello di creatività. Se sai cosa vuoi realizzare, puoi "vibe codare" tutto—trasformando idee in app funzionanti senza blocchi tipici.
Cosa possiamo imparare da Lovable
L’interfaccia è il nuovo IDE
Lovable dimostra che "programmare" non significa sempre digitare. Può voler dire suggerire, modificare tramite dialogo e iterare sugli intenti.
Questo apre opportunità per una collaborazione più inclusiva, specie in team piccoli o progetti individuali.
Cicli rapidi battono le specifiche complete
Se puoi costruire, testare e migliorare senza cambiare strumenti o scrivere boilerplate, hai iterazioni più rapide e spazio per la creatività.
Anche gli sviluppatori esperti traggono vantaggio dalla riduzione dei cambi di contesto e dai feedback più rapidi.
Le app AI-native hanno bisogno di strumenti AI-native
Proprio come GitHub Copilot aveva senso dentro VS Code, Lovable è perfetto per la nuova generazione di app basate su agenti e prompt—dove struttura, logica e flussi utente non sono più hardcoded ma dinamici.
Crea una galleria fotografica usando Logto per l'autenticazione
Prima dai solo un semplice prompt tipo “Crea una galleria foto”, e lui genera per te un sito basilare ma ben disegnato.
Integra Logto Auth in Lovable
Poi ho chiesto a Lovable di usare Logto per l'autenticazione. Anche se Lovable sembra avere una forte integrazione con Supabase per l'auth, Supabase non è una soluzione CIAM professionale. In questo caso, ho scelto Logto — un prodotto CIAM open source e professionale.
Secondo le istruzioni, dovevo fornire:
- Endpoint di Logto
- App ID
Siccome è una app React single-page, nessun segreto app è necessario. L’IA ha gestito tutto senza problemi — ha automaticamente installato l’ultimo Logto SDK React e creato i componenti necessari all'autenticazione.
Per ottenere gli endpoint, sono semplicemente andato su Logto Cloud e creato una nuova app React. Nella pagina dettagli applicazione ho trovato gli endpoint richiesti e li ho copiati su Lovable. Lovable ha quindi aggiornato automaticamente codice e file di config per me.
Dovrai anche inserire la Redirect URI e la URL di post-logout della tua app.
Ecco la parte delicata: poiché Lovable ospita il tuo ambiente di sviluppo nel cloud, non puoi usare qualcosa come http://localhost:3000/callback per la Redirect URI. Devi invece usare la URL live del tuo progetto Lovable e aggiornarla su Logto Cloud.
Passaggi:
- Vai sul tuo tenant Logto Cloud
- Trova la tua app
- Sostituisci le URL con:
-
Redirect URIs:
https://preview--snap-show-gallery-time.lovable.app/callback -
Post Sign-out Redirect URIs:
https://preview--snap-show-gallery-time.lovable.app/
Dopo alcune prompt e iterazioni, hai ora un sito protetto—solo gli utenti loggati possono vedere il contenuto.
Nota: poiché questi agenti di codifica usano iframe nella modalità anteprima, quando clicchi in modalità anteprima non viene mostrata la pagina di login.
Testa il flusso di accesso
Dopo che clicchi “Sign in”, si aprirà la pagina di login Logto. Puoi testare il flusso completo di autenticazione — di default, Logto usa email + password come metodo di login. Completa la verifica dell’email, poi controlla nella Logto Console se l’utente è stato registrato con successo.
Come puoi vedere, il tuo utente appare ora nella console cloud Logto — ciò conferma che il flusso di autenticazione ha funzionato e l’utente è stato registrato in sicurezza tramite la tua app.
Ora hai una app funzionante con flussi di login integrati — e puoi anche gestire i tuoi utenti direttamente da Logto Cloud.
Il prossimo aggiornamento di Logto supporterà l’integrazione auth guidata da IA
Questo è solo un esempio semplice. Logto sta attivamente sviluppando server MCP che funzionano direttamente nel tuo IDE, rendendo possibile interagire con la Logto Console e la Management API—il tutto senza lasciare l'ambiente di sviluppo. In questo modo, potrai:
- Creare e gestire utenti
- Accedere ai log
- Configurare e gestire flussi di login
- Progettare e mantenere autorizzazioni (es. risorse API, permessi, ruoli)
- Gestire applicazioni e risorse
- E molto altro
Con la potenza combinata dell'IA e l’infrastruttura solida di Logto, integrare l’autenticazione non è più un compito complesso.