Auth0 simplifică procesul de stabilire a identității utilizatorului în aplicația dvs. web. Oferă funcții de autentificare și autorizare sigure și personalizabile prin intermediul API-ului său. Folosiți-l și nu va trebui să vă faceți griji pentru a vă construi propriul sistem de autentificare de la zero.

Integrarea cu Auth0 facilitează includerea unei autentificări de încredere în aplicația dvs. React și garantează accesul securizat la aplicația dvs.

Următorii pași explică ce este necesar pentru a integra Auth0 într-o aplicație React.

Ce este Auth0?

Auth0 este un serviciu web care oferă un API securizat de gestionat autentificarea și autorizarea utilizatorului în aplicațiile dvs.

Acesta oferă un sistem de autentificare personalizabil pe care îl puteți integra cu ușurință în aplicația dvs. React. Odată ce conectați Auth0 la aplicația dvs., aceasta se ocupă de restul sarcinii de lucru de autentificare.

Cum funcționează Auth0?

Auth0 oferă o caracteristică de conectare universală care implementează fluxul de autentificare. De fiecare dată când un utilizator dorește să se conecteze, API-ul îl redirecționează către o pagină de conectare Auth0, se autentifică, iar datele utile de autentificare cu succes sunt apoi trimise la aplicația ta.

Puteți personaliza fluxul de lucru de autentificare pentru aplicația dvs. prin definirea diferitelor metode de conectare. Conectarea universală oferă un nume de utilizator și o parolă ca autentificare principală, dar puteți adăugați și alte opțiuni, cum ar fi autentificarea socială, prin intermediul unui furnizor precum Google și multifactor autentificare.

Avantajul utilizării acestui tip de autentificare este că nu trebuie să fii familiarizat cu identitatea protocoale precum OAuth 2.0 sau OpenID Connect, care sunt utilizate în mod obișnuit pentru a crea autentificare sigură sisteme.

Creați un proiect nou pe Consola pentru dezvoltatori Auth0

Pentru a începe, va trebui mai întâi să vă înscrieți pentru un Auth0 cont. După înregistrare, navigați la tabloul de bord și faceți clic Creați aplicație pentru a configura setările proiectului de autentificare.

Auth0 oferă diferite configurații de autentificare în funcție de tipul de aplicație pe care o construiți. Pentru acest tutorial, completați numele aplicației, selectați Aplicații Web cu o singură pagină, apoi faceți clic pe Salvați.

Apoi, selectați Reacţiona din lista de tehnologii suportate de Auth0.

Configurați URI-urile aplicației

După crearea aplicației și configurarea setărilor necesare, pe tabloul de bord al aplicației, faceți clic pe Setări pentru a configura proprietățile URI necesare.

Setați următoarele proprietăți:

• Adrese URL de apel invers permise. Adresa URL pe care serverul Auth0 o va apela după ce un utilizator se autentifică.
• Adrese URL de deconectare permise. Adresa URL către care Auth0 va redirecționa utilizatorul când se deconectează.
• Origini web permise. Adresa URL permisă de la care poate proveni o solicitare de autorizare.

Pentru dezvoltarea locală, puteți utiliza http://localhost: 3000 URL. Cu toate acestea, odată ce împingeți codul în producție, va trebui să furnizați adresele URL ale domeniului.

După ce ați terminat de completat adresele URL, mergeți mai departe și faceți clic Salvează modificările în partea de jos a paginii de setări.

Setați furnizorii preferați de conectare la rețele sociale

În panoul de meniu din stânga tabloului de bord al aplicației Auth0, faceți clic pe Autentificare, apoi selectați Sociale. Apoi, faceți clic pe Creați o conexiune butonul de pe pagina de setări a conexiunilor sociale.

În cele din urmă, selectați și adăugați furnizorul dvs. de conectare social preferat.

Configurați Auth0 în aplicația dvs. React

Integrați serviciul de autentificare Auth0 în aplicația dvs. React prin construirea componentelor de conectare și succes.

1. Creați o aplicație React și configurați un fișier ENV

Creați o aplicație React, apoi deschideți folderul de proiect în editorul de cod. Apoi, în directorul rădăcină al folderului de proiect, creați un fișier ENV pentru a păstra variabilele de mediu: numele domeniului și ID-ul clientului. Conectați-vă la contul dvs. Auth0, în tabloul de bord al aplicației, copiați numele domeniului și ID-ul clientului și salvați-le în fișierul ENV după cum urmează:

REACT_APP_AUTH0_DOMAIN= numele domeniului dvs 
REACT_APP_AUTH0_CLIENT_ID= ID-ul dvs. de client

2. Instalați pachetele necesare

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

npm install @auth0/auth0-react

3. Încheiați componenta aplicației cu furnizorul Auth0

Furnizorul Auth0 folosește React Context. Acest lucru vă permite să accesați toate proprietățile sale din cadrul componentei App. Furnizorul Auth0 ia trei parametri: domeniul clientului, ID-ul clientului și URI-ul de redirecționare.

Deschideți fișierul index.js, ștergeți codul React șablon și adăugați codul de mai jos:

import Reacţiona din'reacţiona';
import ReactDOM din„react-dom/client”;
import App din„./App”;
import{Auth0Provider} din„@auth0/auth0-react”;
const root = ReactDOM.createRoot(document.getElementById('rădăcină'));
root.render(
 domeniu = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {fereastră.location.origin}
 >

 </Auth0Provider>, document.getElementById('rădăcină')
);

4. Creați o componentă a paginii de conectare

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

Deschideți fișierul login.js și adăugați codul de mai jos. Componenta paginii de conectare va afișa un buton de autentificare.

import Reacţiona din'reacţiona'
import { useAuth0 } din„@auth0/auth0-react”;
const Autentificare = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
întoarcere (este autentificat || (
 loginWithRedirect()}> Conectare</button>
 ))
}
exportMod implicit Log in

În mod implicit, Auth0 oferă un e-mail și o parolă ca metodă de autentificare. În plus, în funcție de furnizorii de conectare sociale pe care i-ați selectat, Auth0 va afișa și opțiunea de conectare a furnizorului.

5. Creați o componentă a paginii de succes

Această componentă va afișa două caracteristici principale: un profil de utilizator autentificat și un buton de deconectare.

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

import Reacţiona din'reacţiona'
import { useAuth0 } din„@auth0/auth0-react”
const Succes = () => {
const { user, logout, isAuthenticated } = useAuth0(); 
întoarcere ( este autentificat && ( 



Profil utilizator</h1> 

{user.name}</h2> 



{user.email}</p> 
 logout()}> Deconectare</button> 
 </div>
 ))
}
exportMod implicit Succes

Odată ce vă conectați și sunteți autentificat de Auth0, Auth0 vă redirecționează înapoi la aplicația dvs. și trimite date despre încărcătura utilă către aplicația dvs. conținând detaliile utilizatorului. Puteți folosi aceste date în aplicația dvs. pentru a crea profiluri de utilizator personalizate și pentru a gestiona sesiunile utilizatorilor. Proprietatea User din cârligul UseAuth vă permite să accesați anumite date utilizator.

Cârligul UseAuth0 oferă, de asemenea, o proprietate numită isAuthenticated, care vă permite să randați componentele în mod condiționat. Dacă un utilizator este autentificat, codul va afișa detaliile profilului său și va afișa o componentă a butonului de deconectare.

În schimb, dacă nu sunt, veți reda componenta butonului de conectare. Aceasta înseamnă că nu trebuie să specificați rutele pe baza stării de autentificare a unui utilizator, deoarece această proprietate gestionează automat acest proces. Auth0 definește atât logica de conectare, cât și de deconectare, facilitând implementarea funcționalității de autentificare.

Merită încercat serviciul de autentificare Auth0?

Auth0 oferă soluții gata de fabricație care se ocupă de cerințele de autentificare ale aplicației dvs. În plus, serviciul Auth0 oferă suport pentru platformele web, mobile și native de dezvoltare, permițându-vă să integrați cu ușurință sistemul de autentificare cu o stivă de tehnologie pe care o preferați.