Autenticazione utente

  • Crea un flusso di login e registrazione usando Supabase Auth e Google login per decidere chi può usare la tua app.
  • Aggiungi un middleware di autenticazione al tuo backend Express.js per proteggere i tuoi percorsi API da richieste non autorizzate.
  • Prova sia la sicurezza frontend che quella backend per assicurarti che solo chi ha fatto il login possa usare le tue funzioni AI.
  • Pagine di registrazione e accesso che creano account utente e mantengono gli utenti connessi
  • Percorsi API protetti con middleware backend che controlla i token di autenticazione prima di elaborare le richieste.

Gli studenti hanno creato un MVP debugato in un repository GitHub che include un frontend React e un backend Express.js. Il frontend e il backend possono funzionare come due processi separati in Codespaces.

Proteggi la tua app con l'autenticazione

Al momento, chiunque abbia il tuo link Codespace può usare la tua app. Non c'è una schermata di accesso e il tuo backend Express.js elabora tutte le richieste che riceve, senza fare domande. Se qualcuno scopre il tuo URL, può attivare chiamate AI che ti costano soldi. Come hai visto quando hai creato il tuo piano finanziario, ogni chiamata API ha un costo. Proteggere queste chiamate non è solo una scelta tecnica, ma anche una scelta aziendale.

In questa unità useremo TutorMatch come esempio. Seguirai gli esempi di TutorMatch e poi adatterai ogni passaggio al tuo MVP.

Questa unità aggiunge due livelli di protezione.

  1. Autenticazione utente: una schermata di accesso che permette solo agli utenti registrati di vedere la tua app. 
  2. Controllo di sicurezza nel tuo backend che controlla che ogni richiesta API venga davvero da un utente che ha fatto il login.

Pensala così: la pagina di login protegge la porta d'ingresso. Il controllo di sicurezza backend protegge le finestre. Insieme, fanno sì che la tua app sia protetta da entrambi i lati.

Perché non salvare le password da solo?

L'approccio più intuitivo agli account utente è anche il più rischioso: creare una tabella utenti, salvare l'indirizzo e-mail e la password di ogni persona al momento della registrazione e controllare la password al momento dell'accesso.

Il problema è che così le password vengono salvate come testo normale, leggibile da chiunque abbia accesso al tuo database. Se il tuo database dovesse essere compromesso, le password di tutti gli utenti sarebbero a rischio. Le app professionali non fanno mai una cosa del genere.

 Per avere un'autenticazione sicura servono un po' di cose che devono funzionare insieme:

  • hashing delle password – trasformare le password in stringhe che non si possono leggere prima di salvarle
  • token di sessione – identificatori temporanei che permettono agli utenti di rimanere connessi senza dover inserire la password su ogni pagina
  • archiviazione sicura: le credenziali vengono gestite in modo crittografato, così non sono mai a rischio durante il trasferimento o quando sono inattive.

Costruire tutto questo da zero è complicato e può portare a errori. Ecco perché ci sono i servizi di autenticazione: si occupano della sicurezza così puoi concentrarti sulla tua app.

user authentication login screen

Ci sono diverse opzioni quando si sceglie un servizio di autenticazione utente:

Opzione

Come funziona

Livello gratuito

Complessità

Verdetto

Metti da parte le password da solo

Crea una tabella utenti, usa l'hash per le password, gestisci le sessioni a mano.

Gratis

Elevato: gli errori di sicurezza sono facili da fare e pericolosi

Non consigliato per gli MVP

Accesso con Google (OAuth)

Gli utenti cliccano su "Accedi con Google". Google si occupa di tutta la sicurezza.

Gratis

Medio — serve configurare Google Cloud Console

Ottima opzione, ma richiede qualche passaggio in più per configurarla.

Auth0 / Impiegato

Servizi di autenticazione di terze parti con pagine di accesso già pronte

Livello gratuito disponibile

Medium — serve un nuovo account e l'SDK

Buono, ma aggiunge un altro servizio da gestire.

Autenticazione Supabase

Integrato in Supabase. Gestisce automaticamente l'hashing, le sessioni e l'archiviazione.

Gratis (incluso)

Basso: hai già un account Supabase

Ottima scelta per MVP

In questa lezione useremo Supabase Auth per autenticare gli utenti. Aggiungeremo anche il login Google, perché è un'opzione di login standard per le app professionali e non è troppo difficile da configurare. Supabase Auth è la scelta principale per tre motivi:

  1. Hai già un account Supabase dal tuo Founder's Toolkit.
  2. Supabase si occupa di tutte le cose complicate sulla sicurezza che ho detto prima, senza bisogno di fare altro.
  3. Il piano gratuito ti dà tutto quello che ti serve per il tuo MVP.

Un'altra cosa da tenere a mente: Supabase Auth supporta la sicurezza a livello di riga (RLS), cioè delle regole del database che puoi configurare per filtrare i dati in modo che ogni utente possa vedere solo i propri record. Ne abbiamo parlato quando abbiamo aggiunto Supabase al nostro Founder's Toolkit. Ma RLS non protegge i tuoi percorsi AI. Ecco perché dobbiamo aggiungere altre protezioni.

In questa fase non serve RLS, perché non stiamo creando tabelle personalizzate. Supabase gestisce internamente l'archiviazione degli utenti. RLS diventa importante se stai salvando dati specifici dell'utente nel tuo MVP, come la cronologia, le preferenze o le transazioni di un utente.

Autenticazione Supabase

Quando crei un progetto Supabase, l'autenticazione si attiva da sola. Non devi fare nessuna configurazione speciale nelle impostazioni di Supabase. Abbiamo messo in piedi alcune regole di sicurezza RLS specifiche nel Founder's Toolkit per gli utenti anonimi rispetto ai membri del team, ma per questo database useremo l'autenticazione predefinita integrata in Supabase.

Cosa configura automaticamente Supabase:

  •  Autenticazione tramite e-mail/password attivata
  • Tabella utenti (auth.users) creata
  • Token web JSON (JWT) rilasciati
  • Gestione delle sessioni fatta

Nella prima attività, aggiungerai una procedura di login e registrazione al tuo MVP, così solo chi è registrato potrà usare la tua app. Seguiremo una serie di istruzioni, provandole una per una per assicurarci che tutto funzioni prima di andare avanti. 

Ogni istruzione nelle attività di questa lezione usa il struttura Ruolo + Compito . È un modello di prompt che vale la pena provare:

  • Il ruolo dice all'IA che tipo di esperto deve essere
  • Il compito gli dice esattamente cosa fare.

Separare queste due cose rende le tue istruzioni più chiare e ti dà risultati migliori, soprattutto con modelli di IA più piccoli.

ATTIVITÀ 1

Aggiungi l'autenticazione utente con Supabase

Tempo stimato: 30 minuti

Aggiornerai la tua app in modo che serva fare il login per usarla. I nuovi utenti potranno registrarsi, quelli che tornano potranno accedere e chi non ha un account verrà reindirizzato alla pagina di login.

  1. Vai su GitHub e apri il tuo repository MVP. 
  2. Crea un nuovo ramo chiamato, tipo, add-auth. 
  3. Apri il tuo Codespace sul nuovo ramo.

Stai per fare dei cambiamenti importanti: il ramo delle funzionalità tiene al sicuro il ramo principale. Unirai al ramo principale solo dopo aver fatto dei test.

  1. Vai su Supabase. Dovresti avere un account e un progetto dal tuo Founder's Toolkit.
  2. Crea un nuovo progetto. Dagli un nome che vada bene per il tuo MVP.
  3. Dovrai creare una password per il database. Creane una e mettila al sicuro da qualche parte, perché una volta salvata non potrai più vederla.
  4. Configura le impostazioni di autenticazione:
    1. Vai alla tua Dashboard Supabase → Autenticazione → Impostazioni
    2. Vai alla sezione Accesso/Fornitori
    3. Trova Abilita conferme via e-mail
    4. Disattivalo (per fare una prova)
    5. Ricordati di riattivarlo quando passi alla produzione!
supabase user authentications screen
  1. Prendi l'URL del tuo progetto e le chiavi API
    1. Nella barra laterale sinistra, clicca su Impostazioni progetto (icona a forma di ingranaggio in basso).
    2. Clicca su API dati.
    3. Vedrai l'URL dell'API. Copialo e salvalo da qualche parte sul tuo computer. Ti servirà per la tua app.
    4. Torna al menu Impostazioni progetto e clicca su Chiavi API.
    5. Vedrai due chiavi: una chiave pubblica e una chiave segreta.
    6. Copia la chiave pubblicabile. Ti servirà anche per la tua app.

Sia l'URL pubblico che la chiave pubblicabile sono aperti e possono essere usati nell'interfaccia della tua app. Dato che Supabase usa RLS (Row Level Security), i dati sono al sicuro. Gli utenti possono registrarsi e accedere, ma possono vedere solo i propri dati e non hanno accesso come amministratori.

Qui non useremo la chiave segreta. Non va mai usata nel frontend. La useremo più avanti, quando arriveremo alla fase di elaborazione dei pagamenti.

  1. Nel tuo progetto, aggiungi un nuovo file .env nella tua cartella cartella principale. Dovresti già avere un file .env nella cartella server , ma dato che l'integrazione Supabase avviene nel frontend, deve essere nella directory principale del progetto.
  2. Aggiungi 2 righe al tuo file root .env
    VITE_SUPABASE_URL=il_tuo_URL_pubblico
    VITE_SUPABASE_KEY=la_tua_chiave_pubblicabile
  3. Aggiungi il tuo URL Supabase e la chiave pubblicabile a quelle righe nel file.

NOTA: stiamo usando React, quindi serve VITE_ per anteporre e frontend le variabili di ambiente. Il tuo framework potrebbe essere diverso.

Nel tuo terminale Codespace, scrivi:
npm install @supabase/supabase-js

Chiedi a Copilot (o un altro LLM) di aiutarti a creare il codice di accesso/registrazione per la tua app. Ecco un esempio di prompt.

Ruolo: Sei uno sviluppatore web che mi sta aiutando a mettere l'autenticazione degli utenti nella mia app React.

Cosa fare: aggiungi un modulo di registrazione e login Supabase e interagisci con l'URL Supabase. La schermata iniziale è quella di login e, una volta che l'utente ha fatto il login, compaiono le altre schede e l'utente può accedere a quelle 2 schede. Il modulo di login dovrebbe essere aggiunto come file Authform.jsx nella cartella Pages. Aggiungi un pulsante di logout alla schermata una volta che l'utente ha effettuato l'accesso, accanto agli altri pulsanti delle schede, in modo che l'utente possa effettuare il logout e tornare alla schermata principale.

Usa lo stesso formato per AuthForm che hai usato per le schede FindTutor e GetAdvice. 

Ho aggiunto l'URL del progetto Supabase e la chiave API pubblicabile al mio file .env come VITE_SUPABASE_URL e VITE_SUPABASE_URL. 

Prova il flusso completo:

  1. Iscriviti:
    • Vai su /signup
    • Inserisci email e password (almeno 6 caratteri)
    • Clicca su "Iscriviti"
    • Dovrebbe reindirizzare alla home page
  2. Controlla su Supabase:
    • Apri il pannello di controllo di Supabase → Autenticazione → Utenti
    • Dovresti vedere il tuo nuovo utente nella lista.
  3. Esci:
    • Clicca sul pulsante di logout
    • Dovrebbe reindirizzare alla pagina di accesso
  4. Accedi:
    • Inserisci lo stesso indirizzo e-mail/password
    • Dovrebbe reindirizzare alla home page
  5. Persistenza della sessione:
    • Aggiorna la pagina
    • Dovresti essere ancora connesso

Se qualcosa va storto, usa il modello "Teach Me" con Copilot: spiega cosa ti aspettavi, cosa è successo invece e chiedi a Copilot di darti una spiegazione prima di trovare una soluzione.

Tieni aperto il Codespace e il ramo per la prossima attività.

Anche se aggiungere l'opzione di accesso con Google è facoltativo, puoi farlo gratis e dà un tocco di professionalità alla tua app.

ATTIVITÀ 2

(Facoltativo) Aggiungi accesso Google

Tempo stimato: 30 minuti

  1. Vai alla tua Dashboard Supabase → Autenticazione → Provider.
  2. Cerca Google nella lista e attivalo. 
  3. Cerca l'URL di callback e copialo. Di solito è simile a questo: https://[YOUR-PROJECT-ID].supabase.co/auth/v1/callback.

ATTENZIONE: NON FARE CASINO ai grandi banner "Prova gratis" o "Attiva credito da 300 $" in cima allo schermo. Se clicchi su quei pulsanti, Google ti chiederà una carta di credito per verificare chi sei.

Non ti servono i 300 $ di credito o un "account di fatturazione" per usare le API Identity/Auth.

  1. Vai alla Console Google Cloud. Dovresti già avere un account se hai usato Google AI Studio.

  2. Crea un nuovo progetto e dagli un nome appropriato. Google ti permette di fare diversi progetti gratis per ogni account senza dover pagare o usare una carta di credito.

  3. Vai su API e servizi → Schermata di consenso OAuth.

    • Clicca su Inizia.
    • Inserisci il nome della tua app e l'indirizzo email dell'assistenza clienti.
    • Clicca Esterno per il pubblico.

      IMPORTANTE: Metti solo il "Nome dell'app" e l'"Email di supporto". Se ti chiedono di aggiungere un logo o "ambiti" sensibili (come leggere tutto il Drive di un utente), Google potrebbe segnalarlo per la verifica con una carta di credito.

      Consiglio da esperto per MVP:       non devi ancora inviare la richiesta di verifica finché sei in modalità "Test" o hai pochi utenti.

  1. Vai su API e servizi → Credenziali.
  2. Clicca su + Crea credenziali → ID client OAuth.
  3. Tipo di app: Scegli " App web".
  4. URI di reindirizzamento autorizzati: incolla l'URL di callback che hai copiato da Supabase sopra.
  5. Clicca su Crea. Ti daranno un ID cliente e una chiave segreta cliente.
  6. Assicurati di copiarli perché non potrai più accedervi una volta chiusa la finestra. Puoi scaricarli in formato JSON e averli entrambi a disposizione.
  1. Torna alla Dashboard di Supabase → Autenticazione → Provider → Google.
  2. Incolla il tuo ID cliente e il tuo segreto cliente.
  3. Attiva l'opzione Abilita provider Google e clicca su Salva.

Quando qualcuno accede con Google, deve sapere dove tornare dopo l'autenticazione. Di solito si va su http://localhost:3000/, ma il nostro frontend è su http://localhost:5173.

  1. Per essere sicuri che funzioni, copia l'URL di Github mentre la tua app è attiva (sarà qualcosa tipo https://codespace_name.app.github.dev/
  2. In Supabase, vai su Autenticazione → Configurazione URL. 
  3. Aggiungi il tuo URL Github come URL di reindirizzamento.
  1. Aggiungi l'URL di Github Codespace nel tuo .env come variabile, VITE_DEVELOPMENT_URL (VITE serve solo se la tua app è React).

Chiederai a Copilot di aggiungere la funzione di accesso a Google. Tieni presente che stiamo aggiungendo l'istruzione per includere l'URL di reindirizzamento. 

  1. Chiedi a Copilot di aggiungere il login Google come opzione nella schermata di login.

Ruolo: Sei uno sviluppatore web che mi sta aiutando a mettere l'autenticazione degli utenti nella mia app React.

Cosa fare: aggiungi l'accesso con Google come opzione alla mia pagina di login. Usa il metodo signInWithOAuth di Supabase con il provider "Google". Reindirizza alla variabile di ambiente VITE_DEVELOPMENT_URL.

Nota: se cambi spazio di codice, dovrai creare un nuovo file .env con il tuo reindirizzamento (oltre all'URL Supabase e alla chiave API per il tuo frontend).

Quando devi distribuire la tua app, dovrai aggiungere l'URL della tua app di produzione come reindirizzamento in Supabase e anche aggiungerlo come reindirizzamento nel tuo codice.

  1. Metti le tue modifiche sul tuo ramo.

Tieni il ramo e il Codespace aperti per la prossima attività.

Proteggere i tuoi percorsi API

La tua app ora ha una pagina di accesso, quindi gli utenti devono fare login per vederla. Ma il tuo backend Express.js continua a gestire ogni richiesta che riceve, anche se la persona non ha fatto login tramite il tuo frontend. Qualcuno potrebbe aprire una console del browser e chiamare direttamente la tua API, saltando completamente la pagina di accesso.

Questo è il problema delle "finestre". Hai chiuso la porta d'ingresso con una pagina di login, ma le finestre (le tue rotte API) sono ancora aperte. Per risolvere questo problema, dovrai aggiungere un controllo di sicurezza (chiamato middleware) al tuo backend che controlla che ogni richiesta API venga davvero da un utente che ha fatto il login.

Devi:

Proteggi i percorsi che:

  • Costo in soldi (chiamate AI, uso API)
  • Modifica i dati (crea, aggiorna, elimina)
  • Mostra le informazioni specifiche dell'utente

Resta pubblico:

  • Controlli sanitari
  • Risorse statiche
  • Homepage (se visibile a tutti)

Quando il tuo backend riceve una richiesta:

  1. Controlla: "Questa richiesta ha una prova che l'utente ha fatto il login?"
  2. Se sì → procedi normalmente con la richiesta
  3. Se no → respingi la richiesta con un errore "401 Non autorizzato"

La "prova" è un JWT (JSON Web Token), cioè una lunga stringa di caratteri che Supabase dà a ogni utente che fa il login. Il tuo frontend mette questo token in ogni richiesta che fa al backend. Il backend controlla il token con Supabase per vedere se è vero e non è scaduto.

Cosa c'è dentro:

  • Chi è l'utente (il suo ID utente, l'indirizzo e-mail)
  • Quando è stato pubblicato
  • Quando scade
  • Una firma crittografica che dimostra che Supabase l'ha emessa e che non è stata modificata.
ATTIVITÀ 3

Proteggi i tuoi percorsi API

Tempo stimato: 25 minuti

Se non sei già in Codespace, aprilo con lo stesso ramo usato per le attività 1 e 2.

  1. Nel tuo server cartella (dove c'è il tuo backend Express), metti Supabase:
    • Nella finestra del terminale, digita:
      cd server
      npm install @supabase/supabase-js
  1. Torna al tuo progetto Supabase e prendi il Chiave API segreta (non la chiave che si può pubblicare).
    • Vai su Impostazioni progetto → Chiavi API
    • Scrolla verso il basso fino alle chiavi segrete.
    • Copialo e mettilo al sicuro sul tuo computer.
  2. Aggiorna il file file .env nel tuo cartella server (non il file .env nella directory principale, ma il file server/.env è un file separato per il backend).
  3. Aggiungi queste righe, incollando il tuo URL Supabase e la tua chiave segreta:
    SUPABASE_URL=il_tuo_URL_pubblico
    SUPABASE_SERVICE_ROLE_KEY=la_tua_chiave_segreta

Importante:

  • Usa lo STESSO SUPABASE_URL del tuo frontend
  • Usa la CHIAVE SEGRETA (non quella che si può pubblicare) per SUPABASE_SERVICE_ROLE_KEY.
  • La chiave segreta ha i permessi di amministratore: NON metterla mai nel codice frontend.
  1. Usa questo comando per chiedere a Copilot di aggiungere codice al codice backend per assicurarti che le chiamate API siano sicure.

Ruolo: Sei uno sviluppatore backend che mi aiuta a proteggere la mia API Express.js.

Compito: 

  1. Importa la libreria client Supabase (@supabase/supabase-js)
  2. Inizia a usare un client Supabase con SUPABASE_URL e SUPABASE_SERVICE_ROLE_KEY dalle variabili di ambiente.
  3. Aggiungere una funzione middleware di autenticazione al mio backend Express.js.
    • Estrai il token
    • Chiedi a Supabase di controllare il token
    • Se sì → lascia che la richiesta vada avanti
    • Se no → restituisci errore 401

  4. Usa questo middleware SOLO per i percorsi che chiamano API esterne.

  5. Non metterlo su pagine pubbliche come la homepage o il controllo di integrità.

  1. Dai un'occhiata al codice che hai creato.

    Dovresti vedere una funzione chiamata requireAuth (o qualcosa di simile) che controlla l'intestazione Authorization, prende il token e lo verifica con Supabase. Dovresti anche vederla applicata al tuo percorso API ma non ai percorsi pubblici.

    Le parti principali dovrebbero essere simili a questo codice:
				
					async function requireAuth(req, res, next) {
  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  const token = authHeader.split(' ')[1];
  const { data, error } = await supabase.auth.getUser(token);

  if (error || !data.user) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  req.user = data.user;
  next();
}

// Protected route — security check runs first
app.post('/api/ai-query', requireAuth, async (req, res) => {
  // This code only runs if the user is logged in
});

// Public route — no security check needed
app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

Per TutorMatch, il percorso protetto è app.post(‘/api/ai-query’, requireAuth, …). La tua app avrà nomi di percorso diversi, ma il modello è lo stesso: proteggi i percorsi che costano soldi per funzionare.

Il tuo backend ora vuole una prova di accesso per ogni richiesta, ma il tuo frontend non la sta ancora inviando.

  1. Chiedi a Copilot di aggiornare il tuo codice frontend. Ecco un esempio di prompt.

Ruolo: Sei uno sviluppatore frontend che mi aiuta a collegare la mia app React al mio backend Express.js protetto.

Cosa devo fare: aggiornare tutte le chiamate API frontend ai percorsi protetti per includere il token di sessione Supabase nell'intestazione Authorization.

  1. Dai un'occhiata al codice aggiornato da Copilot.

    Dovresti vedere che le tue chiamate fetch ora includono un'intestazione Authorization. Ecco come appare la modifica:
				
					const { data: { session } } = await supabase.auth.getSession();

if (!session) {
  window.location.href = '/login';
  return;
}

const response = await fetch('/api/ai-query', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${session.access_token}`
  },
  body: JSON.stringify({ prompt: userInput })
});

È qui che tutto si collega:

  1. Supabase Auth dà al tuo frontend un token quando l'utente fa il login.
  2. Il tuo frontend manda quel token con ogni richiesta.
  3. Il tuo backend lo controlla.
    • Se la richiesta è ok, va avanti.
    • Altrimenti, è bloccato.
  1. Prova la tua app in Codespaces e vedi come funziona in due casi:

Test 1 — Utente connesso (dovrebbe funzionare):

    1. Apri la tua app e accedi con le tue credenziali di prova.
    2. Usa la tua funzione AI come al solito.
    3. Dovrebbe funzionare esattamente come prima.

Se funziona, il tuo frontend sta inviando il token e il tuo backend lo sta accettando.

Test 2 — Nessun login (dovrebbe essere bloccato):

    1. Esci dall'app, così l'utente non sarà più connesso.
    2. Apri DevTools (F12 o clicca con il tasto destro del mouse su Ispeziona), poi clicca sulla scheda Console.
    3. Prova a chiamare direttamente la tua API incollando quanto segue nella Console (Nota: il nostro comando fetch è /api/ai-query – cambia il tuo comando fetch per usare lo stesso dal tuo codice frontend).
				
					fetch('/api/ai-query', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: 'test' })
}).then(r => r.json()).then(console.log);

You should see { error: “Unauthorized” } — NOT an AI response.

Se entrambi i test vanno bene, la tua app è al sicuro. La pagina di login protegge la porta d'ingresso. Il middleware protegge le finestre.

  1. Controlla un'ultima volta per assicurarti che l'autenticazione utente funzioni:

    • Esci completamente e aggiorna la pagina: dovresti vedere la pagina di accesso.
    • Accedi e controlla che la funzione AI funzioni
    • Apri la console DevTools e prova a chiamare la tua API senza il token (come nel Test 2) — controlla che ti venga mostrato un errore 401.

  2. Metti in stage e conferma le modifiche nel controllo del codice sorgente, con un messaggio tipo "Aggiungi protezione del percorso API con middleware di autenticazione", quindi esegui il push sul tuo branch.

  3. Vai su Github, crea una Pull Request dal tuo ramo add-auth , controlla le modifiche e unisci al ramo principale. 

Risoluzione dei problemi

Ecco alcuni problemi che potrebbero capitare e le possibili soluzioni.

Apri DevTools, poi la scheda Rete, quindi clicca sulla richiesta API e guarda le intestazioni della richiesta. Dovresti vedere Authorization: Bearer eyJ…. Se l'intestazione non c'è, controlla che la chiamata getSession() funzioni.

Controlla di aver applicato requireAuth al percorso giusto.

Assicurati di usare SUPABASE_SERVICE_ROLE_KEY (non SUPABASE_ANON_KEY) sul backend. La chiave del ruolo di servizio ha il permesso di controllare i token di qualsiasi utente.

Controlla che la libreria client Supabase sia installata (npm install @supabase/supabase-js) e importala all'inizio del tuo file server.

Riflessione

Aggiungere l'autenticazione degli utenti è un passo importante per rendere la tua app professionale e sicura. Pensa a queste domande:

Sunset and reflection over lake
01 Sicurezza dell'

Cosa potrebbe succedere se avessi solo una pagina di accesso ma nessun controllo di sicurezza nel backend?
02

a i tuoi percorsi API
Nel tuo MVP, quali percorsi hanno bisogno di un middleware di autenticazione e quali possono rimanere pubblici? Come hai deciso?
03 Prompting di

In che modo la struttura Ruolo + Compito ha influito sulla qualità del codice generato dall'IA? Sono diversi (migliori/peggiori) rispetto ai risultati dei prompt precedenti?

Termini chiave

  • Autenticazione: controllare chi sei davvero, cioè confermare che sei proprio tu (quando ti registri e accedi). È diversa dall'autorizzazione, che decide a cosa puoi accedere.
  • Autorizzazione: controllare cosa può fare un utente autenticato. La sicurezza a livello di riga (RLS) è un modo per farlo a livello di database.
  • Hashing delle password: trasformare una password in una stringa illeggibile prima di salvarla. Supabase Auth lo fa automaticamente. Salvare le password in chiaro è un grosso rischio per la sicurezza.
  • Token di sessione: un identificatore temporaneo che mantiene l'utente connesso dopo l'autenticazione. Supabase Auth li gestisce automaticamente.
  • Middleware di autenticazione: codice che si avvia prima del gestore di route per controllare che la richiesta arrivi da un utente che ha fatto il login. Se l'utente non è autenticato, il middleware blocca la richiesta.
  • Intestazione di autorizzazione: un'intestazione HTTP che porta le credenziali di autenticazione (di solito un token) dal frontend al backend con ogni richiesta.
  • Bearer Token: A type of authentication token sent in the Authorization header. The format is Bearer <token>. “Bearer” means “whoever carries this token is authorized.”
  • JSON Web Token (JWT): un formato standard per i token di autenticazione. Ha dentro informazioni codificate sull'utente e una data di scadenza. Supabase usa i JWT per gestire le sessioni.
  • OAuth: uno standard di autenticazione che permette agli utenti di accedere con un account già esistente (come Google) invece di creare una nuova password. È l'abbreviazione di "Open Authorization".

Risorse aggiuntive

Contenuto della lezione
Quiz precedente
Torna al corso
Prossimo Quiz