Cum se integrează serviciul de autentificare Supabase într-o aplicație React.js

Construirea unui sistem de autentificare personalizat poate fi o sarcină descurajantă. Este nevoie de o înțelegere profundă a protocoalelor de autentificare și a proceselor de autentificare și autorizare a utilizatorilor. Cu toate acestea, prin integrarea unui instrument precum Supabase, vă puteți concentra mai mult pe construirea logicii de bază a aplicației dvs.

Supabase este o alternativă Firebase open-source care oferă o platformă de dezvoltare bazată pe cloud. Oferă o gamă largă de servicii backend, cum ar fi o bază de date Postgres completă, un serviciu de autentificare și funcționalități fără server.

Este conceput pentru a fi mai accesibil, permițându-vă să configurați proiecte rapid. Urmăriți pentru a afla cum să integrați serviciul de autentificare în aplicațiile dvs. React.js.

Creați un nou proiect pe Supabase Developer Console

Pentru a crea un nou proiect pe Supabase Developer Console, urmați acești pași:

1. Înscrieți-vă pentru a Supabaza cont de dezvoltator. Navigați la tabloul de bord și creați un nou proiect.
2. Completați numele proiectului și o parolă (aceasta este opțională pentru acest tutorial, dar recomandată atunci când configurați o bază de date), selectați regiunea și, în final, faceți clic Creați un nou proiect.
3. Sub Setări API, copiați proiectul URL si public anon cheie.

Configurați un furnizor de autentificare

Un furnizor de autentificare oferă utilizatorilor o modalitate sigură de a se autentifica folosind diverse autentificări sociale. Supabase oferă în mod implicit un furnizor de e-mail. În plus, puteți adăuga și alți furnizori, cum ar fi Google, GitHub sau Discord, în funcție de preferințele dvs.

Acest tutorial va demonstra cum să configurați un furnizor Google. Pentru a face acest lucru, urmați acești pași:

1. În panoul din stânga, selectați Autentificare fila.
2. În pagina Setări de autentificare, selectați Furnizorii opțiunea și, în final, selectați Furnizor Google din lista de furnizori. Observați că furnizorul de e-mail este deja configurat implicit. Nu trebuie să faceți nicio configurație.
3. Activați Furnizor buton de comutare.
4. Furnizorul Google necesită două intrări: un ClientID și un ClientSecret. Veți obține aceste două valori după ce creați o aplicație pe Google Developer Console. Pentru moment, copiați Adresa URL de redirecționare. Îl vei folosi pentru a configura o aplicație pe Google Developer Console pentru a obține ClientID și ClientSecret.

Configurați-vă proiectul pe Google Developer Console (GDC)

Pentru a vă autentifica la Google, va trebui să vă înregistrați aplicația pe Google Developer Console (GDC) și să obțineți un ClientID și ClientSecret. Urmați acești pași pentru a configura un proiect pe GDC:

1. Mergi la Consola pentru dezvoltatori Google și conectați-vă cu contul dvs. Google pentru a accesa consola.
2. Odată autentificat, navigați la API-uri și servicii fila, alegeți Creați acreditări opțiunea, apoi selectați ID-ul clientului OAuth.
3. Specificați tipul de aplicație din opțiunile oferite și apoi completați numele aplicației dvs.
4. După aceea, specificați adresa URL a rutei de acasă a aplicației dvs. (http/:localhost: 3000) și, în final, specificați adresa URL de redirecționare a apelului invers. Inserați adresa URL de redirecționare pe care ați copiat-o din pagina de setări Supabase Google Provider. Click pe Salvați pentru a finaliza procesul.
5. Copiați ClientID și ClientSecret și reveniți la tabloul de bord Supabase Project și inserați-le în câmpurile de introducere ClientID și ClientSecret din pagina de setări Google Provider. Clic Salvați pentru a activa Furnizorul.

Configurați serviciul de autentificare Supabase într-o aplicație React.js

Creați o aplicație React.js, apoi deschideți folderul de proiect în editorul de cod preferat. Apoi, în directorul rădăcină al folderului de proiect, creați un fișier ENV care să dețină variabilele de mediu: adresa URL a proiectului și cheia publică anon. Mergeți la pagina de setări Supabase, deschideți secțiunea API și copiați adresa URL a proiectului și cheia publică anon.

REACT_APP_SUPABASE_URL= adresa URL a proiectului
REACT_APP_SUPABASE_API_KEY = public cheie anon

1. Instalați pachetele necesare

Rulați această comandă pe terminalul dvs. pentru a instala dependențele necesare:

instalare npm @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Creați pagina de conectare și componentele paginii de succes

Creați un folder nou în directorul /src al aplicației dvs. React.js și denumiți-i pagini. În acest folder, creați două fișiere: Login.js și Success.js.

3. Componenta paginii de conectare

Această componentă va afișa o funcție de înregistrare și conectare, utilizând interfața de utilizare de autentificare React.js furnizată de Supabase. Ați importat interfața de utilizare de autentificare ca dependență (@supabase/auth-UI-react), facilitând implementarea funcționalității de autentificare.

În fișierul login.js, adăugați codul de mai jos:

import Reacţiona din'reacţiona';
import {createClient} din„@supabase/supabase-js”;
import {Auth, ThemeSupa} din„@supabase/auth-ui-react”;
import {useNavigate} din„react-router-dom”;
const supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
funcţieLog in() {
const navigate = foloseșteNavigate(); 
 supabase.auth.onAuthStateChange(asincron (eveniment) =>{
dacă (eveniment !== „SIGNED_OUT”) {
 naviga('/succes');
 }altfel{
 naviga('/');
 }
 })
întoarcere (
<divnumele clasei=„Aplicație”>
<antetnumele clasei=„Aplicație antet”>
 supabaseClient={supabase}
 aspect={{temă: ThemeSupa}}
 tema="întuneric"
 furnizori={['Google']}
 /> 
antet>
div>
 );
}
exportMod implicit Log in;

Să o descompunem:

• Inițializați un client Supabase cu variabilele de mediu -- URL-ul proiectului și cheia dvs. publică anonimă în fișierul ENV.
• Configurați un ascultător de evenimente pentru a urmări modificările din starea de autentificare folosind metoda supabase.auth.onAuthStateChange(), adică dacă starea de autentificare nu este „SIGNED_OUT”, atunci utilizatorul este navigat la pagina „/success”, în caz contrar, utilizatorul este navigat la „/” (acasă/login).
• Veți folosi metoda de navigare din cârligul useNavigate pentru a gestiona acest proces.
• În cele din urmă, returnați un div care conține componenta React Auth UI din biblioteca Supabase cu un aspect de themeSupa (furnizat de Supabase), tema întunecată și furnizorul Google setat ca proprietăți.

4. Componenta Pagina de succes

Această componentă va afișa o pagină de succes cu detaliile utilizatorului după ce un utilizator este autentificat cu succes și un buton de deconectare.

În fișierul Success.js, adăugați codul de mai jos:

import Reacţiona din'reacţiona';
import {createClient} din„@supabase/supabase-js”;
import {useNavigate} din„react-router-dom”;
import {useEffect, useState} din'reacţiona';
const supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
funcţieSucces() {
const [utilizator, setUser] = useState([]); 
const navigate = foloseșteNavigate(); 
 useEffect (() => {
asincronfuncţiegetUserData(){
așteaptă supabase.auth.getUser().then((valoare) => {
dacă(valoare.date?.utilizator) {
setUser(valoare.date.utilizator)} 
 }) }
 getUserData();
 },[]);
const avatar = user?.user_metadata?.avatar_url; 
const userName = user?.user_metadata?.full_Name; 
asincronfuncţiesignOutUser(){
așteaptăsupabaza.auth.sign out();
 naviga('/');
 };
întoarcere (
<divnumele clasei=„Aplicație”>
<antetnumele clasei=„Aplicație antet”>
<h1>Autentificare reușităh1>
<h2>{nume de utilizator}h2>
<imgsrc={avatar} />
<butononClick={()=> signOutUser()}>Deconectați-văbuton>
antet>
div>
 );
}
exportMod implicit Succes;

Să o descompunem:

• Inițializați un client Supabase cu variabilele de mediu -- URL-ul proiectului și cheia dvs. publică anonimă în fișierul ENV.
• Utilizare Cârlige React.js, useState și useEffect, pentru a obține date din răspunsul API.
• Cârligul useEffect implementează o funcție asincronă care apelează metoda supabase.auth.getUser. Această metodă preia informațiile despre utilizator asociate cu sesiunea utilizatorului curent.
• Funcția asincronă verifică apoi dacă există datele utilizatorului și le setează la variabila de stare dacă există.
• Funcția signOutUser folosește metoda supabase.auth.signOut pentru a deconecta utilizatorul și pentru a-l naviga înapoi la pagina de conectare când dă clic pe butonul de deconectare.
• În cele din urmă, returnați un div cu unele informații despre utilizator.

5. Configurați rutele paginii

În cele din urmă, configurați rutele atât pentru paginile de conectare, cât și pentru cele de succes.

În fișierul app.js, adăugați codul de mai jos:

import Reacţiona din'reacţiona';
import { BrowserRouter la fel de Router, Rute, Rută } din„react-router-dom”;
import Log in din„./pages/Login”;
import Succes din„./pages/Success”;
funcţieApp() {
întoarcere (
<Router>
//Definește rutele
"/" element={} />
"/succes" element={} />
Trasee>
Router>
 );
}
exportMod implicit Aplicație;

Să o descompunem:

• Definiți cele două rute: o rută pentru pagina de autentificare și o rută pentru pagina de succes folosind componentele Router din biblioteca react-router.
• Setați căile rutei la „/” și respectiv „/success” și atribuiți componentele Login și Success rutelor lor respective.
• În cele din urmă, rulați această comandă pe terminalul dvs. pentru a porni serverul de dezvoltare:

 npm start

• Navigheaza catre http/:localhost: 3000 pe browser pentru a vedea rezultatul. Componenta de conectare redă React-auth-UI de la Supabase atât cu furnizorii de e-mail, cât și cu furnizorii Google.

Puteți fie să vă autentificați utilizând Google, fie să vă înregistrați cu e-mailul și parola și să utilizați aceste acreditări pentru a vă conecta. Avantajul utilizării furnizorilor de conectare sociale Supabase sau a furnizorului de e-mail este că nu trebuie să vă faceți griji cu privire la logica de înscriere.

Odată ce un utilizator se înscrie la un furnizor de socializare sau cu un e-mail și o parolă, datele vor fi stocate în baza de date de utilizatori Supabase Auth pentru proiectul dumneavoastră. Când se conectează folosind acreditările lor, Supabase va valida detaliile în raport cu acreditările utilizate pentru înscriere.

Supabase face autentificarea în React ușoară

Supabase oferă o suită cuprinzătoare de funcții dincolo de autentificare, cum ar fi găzduirea bazelor de date, accesul la API și fluxul de date în timp real. De asemenea, oferă funcții precum generatorul de interogări și vizualizarea datelor pentru a ajuta dezvoltatorii să-și construiască și să-și gestioneze aplicațiile mai eficient.

Cu tabloul de bord intuitiv și API-ul robust, Supabase este un instrument puternic pentru construirea de aplicații scalabile și sigure.