Sådan integreres Supabase Authentication Service i en React.js-applikation

At bygge et brugerdefineret godkendelsessystem kan være en skræmmende opgave. Det kræver en dyb forståelse af godkendelsesprotokoller og brugergodkendelses- og autorisationsprocesser. Ved at integrere et værktøj som Supabase kan du dog fokusere mere på at opbygge kernelogikken i din applikation.

Supabase er et open source Firebase-alternativ, der giver en cloud-baseret udviklingsplatform. Det tilbyder en række backend-tjenester såsom en fuldgyldig Postgres-database, en godkendelsestjeneste og serverløse funktionaliteter.

Den er designet til at være mere tilgængelig, så du hurtigt kan opsætte projekter. Følg med for at lære, hvordan du integrerer godkendelsestjenesten i dine React.js-applikationer.

Opret et nyt projekt på Supabase Developer Console

Følg disse trin for at oprette et nyt projekt på Supabase Developer Console:

1. Tilmeld dig en Supabase udviklerkonto. Naviger til dashboardet og opret et nyt projekt.
instagram viewer
2. Udfyld projektets navn og en adgangskode (dette er valgfrit til denne vejledning, men anbefales ved opsætning af en database), vælg regionen, og klik til sidst Opret nyt projekt.
3. Kopier projektet under API-indstillinger URL og offentlig anon nøgle.

Konfigurer en godkendelsesudbyder

En godkendelsesudbyder giver en sikker måde for brugere at godkende ved hjælp af forskellige sociale logins. Supabase leverer som standard en e-mail-udbyder. Derudover kan du tilføje andre udbydere såsom Google, GitHub eller Discord afhængigt af dine præferencer.

Denne vejledning viser, hvordan du konfigurerer en Google-udbyder. For at gøre det skal du følge disse trin:

1. I venstre rude skal du vælge Godkendelse fanen.
2. På siden Godkendelsesindstillinger skal du vælge Udbydere mulighed, og til sidst skal du vælge Google-udbyder fra listen over udbydere. Bemærk, at e-mail-udbyderen allerede er konfigureret som standard. Du behøver ikke foretage nogen konfigurationer.
3. Aktiver Udbyder skifte-knap.
4. Google-udbyderen kræver to input: et ClientID og et ClientSecret. Du får disse to værdier, når du har oprettet en applikation på Google Developer Console. Indtil videre skal du kopiere Omdiriger URL. Du skal bruge den til at konfigurere en applikation på Google Developer Console for at få ClientID og ClientSecret.

Konfigurer dit projekt på Google Developer Console (GDC)

For at autentificere med Google skal du registrere din app på Google Developer Console (GDC) og få et ClientID og ClientSecret. Følg disse trin for at oprette et projekt på GDC:

1. Gå til Google Developer Console og log ind med din Google-konto for at få adgang til konsollen.
2. Når du er logget ind, skal du navigere til API'er og tjenester fanen, skal du vælge Opret legitimationsoplysninger mulighed, og vælg derefter OAuth-klient-id.
3. Angiv typen af ​​ansøgning fra de angivne muligheder, og udfyld derefter navnet på din ansøgning.
4. Angiv derefter din apps hjemmerute-URL (http//:localhost: 3000), og til sidst skal du angive URL-adressen til tilbagekaldsomdirigering. Indsæt den omdirigerings-URL, du kopierede fra Supabase Google Provider-indstillingssiden. Klik på Gemme for at fuldføre processen.
5. Kopier ClientID og ClientSecret og gå tilbage til dit Supabase Project-dashboard og indsæt dem i ClientID og ClientSecret-indtastningsfelterne på siden med Google-udbyderindstillinger. Klik Gemme for at aktivere udbyderen.

Konfigurer Supabase Authentication Service i en React.js-applikation

Opret en React.js-applikation, og åbn derefter projektmappen i din foretrukne kodeeditor. Dernæst, i rodmappen i din projektmappe, skal du oprette en ENV-fil til at indeholde dine miljøvariabler: din projekt-URL og din offentlige anon-nøgle. Gå over til din Supabase-indstillingsside, åbn API-sektionen, og kopier projektets URL og den offentlige anon-nøgle.

REACT_APP_SUPABASE_URL= projekt-URL
REACT_APP_SUPABASE_API_KEY = offentlig anon nøgle

1. Installer de nødvendige pakker

Kør denne kommando på din terminal for at installere de nødvendige afhængigheder:

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

2. Opret loginsiden og successidens komponenter

Opret en ny mappe i mappen /src i din React.js-applikation, og navngiv den sider. Inde i denne mappe skal du oprette to filer: Login.js og Success.js.

3. Loginsidekomponent

Denne komponent vil gengive en tilmeldings- og login-funktion ved at bruge React.js Authentication UI leveret af Supabase. Du importerede auth-brugergrænsefladen som en afhængighed (@supabase/auth-UI-react), hvilket gjorde det nemmere at implementere godkendelsesfunktionaliteten.

Tilføj koden nedenfor i filen login.js:

importere Reagere fra'reagere';
importere {createClient} fra'@supabase/supabase-js';
importere {Auth, ThemeSupa} fra'@supabase/auth-ui-react';
importere {useNavigate} fra'reager-router-dom';
konst supabase = createClient(
behandle.env.REACT_APP_SUPABASE_URL,
behandle.env.REACT_APP_SUPABASE_API_KEY
); 
fungereLog på() {
konst navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(asynkron (begivenhed) =>{
hvis (begivenhed !== "SIGNED_OUT") {
 navigere('/succes');
 }andet{
 navigere('/');
 }
 })
Vend tilbage (
<divklassenavn="App">
<headerklassenavn="App-header">
 supabaseClient={supabase}
 udseende={{tema: ThemeSupa}}
 tema="mørk"
 udbydere={['google']}
 /> 
header>
div>
 );
}
eksportStandard Log på;

Lad os opdele det:

• Initialiser en Supabase-klient med miljøvariablerne -- din projekt-URL og din offentlige anon-nøgle i ENV-filen.
• Konfigurer en hændelseslytter til at spore ændringer i godkendelsestilstanden ved hjælp af supabase.auth.onAuthStateChange() metoden, dvs. godkendelsestilstanden er ikke "SIGNED_OUT", så bliver brugeren navigeret til siden '/success', ellers navigeres brugeren til '/' (hjemme/login) side.
• Du skal bruge navigationsmetoden fra useNavigate-krogen til at styre denne proces.
• Til sidst skal du returnere en div, der indeholder React Auth UI-komponenten fra Supabase-biblioteket med et udseende af themeSupa (leveret af Supabase), mørkt tema og Google-udbyder indstillet som egenskaber.

4. Successidekomponent

Denne komponent gengiver en successide med brugeroplysningerne, efter at en bruger er blevet godkendt, og en log-out-knap.

Tilføj koden nedenfor i filen Success.js:

importere Reagere fra'reagere';
importere {createClient} fra'@supabase/supabase-js';
importere {useNavigate} fra'reager-router-dom';
importere {useEffect, useState} fra'reagere';
konst supabase = createClient(
behandle.env.REACT_APP_SUPABASE_URL,
behandle.env.REACT_APP_SUPABASE_API_KEY
); 
fungereSucces() {
konst [bruger, sætBruger] = useState([]); 
konst navigate = useNavigate(); 
 useEffect (() => {
asynkronfungeregetUserData(){
vente supabase.auth.getUser().then((værdi) => {
hvis(værdi.data?.bruger) {
sætBruger(værdi.data.bruger)} 
 }) }
 getUserData();
 },[]);
konst avatar = bruger?.bruger_metadata?.avatar_url; 
konst brugernavn = bruger?.bruger_metadata?.fuldt_navn; 
asynkronfungeresignOutUser(){
ventesupabase.auth.Log ud();
 navigere('/');
 };
Vend tilbage (
<divklassenavn="App">
<headerklassenavn="App-header">
<h1>Login lykkedesh1>
<h2>{brugernavn}h2>
<imgsrc={avatar} />
<knappåKlik={()=> signOutUser()}>Log udknap>
header>
div>
 );
}
eksportStandard Succes;

Lad os opdele det:

• Initialiser en Supabase-klient med miljøvariablerne -- din projekt-URL og din offentlige anon-nøgle i ENV-filen.
• Brug React.js kroge, useState og useEffect, for at hente data fra API-svaret.
• useEffect-krogen implementerer en asynkron funktion, der kalder supabase.auth.getUser-metoden. Denne metode henter de brugeroplysninger, der er knyttet til den aktuelle brugers session.
• Den asynkrone funktion kontrollerer derefter, om brugerdataene findes, og sætter dem til tilstandsvariablen, hvis de gør.
• SignOutUser-funktionen bruger supabase.auth.signOut-metoden til at logge brugeren ud og navigere dem tilbage til login-siden, når de klikker på log-out-knappen.
• Til sidst returnerer du en div med nogle af brugeroplysningerne.

5. Konfigurer sideruterne

Til sidst skal du konfigurere ruterne for både login- og successiden.

Tilføj koden nedenfor i app.js-filen:

importere Reagere fra'reagere';
importere { BrowserRouter som Router, ruter, rute } fra'reager-router-dom';
importere Log på fra'./pages/Login';
importere Succes fra'./pages/Succes';
fungereApp() {
Vend tilbage (
<Router>
//Definer ruterne
"/" element={} />
"/succes" element={} />
Ruter>
Router>
 );
}
eksportStandard App;

Lad os opdele det:

• Definer de to ruter: en rute for login-siden og en rute til successiden ved hjælp af routerkomponenterne fra react-router-biblioteket.
• Indstil rutestierne til henholdsvis '/' og '/success', og tildel komponenterne Login og Success til deres respektive ruter.
• Kør endelig denne kommando på din terminal for at spinne udviklingsserveren op:

 npm Start

• Naviger til http//:localhost: 3000 på din browser for at se resultatet. Login-komponenten gengiver Supabase's React-auth-UI med både e-mail- og Google-udbyderne.

Du kan enten godkende ved hjælp af Google eller tilmelde dig med din e-mail og adgangskode og bruge disse legitimationsoplysninger til at logge ind. Fordelen ved at bruge Supabases sociale login-udbydere eller e-mail-udbyderen er, at du ikke behøver at bekymre dig om tilmeldingslogikken.

Når en bruger tilmelder sig hos en social udbyder eller med en e-mail og en adgangskode, vil dataene blive gemt på Supabases Auth-brugerdatabase for dit projekt. Når de logger ind med deres legitimationsoplysninger, vil Supabase validere detaljerne i forhold til de legitimationsoplysninger, der blev brugt til tilmelding.

Supabase gør godkendelse i React nem

Supabase tilbyder en omfattende suite af funktioner ud over godkendelse, såsom databasehosting, API-adgang og datastreaming i realtid. Det tilbyder også funktioner som forespørgselsbygger og datavisualisering for at hjælpe udviklere med at bygge og administrere deres applikationer mere effektivt.

Med sit intuitive dashboard og robuste API er Supabase et kraftfuldt værktøj til at bygge skalerbare og sikre applikationer.