Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Het bouwen van een aangepast authenticatiesysteem kan een ontmoedigende taak zijn. Het vereist een grondige kennis van authenticatieprotocollen en gebruikersauthenticatie- en autorisatieprocessen. Door een tool als Supabase te integreren, kunt u zich echter meer richten op het bouwen van de kernlogica van uw applicatie.

Supabase is een open-source Firebase-alternatief dat een cloudgebaseerd ontwikkelplatform biedt. Het biedt een scala aan backend-services, zoals een volwaardige Postgres-database, een authenticatieservice en serverloze functionaliteiten.

Het is ontworpen om toegankelijker te zijn, zodat u snel projecten kunt opzetten. Volg mee om te leren hoe u de authenticatieservice in uw React.js-applicaties kunt integreren.

Maak een nieuw project op de Supabase Developer Console

Volg deze stappen om een ​​nieuw project op de Supabase Developer Console te maken:

instagram viewer
  1. Schrijf je in voor een supabase ontwikkelaarsaccount. Navigeer naar het dashboard en maak een nieuw project aan.
  2. Vul de projectnaam en een wachtwoord in (dit is optioneel voor deze zelfstudie, maar wordt aanbevolen bij het opzetten van een database), selecteer de regio en klik ten slotte op Maak een nieuw project aan.
  3. Kopieer onder API-instellingen het project URL en de openbaar anoniem sleutel.

Stel een authenticatieprovider in

Een auth Provider biedt een veilige manier voor gebruikers om zich te authenticeren met behulp van verschillende sociale logins. Supabase levert standaard een e-mailprovider. Bovendien kunt u, afhankelijk van uw voorkeuren, andere providers toevoegen, zoals Google, GitHub of Discord.

Deze zelfstudie laat zien hoe u een Google-provider instelt. Volg hiervoor deze stappen:

  1. Selecteer in het linkerdeelvenster de Authenticatie tabblad.
  2. Selecteer op de pagina Verificatie-instellingen de Aanbieders optie en selecteer ten slotte de Google-aanbieder uit de lijst met aanbieders. Merk op dat de e-mailprovider al standaard is geconfigureerd. U hoeft geen configuraties te maken.
  3. Schakel de Aanbieder schakelknop.
  4. De Google Provider vereist twee invoer: een ClientID en een ClientSecret. U krijgt deze twee waarden na het maken van een applicatie op de Google Developer Console. Kopieer voorlopig de Omleidings-URL. U zult het gebruiken om een ​​applicatie op Google Developer Console in te stellen om de ClientID en ClientSecret te verkrijgen.

Stel uw project in op de Google Developer Console (GDC)

Om u te authenticeren bij Google, moet u uw app registreren in de Google Developer Console (GDC) en een ClientID en ClientSecret verkrijgen. Volg deze stappen om een ​​project op GDC op te zetten:

  1. Ga naar Google-ontwikkelaarsconsole en log in met uw Google-account om toegang te krijgen tot de console.
  2. Nadat u bent ingelogd, navigeert u naar de API's en services tabblad, kies de Credentials maken optie en selecteer vervolgens OAuth-client-ID.
  3. Geef het type toepassing op uit de beschikbare opties en vul vervolgens de naam van uw toepassing in.
  4. Geef daarna de thuisroute-URL van uw app op (http//:lokalehost: 3000), en geef ten slotte de callback-omleidings-URL op. Plak de omleidings-URL die u hebt gekopieerd van de Supabase Google Provider-instellingenpagina. Klik op Redden om het proces te voltooien.
  5. Kopieer de Klant identificatie En Clientgeheim en ga terug naar uw Supabase Project-dashboard en plak ze in de invoervelden ClientID en ClientSecret op de Google Provider-instellingenpagina. Klik Redden om de Aanbieder in te schakelen.

Configureer Supabase Authentication Service in een React.js-toepassing

Maak een React.js-toepassingen open vervolgens de projectmap in uw favoriete code-editor. Maak vervolgens in de hoofdmap van uw projectmap een ENV-bestand om uw omgevingsvariabelen te bevatten: uw project-URL en uw openbare anonieme sleutel. Ga naar uw Supabase-instellingenpagina, open de API-sectie en kopieer de project-URL en de openbare anon-sleutel.

REACT_APP_SUPABASE_URL= project-URL
REACT_APP_SUPABASE_API_KEY = openbaar anonieme sleutel

1. Installeer de vereiste pakketten

Voer deze opdracht uit op uw terminal om de vereiste afhankelijkheden te installeren:

npm installeren @supabase/auth-ui-react @supabase/supabase-js reageren reageren-router-dom

2. Maak de inlogpagina en de succespagina-componenten

Maak een nieuwe map in de map /src van uw React.js-toepassing en noem deze pagina's. Maak in deze map twee bestanden aan: Login.js en Success.js.

3. Component van de inlogpagina

Dit onderdeel zal een aanmeldings- en aanmeldingsfunctie weergeven, gebruikmakend van de React.js Authentication UI van Supabase. U hebt de authenticatie-UI geïmporteerd als een afhankelijkheid (@supabase/auth-UI-react), waardoor het eenvoudiger is om de authenticatiefunctionaliteit te implementeren.

Voeg in het bestand login.js de onderstaande code toe:

importeren Reageer van'Reageer';
importeren {createClient} van'@supabase/supabase-js';
importeren {Auth, ThemeSupa} van'@supabase/auth-ui-reageren';
importeren {useNavigate} van'reageren-router-dom';
const supabase = maakKlant(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
functieLog in() {
const navigeren = gebruikNavigeren(); 
 supabase.auth.onAuthStateChange(asynchroon (gebeurtenis) =>{
als (gebeurtenis !== "UITGELOGD") {
 navigeren('/succes');
 }anders{
 navigeren('/');
 }
 })
opbrengst (
<divnaam van de klasse="App">
<koptekstnaam van de klasse="App-header">
 supabaseClient={supabase}
 uiterlijk={{thema: ThemeSupa}}
 thema="donker"
 aanbieders={['google']}
 /> 
koptekst>
div>
 );
}
exporterenstandaard Log in;

Laten we het opsplitsen:

  • Initialiseer een Supabase-client met de omgevingsvariabelen - uw project-URL en uw openbare anonieme sleutel in het ENV-bestand.
  • Stel een gebeurtenislistener in om wijzigingen in de authenticatiestatus bij te houden met behulp van de supabase.auth.onAuthStateChange()-methode, d.w.z. als de authenticatiestatus niet "SIGNED_OUT" is, dan wordt de gebruiker naar de '/success'-pagina genavigeerd, anders wordt de gebruiker naar de '/'-pagina genavigeerd (home/login) pagina.
  • U gebruikt de navigatiemethode van de useNavigate-hook om dit proces te beheren.
  • Retourneer ten slotte een div met de React Auth UI-component uit de Supabase-bibliotheek met het uiterlijk van themeSupa (geleverd door Supabase), donker thema en Google-provider ingesteld als eigenschappen.

4. Succespagina-component

Deze component geeft een succespagina weer met de gebruikersdetails nadat een gebruiker met succes is geverifieerd en een uitlogknop.

Voeg in het bestand Success.js de onderstaande code toe:

importeren Reageer van'Reageer';
importeren {createClient} van'@supabase/supabase-js';
importeren {useNavigate} van'reageren-router-dom';
importeren {useEffect, useState} van'Reageer';
const supabase = maakKlant(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
functieSucces() {
const [gebruiker, setGebruiker] = useState([]); 
const navigeren = gebruikNavigeren(); 
 gebruikEffect (() => {
asynchroonfunctiegetUserData(){
wachten supabase.auth.getUser().then((waarde) => {
als(waarde.gegevens?.gebruiker) {
setGebruiker(waarde.gegevens.gebruiker)} 
 }) }
 getGebruikersgegevens();
 },[]);
const avatar = gebruiker?.user_metadata?.avatar_url; 
const gebruikersnaam = gebruiker?.user_metadata?.full_Name; 
asynchroonfunctieuitloggebruiker(){
wachtensupabase.aut.afmelden();
 navigeren('/');
 };
opbrengst (
<divnaam van de klasse="App">
<koptekstnaam van de klasse="App-header">
<h1>Succesvol ingelogdh1>
<h2>{gebruikersnaam}h2>
<imgsrc={avatar} />
<knopbij klikken={()=> signOutUser()}>Afmeldenknop>
koptekst>
div>
 );
}
exporterenstandaard Succes;

Laten we het opsplitsen:

  • Initialiseer een Supabase-client met de omgevingsvariabelen - uw project-URL en uw openbare anonieme sleutel in het ENV-bestand.
  • Gebruik React.js-haken, useState en useEffect, om gegevens op te halen uit het API-antwoord.
  • De useEffect hook implementeert een asynchrone functie die de supabase.auth.getUser methode aanroept. Deze methode haalt de gebruikersinformatie op die is gekoppeld aan de sessie van de huidige gebruiker.
  • De asynchrone functie controleert vervolgens of de gebruikersgegevens bestaan ​​en stelt deze in op de statusvariabele als dit het geval is.
  • De functie signOutUser gebruikt de methode supabase.auth.signOut om de gebruiker af te melden en terug te navigeren naar de inlogpagina wanneer deze op de afmeldknop klikt.
  • Retourneer ten slotte een div met wat gebruikersinformatie.

5. Configureer de paginaroutes

Configureer ten slotte de routes voor zowel de inlog- als de succespagina's.

Voeg in het app.js-bestand de onderstaande code toe:

importeren Reageer van'Reageer';
importeren { BrowserRouter als Router, Routes, Route } van'reageren-router-dom';
importeren Log in van'./pagina's/Inloggen';
importeren Succes van'./pagina's/Succes';
functieapp() {
opbrengst (
<Router>
// Definieer de routes
"/" element={} />
"/succes" element={} />
Routes>
Router>
 );
}
exporterenstandaard App;

Laten we het opsplitsen:

  • Definieer de twee routes: een route voor de inlogpagina en een route voor de succespagina met behulp van de Router-componenten uit de react-router-bibliotheek.
  • Stel de routepaden in op respectievelijk '/' en '/succes' en wijs de onderdelen Login en Succes toe aan hun respectievelijke routes.
  • Voer ten slotte deze opdracht uit op uw terminal om de ontwikkelingsserver te laten draaien: 
 npm begin
  • Navigeren naar http//:lokalehost: 3000 in uw browser om het resultaat te bekijken. De login-component geeft Supabase's React-auth-UI weer met zowel de e-mail- als Google-providers.

U kunt zich authenticeren met Google of u aanmelden met uw e-mailadres en wachtwoord en deze inloggegevens gebruiken om u aan te melden. Het voordeel van het gebruik van Supabase's sociale login-providers of de e-mailprovider is dat u zich geen zorgen hoeft te maken over de aanmeldingslogica.

Zodra een gebruiker zich aanmeldt bij een sociale provider of met een e-mailadres en een wachtwoord, worden de gegevens opgeslagen in Supabase's Auth-gebruikersdatabase voor uw project. Wanneer ze inloggen met hun inloggegevens, zal Supabase de gegevens valideren tegen de inloggegevens die zijn gebruikt om zich aan te melden.

Supabase maakt authenticatie in React eenvoudig

Supabase biedt een uitgebreide reeks functies die verder gaan dan authenticatie, zoals databasehosting, API-toegang en real-time datastreaming. Het biedt ook functies zoals het maken van query's en datavisualisatie om ontwikkelaars te helpen hun applicaties efficiënter te bouwen en te beheren.

Met zijn intuïtieve dashboard en robuuste API is Supabase een krachtige tool voor het bouwen van schaalbare en veilige applicaties.