Aggiungere registrazione, login e account utente a un’app non significa necessariamente dover configurare manualmente autenticazione, sessioni, route protette e permessi. Con Coderblock puoi descrivere in chat il comportamento che vuoi ottenere e lasciare all’agente la configurazione della parte tecnica.

In questo tutorial vedrai come:

• aggiungere registrazione e accesso;
• creare un’area personale protetta;
• gestire sessioni e route protette;
• associare i dati all’utente autenticato;
• configurare ruoli come cliente e amministratore;
• proteggere i dati con Row Level Security;
• aggiungere, se necessario, il social login;
• testare il comportamento dell’autenticazione prima di pubblicare l’app.

Prima di iniziare

Apri il progetto Coderblock a cui vuoi aggiungere l’autenticazione. Puoi partire da un’app già esistente oppure creare un nuovo progetto descrivendo ciò che vuoi realizzare in linguaggio naturale.

Per esempio:

Crea una piattaforma per personal trainer in cui ogni cliente possa creare un account, visualizzare le proprie schede di allenamento e tenere traccia dei progressi. Gli allenatori devono avere un'area amministrativa per gestire i clienti.

Se l’app esiste già, puoi invece chiedere direttamente di aggiungere gli account:

Aggiungi registrazione e accesso per gli utenti. Ogni utente deve avere un'area personale protetta dopo il login.

Coderblock utilizza Supabase Auth per gestire l’autenticazione e configura la parte necessaria del progetto, inclusi sessioni, route protette e policy di accesso al database.

---

1. Aggiungi registrazione e login

Il modo più semplice per iniziare è descrivere all’agente il flusso che vuoi offrire agli utenti. Ad esempio:

Aggiungi una pagina di registrazione e una pagina di login. Gli utenti devono poter creare un account con email e password e accedere alla propria area personale dopo il login.

L’agente configura le pagine necessarie e collega il flusso a Supabase Auth. Non devi creare manualmente una tabella per le password né implementare direttamente JWT o hashing delle password. Una volta completata la modifica, controlla l’anteprima live e prova a:

1. creare un nuovo account;
2. effettuare il login;
3. effettuare il logout;
4. accedere nuovamente con lo stesso account.

Se vuoi personalizzare il flusso, puoi continuare a lavorare tramite chat. Per esempio:

Rendi il form di registrazione più semplice e mostra messaggi di errore chiari quando l'email è già registrata o la password non è valida.

2. Crea un'area personale protetta

Una volta configurato il login, puoi decidere cosa deve vedere un utente autenticato. Ad esempio:

Crea una pagina Account accessibile solo agli utenti autenticati. Mostra nome, email, data di registrazione e un riepilogo delle attività dell'utente.

Coderblock può creare la pagina e proteggerla in modo che non sia accessibile agli utenti che non hanno effettuato il login. Puoi anche chiedere di proteggere più pagine:

Proteggi le pagine /account, /orders e /settings. Se un utente non autenticato prova ad accedervi, reindirizzalo alla pagina di login.

A questo punto prova ad aprire direttamente gli URL protetti senza aver effettuato l’accesso. L’utente non autenticato non dovrebbe poter visualizzare il contenuto riservato.

3. Collega i dati all'utente autenticato

L’autenticazione diventa davvero utile quando gli utenti possono avere dati personali associati al proprio account. Per esempio, in una piattaforma di prenotazione puoi chiedere:

Aggiungi una tabella per le prenotazioni. Ogni prenotazione deve essere associata all'utente autenticato e deve contenere data, ora, servizio e stato.

L’agente può progettare la struttura del database e collegare i record all’utente autenticato. Puoi quindi chiedere:

Nella pagina Account mostra soltanto le prenotazioni dell'utente attualmente autenticato.

Questo principio può essere applicato a qualsiasi dato personale: ordini, appuntamenti, documenti, preferenze, messaggi o contenuti creati dall’utente.

4. Proteggi i dati con Row Level Security

Proteggere una pagina non è sufficiente. Se un’app contiene dati privati, devi assicurarti che anche il database impedisca agli utenti di leggere o modificare informazioni appartenenti ad altri account. Coderblock utilizza Row Level Security (RLS) di Postgres per questo scopo. Puoi chiedere, per esempio:

Assicurati che ogni utente possa leggere e modificare esclusivamente le proprie prenotazioni. Gli utenti non devono poter accedere ai dati degli altri account.

L’agente configura le policy necessarie in base all’utente autenticato. Puoi controllare il risultato dalla scheda Backend dell’editor, dove sono disponibili le tabelle, gli utenti autenticati, lo storage e le funzioni del progetto.

Un test importante

Crea almeno due account di test. Con il primo account:

• crea alcuni dati;
• verifica che siano visibili correttamente.

Poi accedi con il secondo account e controlla che quei dati non siano accessibili. Questo test è particolarmente importante per applicazioni che gestiscono informazioni personali, ordini, documenti o altri dati riservati.

5. Aggiungi ruoli e amministratori

Molte applicazioni non hanno un solo tipo di utente. Potresti avere, per esempio:

• clienti;
• amministratori;
• membri del team;
• moderatori;
• insegnanti;
• professionisti.

Puoi descrivere questi ruoli direttamente in chat. Ad esempio:

Aggiungi i ruoli cliente e amministratore. I clienti possono vedere e modificare soltanto i propri dati, mentre gli amministratori possono accedere a una dashboard protetta e gestire utenti e contenuti.

Coderblock include già una struttura di base per profili e ruoli, che l’agente può utilizzare per configurare i permessi dell’app. Puoi quindi chiedere:

Crea una dashboard amministrativa accessibile esclusivamente agli utenti con ruolo amministratore.

Controlla poi il comportamento con account appartenenti a ruoli diversi. Un cliente non dovrebbe poter accedere alla dashboard semplicemente conoscendone l’URL.

6. Personalizza il profilo utente

Una volta configurata l’autenticazione, puoi aggiungere informazioni al profilo. Per esempio:

Aggiungi alla pagina Account un modulo che permetta agli utenti di modificare nome, numero di telefono e immagine del profilo.

Oppure:

Permetti agli utenti di caricare una foto del profilo e salvala nello storage dell'app.

Se hai bisogno di informazioni specifiche per il tuo prodotto, puoi descriverle nello stesso modo. L’agente può aggiornare il modello dati, l’interfaccia e la logica necessaria per collegare queste informazioni all’account corretto.

7. Aggiungi il social login

Se vuoi permettere agli utenti di registrarsi o accedere tramite un provider social, puoi richiederlo direttamente in chat. Ad esempio:

Aggiungi l'accesso tramite Google insieme all'autenticazione con email e password.

Coderblock può integrare il social login nel flusso di autenticazione dell’app. Dopo averlo configurato, prova entrambi i percorsi:

• registrazione e accesso tramite email e password;
• accesso tramite il provider social.

Verifica anche che entrambi portino allo stesso tipo di area personale e che i dati siano associati correttamente all’utente.

8. Gestisci logout e sessioni

Un account non dovrebbe limitarsi al login. Chiedi all’agente di configurare anche il comportamento della sessione:

Aggiungi un pulsante Logout nell'area personale e assicurati che dopo il logout le pagine protette non siano più accessibili.

Controlla quindi che:

1. il login apra correttamente l’area personale;
2. il refresh della pagina mantenga la sessione quando previsto;
3. il logout termini la sessione;
4. le pagine protette non siano più accessibili dopo il logout.

Se vuoi modificare il comportamento, puoi descriverlo direttamente in chat.

9. Testa l'intero flusso

Prima di pubblicare l’app, prova l’autenticazione dall’inizio alla fine.

Account utente

1. Crea un nuovo account.
2. Effettua il login.
3. Completa il profilo, se previsto.
4. Crea alcuni dati personali.
5. Esci dall’account.
6. Accedi nuovamente.
7. Verifica che i dati siano ancora presenti.

Sicurezza

Poi crea un secondo account e verifica che:

• non possa visualizzare i dati del primo utente;
• non possa modificare i dati del primo utente;
• non possa accedere alle pagine riservate al primo utente;
• non possa accedere alle pagine amministrative.

Amministrazione

Se hai configurato un ruolo amministratore:

1. accedi con un account amministratore;
2. apri la dashboard;
3. verifica le funzionalità disponibili;
4. torna a un account cliente;
5. prova nuovamente ad accedere alla dashboard.

L’obiettivo è verificare non soltanto che il login funzioni, ma che ogni utente possa fare soltanto ciò che il proprio ruolo gli permette di fare.

10. Pubblica l'app

Quando hai verificato autenticazione, account, ruoli e permessi, puoi pubblicare l’app. Fai clic su Pubblica per distribuirla su <app>.coderblock.app, con SSL incluso.

Se vuoi utilizzare un dominio personalizzato, vai su Impostazioni → Domini e collega un dominio esistente seguendo la procedura DNS guidata oppure acquistane uno direttamente in Coderblock.

Dopo la pubblicazione, ripeti almeno i test principali sull’ambiente di produzione:

• registrazione;
• login;
• logout;
• accesso alle pagine protette;
• visualizzazione dei dati personali;
• permessi amministrativi;
• accesso ai dati da parte di utenti diversi.

Checklist finale

Prima di considerare completa l’autenticazione, verifica che:

• la registrazione funzioni correttamente;
• il login e il logout funzionino;
• le sessioni vengano gestite correttamente;
• le pagine private siano realmente protette;
• ogni utente possa accedere soltanto ai propri dati;
• la Row Level Security sia configurata correttamente;
• i ruoli e i relativi permessi funzionino;
• gli utenti non possano accedere alle aree amministrative senza autorizzazione;
• eventuali social login funzionino correttamente;
• i dati del profilo siano associati all’account corretto.

Autenticazione pronta

Con Coderblock puoi passare da una semplice app senza account a un prodotto con registrazione, login, profili, ruoli, pagine protette e dati personali, usando la conversazione come interfaccia principale. La parte importante, però, è la verifica: l’AI può configurare gran parte dell’infrastruttura, ma sei tu a dover controllare che ogni account e ogni ruolo abbiano esattamente i permessi che dovrebbero avere.