Autentificarea utilizatorului

  • Creează un flux de autentificare și înregistrare folosind Supabase Auth și autentificarea prin Google pentru a controla cine poate accesa aplicația ta
  • Adaugă un middleware de autentificare în backend-ul tău Express.js pentru a-ți proteja rutele API împotriva cererilor neautorizate
  • Testați securitatea atât la nivel de frontend, cât și la nivel de backend, pentru a vă asigura că numai utilizatorii autentificați pot activa funcțiile de IA
  • Pagini de înregistrare și de autentificare care creează conturi de utilizator și mențin utilizatorii autentificați
  • Rute API protejate cu un middleware de backend care verifică tokenurile de autentificare înainte de procesarea cererilor

Studenții au creat un MVP testat într-un depozit GitHub, care include un frontend React și un backend Express.js. Frontend-ul și backend-ul pot rula ca două procese separate în Codespaces.

Securizarea aplicației prin autentificare

În acest moment, oricine are link-ul tău Codespace poate utiliza aplicația ta. Nu există nicio pagină de autentificare, iar backend-ul tău Express.js procesează fiecare cerere pe care o primește, fără nicio verificare. Dacă cineva îți descoperă adresa URL, poate declanșa apeluri către API-ul de IA care îți generează costuri. Așa cum ai constatat atunci când ți-ai elaborat planul financiar, fiecare apel către API are un cost. Protejarea acestor apeluri nu este doar o decizie tehnică, ci una de afaceri.

Pe parcursul acestei unități, vom folosi TutorMatch ca exemplu de referință. Veți urma exemplele din TutorMatch, apoi veți adapta fiecare pas la propriul vostru MVP.

Acest dispozitiv oferă două niveluri de protecție.

  1. Autentificarea utilizatorilor — un ecran de autentificare, astfel încât numai utilizatorii înregistrați să poată accesa aplicația ta. 
  2. Verificare de securitate în backend-ul dvs. care verifică dacă fiecare solicitare API provine efectiv de la un utilizator autentificat.

Gândește-te la asta în felul următor: pagina de autentificare protejează ușa de la intrare. Verificarea de securitate din backend protejează ferestrele. Împreună, ele asigură protecția aplicației tale din ambele părți.

De ce să nu-ți păstrezi singur parolele?

Cea mai intuitivă abordare în ceea ce privește conturile utilizatorilor este, totodată, și cea mai periculoasă: se creează un tabel „utilizatori”, se stochează adresa de e-mail și parola fiecărei persoane la înregistrare și se verifică parola la autentificare.

Problema este că această metodă stochează parolele sub formă de text simplu, care poate fi citit de oricine accesează baza ta de date. Dacă baza ta de date ar fi vreodată expusă, parolele tuturor utilizatorilor ar fi compromise. Aplicațiile profesionale nu procedează niciodată astfel.

 Autentificarea securizată presupune coordonarea mai multor elemente:

  • hash-ul parolelor – transformarea parolelor în șiruri de caractere ilizibile înainte de stocare
  • tokenuri de sesiune – identificatori temporari care permit utilizatorilor să rămână autentificați fără a fi nevoiți să-și introducă parola pe fiecare pagină
  • stocare securizată – gestionarea criptată a datelor de autentificare, astfel încât acestea să nu fie niciodată expuse, nici în timpul transmiterii, nici în starea de repaus.

Realizarea tuturor acestor elemente de la zero este un proces complex și predispus la erori. De aceea există serviciile de autentificare — ele se ocupă de aspectele legate de securitate, astfel încât tu să te poți concentra pe aplicația ta.

user authentication login screen

Există mai multe opțiuni atunci când se alege un serviciu de autentificare a utilizatorilor:

Opțiune

Cum funcționează

Nivel gratuit

Complexitate

Verdict

Păstrați parolele la voi

Creează un tabel pentru utilizatori, generează parole hash, gestionează sesiunile manual

Gratuit

Risc ridicat — greșelile de securitate sunt ușor de comis și periculoase

Nu este recomandat pentru MVP-uri

Autentificare Google (OAuth)

Utilizatorii fac clic pe „Autentificare cu Google”. Google se ocupă de toate aspectele legate de securitate.

Gratuit

Mediu — necesită configurarea Google Cloud Console

O opțiune excelentă, dar implică pași suplimentari de configurare

Auth0 / Funcționar

Servicii de autentificare ale unor terți cu pagini de autentificare predefinite

Este disponibil un pachet gratuit

Medium — este necesar un cont nou și SDK-ul

E bine, dar înseamnă că trebuie să gestionezi încă un serviciu

Autentificare Supabase

Integrat în Supabase. Se ocupă automat de generarea de hash-uri, sesiuni și stocare.

Gratuit (inclus)

Scăzut — ai deja un cont Supabase

O opțiune excelentă pentru MVP

În această lecție vom folosi Supabase Auth pentru autentificarea utilizatorilor. Vom adăuga, de asemenea, opțiunea de autentificare prin Google, întrucât aceasta este o opțiune standard pentru aplicațiile profesionale și nu este prea dificil de configurat. Supabase Auth este alegerea principală din trei motive:

  1. Ai deja un cont Supabase din pachetul Founder’s Toolkit.
  2. Supabase gestionează din start toate aspectele complexe legate de securitate menționate mai sus.
  3. Pachetul gratuit acoperă tot ce ai nevoie pentru MVP-ul tău.

Încă un aspect de luat în considerare: Supabase Auth acceptă securitatea la nivel de rând (RLS), adică reguli de bază de date pe care le configurați pentru a filtra datele, astfel încât fiecare utilizator să poată vedea doar propriile înregistrări. Am abordat acest subiect când am adăugat Supabase în „Founder’s Toolkit”. Totuși, RLS nu vă va proteja rutele AI. De aceea, trebuie să adăugăm măsuri suplimentare de protecție.

„RLS nu este necesar în această etapă, deoarece nu creăm tabele personalizate. Supabase gestionează stocarea datelor utilizatorilor la nivel intern. RLS devine relevant dacă stocați date specifice utilizatorilor în MVP-ul dvs. — cum ar fi istoricul, preferințele sau tranzacțiile unui utilizator.”

Autentificarea Supabase

Când creezi un proiect Supabase, autentificarea este activată automat. Nu este necesar să efectuezi nicio configurare specială în setările Supabase. Am configurat câteva politici de securitate RLS specifice în Founder’s Toolkit pentru utilizatorii anonimi, în comparație cu membrii echipei, dar pentru această bază de date vom folosi autentificarea implicită integrată în Supabase.

Ce configurează Supabase în mod automat:

  •  Autentificarea prin e-mail/parolă este activată
  • S-a creat tabelul de utilizatori (auth.users)
  • JSON Web Tokens (JWT) emise
  • Gestionarea sesiunilor asigurată

În prima activitate, veți adăuga un flux de autentificare și înregistrare la MVP-ul vostru, astfel încât doar utilizatorii înregistrați să poată accesa aplicația. Vom parcurge o serie de pași, efectuând teste după fiecare dintre ei pentru a ne asigura că totul funcționează corect înainte de a trece mai departe. 

Fiecare indicație din activitățile acestei lecții utilizează structura Rol + Sarcină . Acesta este un model de elaborare a instrucțiunilor care merită exersat:

  • Rolul indică IA ce tip de expert trebuie să fie
  • Sarcina îi spune exact ce trebuie să facă.

Dacă le separi pe cele două, instrucțiunile tale devin mai clare și se obțin rezultate mai bune, mai ales în cazul modelelor de IA mai mici.

ACTIVITATEA 1

Adăugarea autentificării utilizatorilor cu Supabase

Timp estimat: 30 minute

Vei actualiza aplicația astfel încât utilizarea acesteia să necesite autentificare. Utilizatorii noi se vor putea înregistra, utilizatorii existenți se vor putea autentifica, iar cei care nu au un cont vor fi redirecționați către pagina de autentificare.

  1. Accesează GitHub și deschide depozitul tău MVP. 
  2. Creează o ramură nouă cu un nume de genul „add-auth”. 
  3. Deschideți Codespace-ul pe noua ramură.

Ești pe cale să faci modificări semnificative — ramura de funcționalități protejează ramura principală. Vei efectua fuziunea cu ramura principală abia după testare.

  1. Accesați Supabase. Ar trebui să aveți deja un cont și un proiect din „Founder’s Toolkit”.
  2. Creează un proiect nou. Alege un nume potrivit pentru MVP-ul tău.
  3. Va trebui să creați o parolă pentru baza de date. Creați una și păstrați-o într-un loc sigur, deoarece nu o veți mai putea vedea odată ce ați salvat-o.
  4. Configurați setările de autentificare:
    1. Accesează tabloul de bord Supabase → Autentificare → Setări
    2. Derulați în jos până la secțiunea „Autentificare/Furnizori ”
    3. Găsiți opțiunea „Activați confirmările prin e-mail”
    4. De z activează-l (pentru testare)
    5. Nu uita să-l activezi din nou când treci la producție!
supabase user authentications screen
  1. Obțineți adresa URL a proiectului și cheile API
    1. În bara laterală din stânga, faceți clic pe „Setări proiect” (pictograma roată dințată din partea de jos)
    2. Faceți clic pe „Data API”.
    3. Vei vedea adresa URL a API-ului. Copiaz-o și salveaz-o undeva pe computer. Vei avea nevoie de ea pentru aplicația ta.
    4. Reveniți la meniul „Setări proiect” și faceți clic pe „Chei API”.
    5. Vei vedea două chei: cheia publică și cheile secrete.
    6. Copiați cheia de publicare. Veți avea nevoie de aceasta și pentru aplicația dumneavoastră.

Atât adresa URL publică, cât și cheia publică sunt accesibile și pot fi utilizate în interfața aplicației tale. Deoarece Supabase utilizează RLS (Row Level Security), datele sunt protejate. Utilizatorii se pot înregistra și se pot autentifica, dar pot vedea doar propriile date și nu li se acordă acces de administrator.

Nu vom folosi cheia secretă aici. Aceasta nu trebuie folosită niciodată în interfața cu utilizatorul. O vom folosi mai târziu, când vom ajunge la etapa de procesare a plăților.

  1. În proiectul tău, adaugă un nou fișier fișier .env în folderul rădăcină. Veți avea deja un fișier fișier .env în server , dar, întrucât integrarea Supabase are loc în frontend, acesta trebuie să se afle în directorul rădăcină al proiectului.
  2. Adaugă 2 linii în fișierul root .env
    VITE_SUPABASE_URL=URL-ul_tău_public
    VITE_SUPABASE_KEY=cheia_ta_publicabilă
  3. Adaugă adresa URL reală a Supabase și cheia de publicare în rândurile respective din fișier.

NOTĂ: Folosim React, așa că este necesar să adăugăm prefixul „VITE_” la variabilele de mediu pentru frontend. Este posibil ca framework-ul dvs. să fie diferit.

În terminalul Codespace, tastează
npm install @supabase/supabase-js

Solicită-i lui Copilot (sau unui alt model LLM) să te ajute să generezi codul de autentificare/înregistrare pentru aplicația ta. Iată un exemplu de solicitare.

Rol: Ești un dezvoltator web care mă ajută să integrez funcționalitatea de autentificare a utilizatorilor în aplicația mea React.

Sarcină: Adăugați un formular Supabase de înregistrare și autentificare și asigurați interacțiunea cu adresa URL Supabase. Ecranul inițial este cel de autentificare, iar odată ce utilizatorul se autentifică, apar celelalte file, iar utilizatorul poate accesa cele două file. Formularul de autentificare trebuie adăugat ca fișier Authform.jsx în folderul „Pages”. Adăugați un buton de deconectare pe ecran după ce utilizatorul se autentifică, lângă butoanele celorlalte file, astfel încât utilizatorul să se poată deconecta și să revină la ecranul principal.

Folosește pentru AuthForm aceeași formatare pe care ai folosit-o pentru filele FindTutor și GetAdvice. 

Am adăugat adresa URL a proiectului Supabase și cheia API publică în fișierul meu .env, sub denumirile VITE_SUPABASE_URL și VITE_SUPABASE_URL. 

Testați fluxul complet:

  1. Înscrie-te:
    • Accesează /signup
    • Introduceți adresa de e-mail și parola (minim 6 caractere)
    • Dă clic pe „Înscrie-te”
    • Ar trebui să redirecționeze către pagina principală
  2. Verificați în Supabase:
    • Deschideți Tabloul de bord Supabase → Autentificare → Utilizatori
    • Ar trebui să-l vezi pe noul utilizator în listă
  3. Deconectare:
    • Faceți clic pe butonul „Deconectare”
    • Ar trebui să redirecționeze către pagina de autentificare
  4. Autentificare:
    • Introduceți aceeași adresă de e-mail și aceeași parolă
    • Ar trebui să redirecționeze către pagina principală
  5. Persistența sesiunii:
    • Reîmprospătează pagina
    • Ar trebui să fii încă conectat

Dacă vreun pas nu funcționează, folosește modelul „Teach Me” cu Copilot: descrie ce te așteptai să se întâmple, ce s-a întâmplat de fapt și roagă-l pe Copilot să-ți explice înainte de a-ți oferi o soluție.

Păstrați Codespace-ul și ramura deschise pentru următoarea activitate.

Deși adăugarea opțiunii de autentificare prin Google este opțională, o poți face gratuit, iar aceasta conferă aplicației tale un plus de profesionalism.

ACTIVITATEA 2

(Opțional) Adăugare autentificare Google

Timp estimat: 30 minute

  1. Accesați tabloul de bord Supabase → Autentificare → Furnizori.
  2. Găsește Google în listă și activează-l. 
  3. Căutați adresa URL de redirecționare și copiați-o. De obicei, aceasta are următorul format: https://[YOUR-PROJECT-ID].supabase.co/auth/v1/callback.

IMPORTANT: IGNORAȚI bannerele mari cu textul „Încercați gratuit” sau „Activați un credit de 300 $” din partea de sus a ecranului. Dacă faceți clic pe aceste butoane, Google vă va solicita datele unei cărți de credit pentru verificarea identității.

Nu aveți nevoie de creditul de 300 $ sau de un „cont de facturare” pentru a utiliza API-urile de identitate/autentificare.

  1. Accesați Google Cloud Console. Ar trebui să aveți deja un cont creat în urma utilizării Google AI Studio.

  2. Creați un proiect nou și denumiți-l corespunzător. Google permite crearea mai multor proiecte gratuite pe cont, fără facturare și fără utilizarea unui card de credit.

  3. Accesați secțiunea API-uri și servicii → Ecranul de consimțământ OAuth.

    • Faceți clic pe „Începeți”.
    • Introduceți numele aplicației și adresa de e-mail pentru asistența utilizatorilor.
    • Faceți clic Extern pentru public.

      IMPORTANT: Introduceți doar „Numele aplicației” și „Adresa de e-mail pentru asistență”. Dacă vi se solicită să adăugați un logo sau „domenii de acces” sensibile (cum ar fi citirea întregului conținut din Drive-ul unui utilizator), Google ar putea marca aplicația pentru verificare cu un card de credit.

      Sfat pentru MVP:       Nu este necesar să trimiteți cererea de verificare încă, atâta timp cât rămâneți în modul „Testare” sau aveți puțini utilizatori.

  1. Accesați secțiunea API-uri și servicii → Credențiale.
  2. Faceți clic pe + Creare date de autentificare → ID client OAuth.
  3. Tipul aplicației: Selectați „Aplicație web”.
  4. URI-uri de redirecționare autorizate: Lipiți aici URL-ul de callback pe care l-ați copiat mai sus din Supabase.
  5. Faceți clic pe „Creare”. Veți primi un ID de client și o cheie secretă de client.
  6. Asigură-te că le copiezi, deoarece nu le vei mai putea accesa odată ce închizi fereastra. Le poți descărca în format JSON, astfel încât să le ai pe amândouă la îndemână.
  1. Reveniți la Tabloul de bord Supabase → Autentificare → Furnizori → Google.
  2. Lipiți ID-ul clientului și cheia secretă a clientului.
  3. Activa ți opțiunea „Enable Google Provider ” și faceți clic pe „Save”.

Atunci când un utilizator se autentifică prin Google, acesta trebuie să știe unde să se întoarcă după autentificare. Adresa implicită este http://localhost:3000/, dar interfața noastră rulează pe http://localhost:5173.

  1. Pentru a te asigura că funcționează, copiază adresa URL de pe GitHub în timp ce aplicația ta rulează (va arăta cam așa: https://codespace_name.app.github.dev/
  2. În Supabase, accesați Autentificare → Configurare URL. 
  3. Adaugă adresa URL de pe GitHub ca adresă URL de redirecționare.
  1. Adaugă adresa URL a Codespace de pe GitHub în fișierul fișierul .env ca variabilă, VITE_DEVELOPMENT_URL (VITE este necesar doar dacă aplicația ta este React).

Veți solicita Copilot să adauge funcționalitatea de autentificare prin Google. Rețineți că adăugăm instrucțiunea de a include adresa URL de redirecționare. 

  1. Solicită-i lui Copilot să adauge autentificarea prin Google ca opțiune în ecranul de autentificare.

Rol: Ești un dezvoltator web care mă ajută să integrez funcționalitatea de autentificare a utilizatorilor în aplicația mea React.

Sarcină: Adaugă autentificarea prin Google ca opțiune pe pagina mea de autentificare. Folosește metoda signInWithOAuth din Supabase cu furnizorul „Google”. Redirecționează către variabila de mediu VITE_DEVELOPMENT_URL.

Notă: Dacă schimbi codespaces, va trebui să creezi un nou fișier .env cu redirecționarea ta (precum și cu adresa URL Supabase și cheia API pentru frontend).

Când vei trece la implementarea aplicației, va trebui să adaugi adresa URL a aplicației din mediul de producție ca redirecționare în Supabase și, de asemenea, să o adaugi ca redirecționare în codul tău.

  1. Salvează modificările în ramura ta.

Păstrați ramura și Codespace-ul deschise pentru următoarea activitate.

Securizarea rutelor API-ului dumneavoastră

Aplicația ta are acum o pagină de autentificare, așa că utilizatorii trebuie să se autentifice pentru a o putea accesa. Totuși, backend-ul tău Express.js procesează în continuare fiecare cerere pe care o primește, chiar dacă utilizatorul nu s-a autentificat prin intermediul frontend-ului. Cineva ar putea deschide consola browserului și ar putea apela API-ul tău direct, ocolind complet pagina de autentificare.

Aceasta este problema „ferestrelor”. Ai blocat ușa de la intrare cu o pagină de autentificare, dar ferestrele (rutele API-ului tău) sunt încă deschise. Pentru a remedia această problemă, vei adăuga o verificare de securitate (numit middleware) la backend-ul tău, care verifică dacă fiecare cerere API provine într-adevăr de la un utilizator autentificat.

Trebuie să:

Protejați rutele care:

  • Costuri (apeluri AI, utilizarea API-ului)
  • Modificarea datelor (creare, actualizare, ștergere)
  • Afișează informații specifice utilizatorului

A se menține public:

  • Verificări medicale
  • Resurse statice
  • Pagina de start (dacă este accesibilă publicului)

Când backend-ul tău primește o solicitare:

  1. Verifică: „Această solicitare a fost însoțită de o dovadă că utilizatorul este autentificat?”
  2. Dacă da → se procesează cererea în mod obișnuit
  3. Dacă nu → respinge cererea cu eroarea „401 Neautorizat”

„Dovada” este un JWT (JSON Web Token), un șir lung de caractere pe care Supabase îl atribuie fiecărui utilizator autentificat. Aplicația ta frontend include acest token în fiecare cerere pe care o trimite către backend. Backend-ul verifică tokenul cu Supabase pentru a confirma că este valid și că nu a expirat.

Ce conține:

  • Identitatea utilizatorului (ID-ul de utilizator, adresa de e-mail)
  • Când a fost emis
  • La expirare
  • O semnătură criptografică care dovedește că a fost emisă de Supabase și că nu a fost modificată
ACTIVITATEA 3

Securizați rutele API-ului dumneavoastră

Timp estimat: 25 minute

Dacă nu vă aflați deja în Codespace, deschideți-l, folosind aceeași ramură utilizată pentru Activitățile 1 și 2.

  1. În server folder (unde se află backend-ul Express), instalează Supabase:
    • În fereastra terminalului, executați următoarele comenzi: `
      `, `cd server`, `
      `, `npm install @supabase/supabase-js`
  1. Întoarce-te la proiectul tău Supabase și accesează Cheie API secretă (nu cheia publică).
    • Accesați Setări proiect → Chei API
    • Derulați în jos până la secțiunea „Cheie(i) secretă(e)”.
    • Copiază-l și salvează-l într-un loc sigur pe computerul tău.
  2. Actualizează fișierul fișierul .env din serverul tău server (nu fișierul .env din directorul rădăcină, ci cel din server/.env este un fișier separat pentru backend).
  3. Adaugă aceste linii, inserând adresa URL și cheia secretă ale contului tău Supabase:
    SUPABASE_URL=adresa_ta_publică
    SUPABASE_SERVICE_ROLE_KEY=cheia_ta_secretă

Important:

  • Folosiți ACEEAȘI adresă SUPABASE_URL ca și pentru interfața de utilizator
  • Utilizați CHEIA SECRETĂ (nu cheia publică) pentru SUPABASE_SERVICE_ROLE_KEY
  • Cheia secretă are drepturi de administrator – NU o dezvăluiți NICIODATĂ în codul frontend
  1. Folosește această solicitare pentru a-i cere lui Copilot să adauge cod la codul backend, astfel încât apelurile API să fie sigure.

Rol: Ești un dezvoltator backend care mă ajută să securizez API-ul meu Express.js.

Sarcină: 

  1. Importați biblioteca client Supabase (@supabase/supabase-js)
  2. Inițializează un client Supabase folosind variabilele de mediu SUPABASE_URL și SUPABASE_SERVICE_ROLE_KEY.
  3. Adăugarea unei funcții de middleware de autentificare în backend-ul meu Express.js.
    • Extrage tokenul
    • Solicită Supabase să valideze tokenul
    • Dacă da → permite continuarea cererii
    • Dacă nu → returnează eroarea 401

  4. Aplicați acest middleware DOAR rutelor care apelează API-uri externe

  5. NU o aplicați pe paginile cu acces public, cum ar fi pagina de start sau pagina de verificare a stării de sănătate

  1. Verificați codul generat.

    Ar trebui să observați o funcție numită requireAuth (sau cu un nume similar) care verifică prezența unui antet de autorizare, extrage tokenul și îl verifică cu Supabase. De asemenea, ar trebui să observați că aceasta este aplicată rutei API-ului dvs., dar nu și rutelor publice.

    Părțile esențiale ar trebui să arate similar cu acest cod:
				
					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' });
});

Pentru TutorMatch, ruta protejată este app.post(‘/api/ai-query’, requireAuth, …). Aplicația ta va avea denumiri diferite pentru rute, dar modelul este același – protejează rutele a căror execuție implică costuri.

Backend-ul tău solicită acum dovada autentificării la fiecare cerere, dar frontend-ul tău nu o trimite încă.

  1. Solicită-i lui Copilot să actualizeze codul frontend-ului tău. Iată un exemplu de solicitare.

Rol: Ești un dezvoltator front-end care mă ajută să conectez aplicația mea React la backend-ul meu securizat Express.js.

Sarcină: Să actualizez toate apelurile API din frontend către rutele protejate, astfel încât să includ tokenul de sesiune Supabase în antetul „Authorization”.

  1. Uită-te la codul actualizat de Copilot.

    Ar trebui să observi că apelurile tale de tip „fetch” includ acum un antet de autorizare. Iată cum arată modificarea:
				
					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 })
});

Aici se leagă totul:

  1. Supabase Auth atribuie frontend-ului tău un token atunci când utilizatorul se autentifică.
  2. Interfața ta trimite acel token odată cu fiecare cerere.
  3. Backend-ul tău verifică acest lucru.
    • Dacă este validă, cererea este acceptată.
    • Dacă nu, înseamnă că este blocat.
  1. Rulați aplicația în Codespaces și testați două scenarii:

Testul 1 — Utilizator autentificat (ar trebui să funcționeze):

    1. Deschide aplicația și conectează-te folosind datele de autentificare de test.
    2. Folosește funcția de IA ca de obicei.
    3. Ar trebui să funcționeze exact ca înainte.

Dacă funcționează, frontend-ul tău trimite tokenul, iar backend-ul tău îl acceptă.

Testul 2 — Fără autentificare (ar trebui blocat):

    1. Deconectează-te din aplicație, astfel încât utilizatorul să nu mai fie conectat.
    2. Deschideți DevTools (F12 sau clic dreapta și selectați „Inspect”), apoi faceți clic pe fila „Consolă ”.
    3. Încearcă să apelezi direct API-ul tău, lipind următorul cod în Consolă (Notă: comandanoastră de preluare este /api/ai-query – modifică comanda ta de preluare pentru a folosi aceeași comandă din codul tău 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.

Dacă ambele teste sunt trecute cu succes, aplicația ta este securizată. Pagina de autentificare protejează ușa de la intrare. Middleware-ul protejează ferestrele.

  1. Verifică încă o dată pentru a te asigura că autentificarea utilizatorului funcționează:

    • Deconectați-vă complet și reîmprospătați pagina — ar trebui să vedeți pagina de autentificare
    • Autentifică-te și verifică dacă funcția AI funcționează
    • Deschideți consola DevTools și încercați să apelați API-ul fără token (ca în Testul 2) — verificați dacă primiți o eroare 401

  2. Marcați și confirmați modificările în sistemul de control al versiunilor, cu un mesaj de genul „Adăugarea protecției rutelor API cu middleware de autentificare”, apoi încărcați-le în ramura dvs.

  3. Accesează GitHub, creează o cerere de preluare (Pull Request) din ramura ta „add-auth” , verifică modificările și fuzionează-le cu ramura principală. 

Depanare

Iată câteva probleme care ar putea apărea, precum și posibile soluții

Deschide DevTools, apoi fila „Rețea”, apoi fă clic pe solicitarea API și verifică anteturile solicitării. Ar trebui să vezi „Authorization: Bearer eyJ…”. Dacă antetul lipsește, verifică dacă apelul getSession() funcționează corect.

Verifică dacă ai aplicat ` requireAuth ` la ruta corectă.

Asigură-te că folosești SUPABASE_SERVICE_ROLE_KEY (nu SUPABASE_ANON_KEY) pe server. Cheia rolului de serviciu are permisiunea de a verifica token-urile oricărui utilizator.

Verifică dacă biblioteca client Supabase este instalată (npm install @supabase/supabase-js) și import-o în partea de sus a fișierului serverului tău.

Reflecție

Adăugarea autentificării utilizatorilor este un pas important pentru a-ți face aplicația mai profesională și mai sigură. Ia în considerare următoarele întrebări:

Sunset and reflection over lake
01 Securitatea sistemului „

”
Ce s-ar putea întâmpla dacă ai avea doar o pagină de autentificare, dar nicio verificare de securitate în backend?
02

area rutelor API-ului
În propriul tău MVP, care rute necesită middleware de autentificare și care pot rămâne publice? Cum ai decis?
03 Ghidul de utilizare „

”
Cum a influențat structura „Rol + Sarcină” calitatea codului generat de IA? Rezultatele sunt diferite (mai bune/mai slabe) față de cele obținute cu prompturi anterioare?

Termeni cheie

  • Autentificare: Verificarea identității unui utilizator — confirmarea faptului că acesta este cine pretinde că este (înregistrare și conectare). Se deosebește de autorizare, care controlează la ce are acces un utilizator.
  • Autorizare: Controlul asupra acțiunilor pe care un utilizator autentificat are dreptul să le efectueze. Securitatea la nivel de rând (RLS) reprezintă una dintre modalitățile de implementare a acestui principiu la nivelul bazei de date.
  • Hășuirea parolelor: transformarea unei parole într-un șir de caractere ilizibil înainte de stocarea acesteia. Supabase Auth realizează acest lucru în mod automat. Stocarea parolelor în format text simplu reprezintă un risc grav de securitate.
  • Token de sesiune: un identificator temporar care menține utilizatorul conectat după autentificare. Supabase Auth gestionează automat aceste tokenuri.
  • Middleware de autentificare: cod care se execută înaintea handler-ului rutei pentru a verifica dacă solicitarea provine de la un utilizator autentificat. Dacă utilizatorul nu este autentificat, middleware-ul blochează solicitarea.
  • Antet de autorizare: un antet HTTP care transmite datele de autentificare (de obicei, un token) de la frontend către backend la fiecare solicitare.
  • 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 format standard pentru tokenurile de autentificare. Conține informații codificate despre utilizator și o dată de expirare. Supabase utilizează tokenurile JWT pentru gestionarea sesiunilor.
  • OAuth: Un standard de autentificare care permite utilizatorilor să se autentifice folosind un cont existent (cum ar fi Google), în loc să creeze o nouă parolă. Prescurtare de la „Open Authorization”.

Resurse suplimentare

Conținutul lecției
Chestionar anterior
Înapoi la curs
Următorul test