Att bygga ett anpassat autentiseringssystem kan vara en skrämmande uppgift. Det kräver en djup förståelse av autentiseringsprotokoll och användarautentiserings- och auktoriseringsprocesser. Men genom att integrera ett verktyg som Supabase kan du fokusera mer på att bygga kärnlogiken i din applikation.
Supabase är ett Firebase-alternativ med öppen källkod som tillhandahåller en molnbaserad utvecklingsplattform. Det erbjuder en rad backend-tjänster som en fullfjädrad Postgres-databas, en autentiseringstjänst och serverlösa funktioner.
Den är designad för att vara mer tillgänglig, så att du snabbt kan sätta upp projekt. Följ med för att lära dig hur du integrerar autentiseringstjänsten i dina React.js-applikationer.
Skapa ett nytt projekt på Supabase Developer Console
För att skapa ett nytt projekt på Supabase Developer Console, följ dessa steg:
- Anmäl dig till en Supabase utvecklarkonto. Navigera till instrumentpanelen och skapa ett nytt projekt.
- Fyll i projektets namn och ett lösenord (detta är valfritt för denna handledning men rekommenderas när du ställer in en databas), välj region och klicka slutligen Skapa nytt projekt.
- Kopiera projektet under API-inställningar URL och den offentlig anon nyckel.
Konfigurera en autentiseringsleverantör
En autentiseringsleverantör tillhandahåller ett säkert sätt för användare att autentisera med olika sociala inloggningar. Supabase tillhandahåller som standard en e-postleverantör. Dessutom kan du lägga till andra leverantörer som Google, GitHub eller Discord beroende på dina preferenser.
Den här handledningen visar hur du konfigurerar en Google-leverantör. För att göra det, följ dessa steg:
- I den vänstra rutan väljer du Autentisering flik.
- På sidan Autentiseringsinställningar väljer du Leverantörer och välj slutligen Google Provider från listan över leverantörer. Observera att e-postleverantören redan är konfigurerad som standard. Du behöver inte göra några konfigurationer.
- Aktivera Leverantör växlingsknapp.
- Google-leverantören kräver två inmatningar: ett ClientID och ett ClientSecret. Du får dessa två värden när du har skapat en applikation på Google Developer Console. För nu, kopiera Omdirigera URL. Du kommer att använda den för att konfigurera en applikation på Google Developer Console för att få ClientID och ClientSecret.
Konfigurera ditt projekt på Google Developer Console (GDC)
För att autentisera med Google måste du registrera din app på Google Developer Console (GDC) och skaffa ett ClientID och ClientSecret. Följ dessa steg för att skapa ett projekt på GDC:
- Gå till Google Developer Console och logga in med ditt Google-konto för att komma åt konsolen.
- När du är inloggad, navigera till API: er och tjänster fliken, välj Skapa autentiseringsuppgifter och välj sedan OAuth-klient-ID.
- Ange typen av applikation bland alternativen och fyll sedan i namnet på din applikation.
- Efteråt anger du appens hemvägs-URL (http//:localhost: 3000), och slutligen, ange återuppringningsadressen för omdirigering. Klistra in omdirigeringsadressen som du kopierade från Supabase Google Providers inställningssida. Klicka på Spara för att slutföra processen.
- Kopiera Klient ID och ClientSecret och gå tillbaka till din Supabase Project-instrumentpanel och klistra in dem i inmatningsfälten ClientID och ClientSecret på inställningssidan för Google Provider. Klick Spara för att aktivera leverantören.
Konfigurera Supabase Authentication Service i en React.js-applikation
Skapa en React.js-applikation, och öppna sedan projektmappen i din favoritkodredigerare. Skapa sedan en ENV-fil i rotkatalogen för din projektmapp som innehåller dina miljövariabler: din projektadress och din offentliga anonnyckel. Gå över till din Supabase-inställningssida, öppna API-sektionen och kopiera projektets URL och den offentliga anonnyckeln.
REACT_APP_SUPABASE_URL= projekt-URL
REACT_APP_SUPABASE_API_KEY = offentlig anon nyckel1. Installera de nödvändiga paketen
Kör det här kommandot på din terminal för att installera de nödvändiga beroenden:
npm installera @supabase/auth-ui-react @supabase/supabase-js react react-router-dom2. Skapa inloggningssidan och framgångssidans komponenter
Skapa en ny mapp i /src-katalogen i din React.js-applikation och döp den till sidor. Skapa två filer i den här mappen: Login.js och Success.js.
3. Komponent för inloggningssidan
Den här komponenten återger en registrerings- och inloggningsfunktion, med hjälp av React.js Authentication UI som tillhandahålls av Supabase. Du importerade autentiseringsgränssnittet som ett beroende (@supabase/auth-UI-react), vilket gjorde det enklare att implementera autentiseringsfunktionen.
Lägg till koden nedan i filen login.js:
importera Reagera från'reagera';
importera {createClient} från'@supabase/supabase-js';
importera {Auth, ThemeSupa} från'@supabase/auth-ui-react';
importera {useNavigate} från"reagera-router-dom";
konst supabase = createClient(
bearbeta.env.REACT_APP_SUPABASE_URL,
bearbeta.env.REACT_APP_SUPABASE_API_KEY
);
fungeraLogga in() {
konst navigera = useNavigate();
supabase.auth.onAuthStateChange(asynkron (händelse) =>{
om (händelse !== "UTLOGGAD") {
navigera('/Framgång');
}annan{
navigera('/');
}
})
lämna tillbaka (
<divklassnamn="App">
<rubrikklassnamn="App-header">
supabaseClient={supabase}
utseende={{tema: ThemeSupa}}
tema="mörk"
leverantörer={['Google']}
/>
rubrik>
div>
);
}
exporterastandard Logga in;
Låt oss dela upp det:
- Initiera en Supabase-klient med miljövariablerna -- din projekt-URL och din offentliga anonnyckel i ENV-filen.
- Ställ in en händelseavlyssnare för att spåra ändringar i autentiseringstillståndet med metoden supabase.auth.onAuthStateChange(), dvs. autentiseringstillståndet är inte "SIGNED_OUT" då navigeras användaren till sidan '/framgång', annars navigeras användaren till '/' (hem/inloggning) sida.
- Du kommer att använda navigeringsmetoden från useNavigate-kroken för att hantera denna process.
- Till sist, returnera en div som innehåller React Auth UI-komponenten från Supabase-biblioteket med ett utseende som themeSupa (tillhandahålls av Supabase), mörkt tema och Google-leverantör inställda som egenskaper.
4. Komponent för framgångssidan
Den här komponenten renderar en framgångssida med användarinformationen efter att en användare har autentiserats och en utloggningsknapp.
Lägg till koden nedan i filen Success.js:
importera Reagera från'reagera';
importera {createClient} från'@supabase/supabase-js';
importera {useNavigate} från"reagera-router-dom";
importera {useEffect, useState} från'reagera';
konst supabase = createClient(
bearbeta.env.REACT_APP_SUPABASE_URL,
bearbeta.env.REACT_APP_SUPABASE_API_KEY
);
fungeraFramgång() {
konst [användare, setUser] = useState([]);
konst navigera = useNavigate();
useEffect (() => {
asynkronfungeragetUserData(){
vänta supabase.auth.getUser().then((värde) => {
om(värde.data?.användare) {
setUser(värde.data.användare)}
}) }
getUserData();
},[]);
konst avatar = user?.user_metadata?.avatar_url;
konst userName = user?.user_metadata?.full_Name;
asynkronfungerasignOutUser(){
väntasupabas.auth.logga ut();
navigera('/');
};
lämna tillbaka (
<divklassnamn="App">
<rubrikklassnamn="App-header">
<h1>Inloggningen lyckadesh1>
<h2>{Användarnamn}h2>
<imgsrc={avatar} />
<knapppåKlicka={()=> signOutUser()}>Logga utknapp>
rubrik>
div>
);
}
exporterastandard Framgång;Låt oss dela upp det:
- Initiera en Supabase-klient med miljövariablerna -- din projekt-URL och din offentliga anonnyckel i ENV-filen.
- Använda sig av React.js krokar, useState och useEffect, för att hämta data från API-svaret.
- UseEffect-kroken implementerar en asynkron funktion som anropar metoden supabase.auth.getUser. Denna metod hämtar användarinformationen som är kopplad till den aktuella användarens session.
- Den asynkrona funktionen kontrollerar sedan om användardata finns och ställer in den till tillståndsvariabeln om de gör det.
- SignOutUser-funktionen använder supabase.auth.signOut-metoden för att logga ut användaren och navigera tillbaka till inloggningssidan när de klickar på utloggningsknappen.
- Till sist, returnera en div med en del av användarinformationen.
5. Konfigurera sidrutter
Slutligen, konfigurera rutterna för både inloggnings- och framgångssidorna.
Lägg till koden nedan i filen app.js:
importera Reagera från'reagera';
importera { BrowserRouter som Router, Rutter, Route } från"reagera-router-dom";
importera Logga in från'./pages/Login';
importera Framgång från'./pages/Succes';
fungeraApp() {
lämna tillbaka (
<Router>
//Definiera rutterna
"/" element={} />
"/Framgång" element={} />
Rutter>
Router>
);
}
exporterastandard App;
Låt oss dela upp det:
- Definiera de två rutterna: en rutt för inloggningssidan och en rutt för framgångssidan med hjälp av routerkomponenterna från react-router-biblioteket.
- Ställ in ruttvägarna till '/' respektive '/success' och tilldela inloggnings- och framgångskomponenterna till sina respektive rutter.
- Slutligen, kör det här kommandot på din terminal för att snurra upp utvecklingsservern:
npm Start- Navigera till http//:localhost: 3000 i din webbläsare för att se resultatet. Inloggningskomponenten återger Supabases React-auth-UI med både e-post och Google-leverantörer.
Du kan antingen autentisera med Google eller registrera dig med din e-postadress och ditt lösenord och använda dessa uppgifter för att logga in. Fördelen med att använda Supabases sociala inloggningsleverantörer eller e-postleverantören är att du inte behöver oroa dig för registreringslogiken.
När en användare registrerar sig hos en social leverantör eller med en e-post och ett lösenord, kommer data att lagras i Supabases Auth-användardatabas för ditt projekt. När de loggar in med sina autentiseringsuppgifter kommer Supabase att validera detaljerna mot de referenser som användes för att registrera sig.
Supabase gör autentisering i React lätt
Supabase erbjuder en omfattande uppsättning funktioner utöver autentisering, såsom databasvärd, API-åtkomst och dataströmning i realtid. Den erbjuder också funktioner som frågebyggare och datavisualisering för att hjälpa utvecklare att bygga och hantera sina applikationer mer effektivt.
Med sin intuitiva instrumentpanel och robusta API är Supabase ett kraftfullt verktyg för att bygga skalbara och säkra applikationer.
