Utilizzare Bolt.New e Logto per creare rapidamente flussi di login personalizzati
Scopri come usare Bolt.new per costruire un'app full-stack con autenticazione Logto. Dalla configurazione dei flussi di login alla creazione di un pannello di accesso fluttuante e l'abilitazione dei login social, questa guida copre sia la configurazione che la personalizzazione.
GuamianProduct & Design
Smetti di sprecare settimane sull'autenticazione degli utenti
Lancia app sicure più velocemente con Logto. Integra l'autenticazione degli utenti in pochi minuti e concentrati sul tuo prodotto principale.
Bolt.new è uno strumento basato su browser per generare ed eseguire applicazioni web full-stack istantaneamente. Costruito sopra la tecnologia WebContainer di StackBlitz, offre agli sviluppatori uno stack pulito e preconfigurato che include Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. L'intero ambiente gira localmente nel browser, senza installazioni, senza passaggi di build cloud e senza registrazione richiesta.
A differenza degli strumenti che si concentrano sulla codifica assistita dall'IA all'interno di un progetto esistente, Bolt.new si focalizza sull'inizio del processo di sviluppo. Rimuove la complessità della configurazione della struttura del progetto, delle dipendenze e dei server locali, permettendoti di passare dall'idea al prototipo funzionante in pochi secondi.
Mentre strumenti come Cursor e Lovable servono da copiloti IA all'interno dell'editor di codice, Bolt.new si concentra su qualcosa di completamente diverso: generazione ed esecuzione istantanea di progetti full-stack.
Cursor migliora i flussi di lavoro su VS Code con l'IA, aiutandoti a modificare o generare codice nel tuo ambiente esistente.
Bolt.new crea un'app funzionante da zero basandosi su un prompt o un modello, e la esegue istantaneamente nel browser usando WebContainer.
Non c'è dipendenza da strumenti locali o VM remote sul cloud. Tutto gira nel browser con supporto nativo per Node.js, gestione dei pacchetti e sviluppo full-stack. Questo lo rende particolarmente adatto per prototipazione rapida e sperimentazioni local-first, soprattutto nei progetti AI o SaaS.
Bolt.new è progettato per sviluppatori che spesso partono da zero come:
Indie hacker che validano idee di prodotto
Costruttori AI che testano flussi di lavoro o integrano modelli
Founder che prototipano MVP
Ingegneri che creano tool interni o demo
Questi utenti sono tipicamente a proprio agio con lo stack web moderno e preferiscono strumenti veloci, puliti e non dogmatici. Bolt.new non è un site builder visuale né una piattaforma didattica. Presume una conoscenza operativa di React e dello sviluppo full-stack ma elimina gli attriti della configurazione.
Bolt.new è stato creato dal team dietro StackBlitz, azienda fondata nel 2017 da Eric Simons e Albert Pai. StackBlitz ha introdotto i WebContainer, un runtime WebAssembly nativo per browser in grado di eseguire ambienti Node.js direttamente nel browser. Questo ha eliminato la necessità di server cloud o installazioni locali durante lo sviluppo di applicazioni JavaScript moderne.
Nel 2023, StackBlitz ha vissuto un punto di svolta. La crescita aveva rallentato e il team ha esplorato una direzione più radicale: combinare i WebContainer con l'IA per generare applicazioni completamente funzionanti da prompt in linguaggio naturale.
Questo esperimento è diventato Bolt.new, lanciato pubblicamente a ottobre 2024. In poche settimane ha ottenuto una notevole trazione tra gli sviluppatori per semplicità e velocità. Lo strumento combinava tutto ciò che StackBlitz aveva costruito negli anni — isolamento del runtime, installazione rapida delle dipendenze e ambienti condivisibili — con un'interfaccia IA che comprendeva gli obiettivi comuni degli sviluppatori.
Bolt.new ha segnato un cambiamento negli strumenti di sviluppo: invece di scrivere solo codice più velocemente, ora gli sviluppatori potevano partire con del codice già funzionante, cucito intorno alle proprie intenzioni.
Guida: Usa Logto e Bolt.New per aggiungere un'esperienza di login personalizzata#
In questo esempio, ho usato Bolt.new per creare una app CMS. Ho saltato la fase di prompt e sono andato subito al sodo: ho chiesto all'agente di costruire un CMS con Logto come provider di autenticazione.
Secondo le istruzioni, dovevo fornire due informazioni chiave:
Endpoint di Logto
App ID
Poiché l'app è una single-page application React, non serve nessun secret app. L'agente ha fatto il resto: ha installato l'ultima Logto React SDK, configurato i componenti per l'autenticazione e collegato tutto.
Per completare la configurazione sono andato nella Logto Cloud Console, ho creato una nuova single-page application e ho copiato l'endpoint Logto e l'App ID in Bolt.new.
Poi configura le Redirect URI e le URI di redirect dopo il sign-out.
Un dettaglio importante: poiché Bolt.new è basato su browser e non su un IDE locale, non puoi usare http://localhost:3000/ come redirect URI. Usa invece l'URL di anteprima mostrato nella scheda browser di Bolt.new.
Personalizza l'esperienza di login preconfigurata di Logto#
Logto offre un flusso di login preimpostato e configurabile che puoi personalizzare nella Console. Per iniziare, vai su Sign-in Experience > Sign-in & Sign-up, poi scegli i metodi di accesso che preferisci (come email, username, numero di telefono o social login).
Una volta configurato, l'attivazione del flusso di login reindirizzerà gli utenti alla pagina di login Logto ospitata con le opzioni selezionate. L'intero processo di autenticazione è gestito da Logto e gli utenti tornano alla tua app una volta autenticati.
Crea un pannello di login fluttuante sopra il tuo prodotto#
Ora voglio andare oltre e costruire un'esperienza di login più personalizzata, simile a quella offerta da Perplexity. Invece di reindirizzare su una pagina separata, inserirò un pannello di login fluttuante direttamente sopra la UI del prodotto. In questo modo gli utenti rimangono nel contesto mentre sfruttano comunque il flusso di autenticazione Logto.
Quindi uso semplicemente questo prompt:
Voglio rendere la pagina di login più bella, solo un pannello fluttuante nell'angolo in basso a destra. Con due pulsanti: uno per "Accedi" e uno per "Crea account". Ogni pulsante dovrebbe reindirizzare a una schermata diversa, gestita da Logto. Utilizzando la first-screen experience documentata in Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
La parte interessante è che, quando clicchi Accedi, vai subito alla pagina di login. Se clicchi Crea account, si apre direttamente la schermata di creazione account.
Puoi fornire all'agente la documentazione per il direct sign-in di Logto insieme a un prompt come "aggiungi flussi di accesso social". Questo ti permette di saltare la schermata di atterraggio predefinita di Logto. Ad esempio, cliccando sul pulsante Google Sign-In partirà immediatamente il flusso di autenticazione con Google, offrendo agli utenti un'esperienza di accesso più rapida e amichevole.
Il prossimo aggiornamento di Logto supporterà l'integrazione auth potenziata da IA#
Questo è solo un esempio di base. Logto sta attualmente sviluppando server MCP che girano direttamente nel tuo IDE, permettendoti di interagire con la Logto Console e la Management API senza mai lasciare l'ambiente di sviluppo.
Con questa configurazione, potrai:
Creare e gestire utenti
Visualizzare e filtrare i log
Configurare i flussi di login e registrazione
Definire risorse API, permessi e ruoli
Gestire applicazioni e impostazioni di accesso
E altro
Combinando tool locali, IA e infrastruttura Logto, l'autenticazione non è più un passaggio doloroso d'integrazione: diventa parte naturale del tuo flusso di sviluppo.
