Hvordan integrere Supabase Authentication Service i en React.js-applikasjon

Å bygge et tilpasset autentiseringssystem kan være en skremmende oppgave. Det krever en dyp forståelse av autentiseringsprotokoller og brukerautentiserings- og autorisasjonsprosesser. Ved å integrere et verktøy som Supabase kan du imidlertid fokusere mer på å bygge kjernelogikken til applikasjonen din.

Supabase er et Firebase-alternativ med åpen kildekode som gir en skybasert utviklingsplattform. Den tilbyr en rekke backend-tjenester som en fullverdig Postgres-database, en autentiseringstjeneste og serverløse funksjoner.

Den er designet for å være mer tilgjengelig, slik at du raskt kan sette opp prosjekter. Følg med for å lære hvordan du integrerer autentiseringstjenesten i React.js-applikasjonene dine.

Opprett et nytt prosjekt på Supabase utviklerkonsoll

Følg disse trinnene for å opprette et nytt prosjekt på Supabase Developer Console:

1. Meld deg på en Supabase utviklerkonto. Naviger til dashbordet og lag et nytt prosjekt.
instagram viewer
2. Fyll inn prosjektets navn og et passord (dette er valgfritt for denne opplæringen, men anbefales når du setter opp en database), velg regionen og klikk til slutt Opprett nytt prosjekt.
3. Under API-innstillinger kopierer du prosjektet URL og offentlig anon nøkkel.

Sett opp en godkjenningsleverandør

En autentiseringsleverandør gir en sikker måte for brukere å autentisere ved hjelp av ulike sosiale pålogginger. Supabase gir som standard en e-postleverandør. I tillegg kan du legge til andre leverandører som Google, GitHub eller Discord avhengig av dine preferanser.

Denne opplæringen viser hvordan du setter opp en Google-leverandør. For å gjøre det, følg disse trinnene:

1. I venstre rute velger du Autentisering fanen.
2. På siden for Autentiseringsinnstillinger velger du Leverandører alternativet, og til slutt velger du Google-leverandør fra listen over tilbydere. Legg merke til at e-postleverandøren allerede er konfigurert som standard. Du trenger ikke gjøre noen konfigurasjoner.
3. Aktiver Forsørger veksleknapp.
4. Google-leverandøren krever to inndata: en ClientID og en ClientSecret. Du får disse to verdiene etter å ha opprettet en applikasjon på Google Developer Console. For nå, kopier Redirect URL. Du vil bruke den til å sette opp en applikasjon på Google Developer Console for å få ClientID og ClientSecret.

Konfigurer prosjektet ditt på Google Developer Console (GDC)

For å autentisere med Google, må du registrere appen din på Google Developer Console (GDC) og få en ClientID og ClientSecret. Følg disse trinnene for å sette opp et prosjekt på GDC:

1. Gå til Google Developer Console og logg på med Google-kontoen din for å få tilgang til konsollen.
2. Når du er logget på, naviger til APIer og tjenester fanen, velg Opprett legitimasjon alternativet, og velg deretter OAuth-klient-ID.
3. Spesifiser applikasjonstypen fra alternativene og fyll deretter inn navnet på applikasjonen.
4. Etterpå, spesifiser appens hjemmerute-URL (http//:localhost: 3000), og til slutt spesifiser URL-adressen for tilbakeringing. Lim inn viderekoblingsadressen du kopierte fra Supabase Google Provider-innstillingssiden. Klikk på Lagre for å fullføre prosessen.
5. Kopier Klient-ID og ClientSecret og gå tilbake til Supabase Project-dashbordet og lim dem inn i inndatafeltene ClientID og ClientSecret på siden for Google Provider-innstillinger. Klikk Lagre for å aktivere leverandøren.

Konfigurer Supabase Authentication Service i en React.js-applikasjon

Opprett en React.js-applikasjon, og åpne deretter prosjektmappen i ditt favorittkoderedigeringsprogram. Deretter, i rotkatalogen til prosjektmappen din, oppretter du en ENV-fil som inneholder miljøvariablene dine: prosjektets URL og den offentlige anonnøkkelen. Gå over til Supabase-innstillingssiden din, åpne API-delen og kopier prosjektets URL og den offentlige anonnøkkelen.

REACT_APP_SUPABASE_URL= prosjekt-URL
REACT_APP_SUPABASE_API_KEY = offentlig anon nøkkel

1. Installer de nødvendige pakkene

Kjør denne kommandoen på terminalen din for å installere de nødvendige avhengighetene:

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

2. Opprett komponentene på påloggingssiden og suksesssiden

Opprett en ny mappe i /src-katalogen til React.js-applikasjonen din, og gi den et navn. Opprett to filer i denne mappen: Login.js og Success.js.

3. Påloggingssidekomponent

Denne komponenten vil gjengi en registrerings- og påloggingsfunksjon ved å bruke React.js Authentication UI levert av Supabase. Du importerte autentiseringsgrensesnittet som en avhengighet (@supabase/auth-UI-react), noe som gjorde det enklere å implementere autentiseringsfunksjonaliteten.

I login.js-filen legger du til koden nedenfor:

import Reagere fra'reagere';
import {createClient} fra'@supabase/supabase-js';
import {Auth, ThemeSupa} fra'@supabase/auth-ui-react';
import {useNavigate} fra'reager-ruter-dom';
konst supabase = createClient(
prosess.env.REACT_APP_SUPABASE_URL,
prosess.env.REACT_APP_SUPABASE_API_KEY
); 
funksjonLogg Inn() {
konst navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(asynkron (hendelse) =>{
hvis (hendelse !== "LOGGET UT") {
 navigere('/suksess');
 }ellers{
 navigere('/');
 }
 })
komme tilbake (
<divklassenavn="App">
<Overskriftklassenavn="App-header">
 supabaseClient={supabase}
 utseende={{tema: ThemeSupa}}
 tema="mørk"
 leverandører={['Google']}
 /> 
Overskrift>
div>
 );
}
eksportmisligholde Logg Inn;

La oss bryte det ned:

• Initialiser en Supabase-klient med miljøvariablene -- prosjektets URL og din offentlige anonnøkkel i ENV-filen.
• Sett opp en hendelseslytter for å spore endringer i autentiseringstilstanden ved å bruke supabase.auth.onAuthStateChange()-metoden, dvs. hvis autentiseringstilstanden er ikke "SIGNED_OUT", så blir brukeren navigert til '/success'-siden, ellers navigeres brukeren til '/' (hjemme/pålogging) side.
• Du vil bruke navigeringsmetoden fra useNavigate-kroken for å administrere denne prosessen.
• Til slutt, returner en div som inneholder React Auth UI-komponenten fra Supabase-biblioteket med et utseende som themeSupa (levert av Supabase), mørkt tema og Google-leverandør satt som egenskaper.

4. Suksesssidekomponent

Denne komponenten vil gjengi en suksessside med brukerdetaljene etter at en bruker er autentisert og en avloggingsknapp.

I Success.js-filen legger du til koden nedenfor:

import Reagere fra'reagere';
import {createClient} fra'@supabase/supabase-js';
import {useNavigate} fra'reager-ruter-dom';
import {useEffect, useState} fra'reagere';
konst supabase = createClient(
prosess.env.REACT_APP_SUPABASE_URL,
prosess.env.REACT_APP_SUPABASE_API_KEY
); 
funksjonSuksess() {
konst [bruker, settBruker] = brukState([]); 
konst navigate = useNavigate(); 
 useEffect (() => {
asynkronfunksjongetUserData(){
avvente supabase.auth.getUser().then((verdi) => {
hvis(verdi.data?.bruker) {
setBruker(verdi.data.bruker)} 
 }) }
 getUserData();
 },[]);
konst avatar = bruker?.bruker_metadata?.avatar_url; 
konst brukernavn = bruker?.brukermetadata?.fullt_navn; 
asynkronfunksjonsignOutUser(){
avventesupabase.auth.Logg ut();
 navigere('/');
 };
komme tilbake (
<divklassenavn="App">
<Overskriftklassenavn="App-header">
<h1>Vellykket innloggingh1>
<h2>{brukernavn}h2>
<imgsrc={avatar} />
<knappved trykk={()=> signOutUser()}>Logg avknapp>
Overskrift>
div>
 );
}
eksportmisligholde Suksess;

La oss bryte det ned:

• Initialiser en Supabase-klient med miljøvariablene -- prosjektets URL og din offentlige anonnøkkel i ENV-filen.
• Bruk React.js kroker, useState og useEffect, for å hente data fra API-svaret.
• useEffect-kroken implementerer en asynkron funksjon som kaller supabase.auth.getUser-metoden. Denne metoden henter brukerinformasjonen knyttet til gjeldende brukers økt.
• Den asynkrone funksjonen sjekker deretter om brukerdataene eksisterer og setter den til tilstandsvariabelen hvis de gjør det.
• SignOutUser-funksjonen bruker supabase.auth.signOut-metoden for å logge av brukeren og navigere dem tilbake til påloggingssiden når de klikker på avloggingsknappen.
• Til slutt, returner en div med noe av brukerinformasjonen.

5. Konfigurer siderutene

Til slutt konfigurerer du rutene for både påloggings- og suksesssiden.

I app.js-filen legger du til koden nedenfor:

import Reagere fra'reagere';
import { Nettleserruter som Ruter, ruter, rute } fra'reager-ruter-dom';
import Logg Inn fra'./pages/Login';
import Suksess fra'./pages/suksess';
funksjonApp() {
komme tilbake (
<Ruter>
//Definer rutene
"/" element={} />
"/suksess" element={} />
Ruter>
Ruter>
 );
}
eksportmisligholde App;

La oss bryte det ned:

• Definer de to rutene: en rute for påloggingssiden og en rute for suksesssiden ved å bruke ruterkomponentene fra react-router-biblioteket.
• Sett rutebanene til henholdsvis '/' og '/success', og tilordne påloggings- og suksesskomponentene til deres respektive ruter.
• Til slutt, kjør denne kommandoen på terminalen din for å spinne opp utviklingsserveren:

 npm start

• Navigere til http//:localhost: 3000 på nettleseren din for å se resultatet. Påloggingskomponenten gjengir Supabases React-auth-UI med både e-post- og Google-leverandørene.

Du kan enten autentisere med Google eller registrere deg med e-postadressen og passordet ditt og bruke denne legitimasjonen for å logge på. Fordelen med å bruke Supabase sine sosiale påloggingsleverandører eller e-postleverandøren er at du ikke trenger å bekymre deg for registreringslogikken.

Når en bruker registrerer seg hos en sosial leverandør eller med en e-post og et passord, vil dataene lagres i Supabases Auth-brukerdatabase for prosjektet ditt. Når de logger på med legitimasjonen sin, vil Supabase validere detaljene mot legitimasjonen som ble brukt til registreringen.

Supabase gjør autentisering i React enkel

Supabase tilbyr en omfattende pakke med funksjoner utover autentisering, som databasehosting, API-tilgang og datastrømming i sanntid. Den tilbyr også funksjoner som spørringsbygger og datavisualisering for å hjelpe utviklere med å bygge og administrere applikasjonene sine mer effektivt.

Med sitt intuitive dashbord og robuste API er Supabase et kraftig verktøy for å bygge skalerbare og sikre applikasjoner.