Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Der Aufbau eines benutzerdefinierten Authentifizierungssystems kann eine entmutigende Aufgabe sein. Es erfordert ein tiefes Verständnis der Authentifizierungsprotokolle sowie der Benutzerauthentifizierungs- und Autorisierungsprozesse. Durch die Integration eines Tools wie Supabase können Sie sich jedoch mehr auf den Aufbau der Kernlogik Ihrer Anwendung konzentrieren.

Supabase ist eine Open-Source-Firebase-Alternative, die eine Cloud-basierte Entwicklungsplattform bietet. Es bietet eine Reihe von Backend-Diensten wie eine vollwertige Postgres-Datenbank, einen Authentifizierungsdienst und serverlose Funktionen.

Es ist so konzipiert, dass es leichter zugänglich ist, sodass Sie Projekte schnell einrichten können. Folgen Sie den Anweisungen, um zu erfahren, wie Sie den Authentifizierungsdienst in Ihre React.js-Anwendungen integrieren.

instagram viewer

Erstellen Sie ein neues Projekt in der Supabase Developer Console

Gehen Sie folgendermaßen vor, um ein neues Projekt in der Supabase Developer Console zu erstellen:

  1. Melden Sie sich für ein Superbasis Entwicklerkonto. Navigieren Sie zum Dashboard und erstellen Sie ein neues Projekt.
  2. Geben Sie den Namen des Projekts und ein Passwort ein (dies ist für dieses Tutorial optional, wird jedoch beim Einrichten einer Datenbank empfohlen), wählen Sie die Region aus und klicken Sie schließlich auf Neues Projekt erstellen.
  3. Kopieren Sie unter API-Einstellungen das Projekt URL und das öffentlich anonym Taste.

Richten Sie einen Authentifizierungsanbieter ein

Ein Authentifizierungsanbieter bietet Benutzern eine sichere Möglichkeit, sich mit verschiedenen sozialen Logins zu authentifizieren. Supabase stellt standardmäßig einen E-Mail-Anbieter bereit. Darüber hinaus können Sie je nach Ihren Vorlieben weitere Anbieter wie Google, GitHub oder Discord hinzufügen.

In diesem Tutorial wird gezeigt, wie Sie einen Google-Anbieter einrichten. Gehen Sie dazu folgendermaßen vor:

  1. Wählen Sie im linken Bereich die aus Authentifizierung Tab.
  2. Wählen Sie auf der Seite Authentifizierungseinstellungen die aus Anbieter Option, und wählen Sie schließlich die aus Google-Anbieter aus der Anbieterliste. Beachten Sie, dass der E-Mail-Anbieter bereits standardmäßig konfiguriert ist. Sie müssen keine Konfigurationen vornehmen.
  3. Aktivieren Sie die Anbieter Umschaltknopf.
  4. Der Google-Anbieter erfordert zwei Eingaben: eine ClientID und ein ClientSecret. Sie erhalten diese beiden Werte, nachdem Sie eine Anwendung in der Google Developer Console erstellt haben. Kopieren Sie vorerst die Umleitungs-URL. Sie werden es verwenden, um eine Anwendung in der Google Developer Console einzurichten, um die ClientID und das ClientSecret zu erhalten.

Richten Sie Ihr Projekt in der Google Developer Console (GDC) ein

Um sich bei Google zu authentifizieren, müssen Sie Ihre App in der Google Developer Console (GDC) registrieren und eine ClientID und ein ClientSecret erhalten. Befolgen Sie diese Schritte, um ein Projekt auf GDC einzurichten:

  1. Gehe zu Google Developer Console und melden Sie sich mit Ihrem Google-Konto an, um auf die Konsole zuzugreifen.
  2. Navigieren Sie nach der Anmeldung zu APIs und Dienste Registerkarte, wählen Sie die Anmeldeinformationen erstellen Option, und wählen Sie dann aus OAuth-Client-ID.
  3. Geben Sie die Art der Anwendung aus den bereitgestellten Optionen an und geben Sie dann den Namen Ihrer Anwendung ein.
  4. Geben Sie anschließend die Startseiten-URL Ihrer App an (http//:localhost: 3000) und geben Sie schließlich die Callback-Umleitungs-URL an. Fügen Sie die Umleitungs-URL ein, die Sie von der Supabase Google Provider-Einstellungsseite kopiert haben. Klicke auf Speichern um den Vorgang abzuschließen.
  5. Kopiere das Kunden ID Und Kundengeheimnis und gehen Sie zurück zu Ihrem Supabase-Projekt-Dashboard und fügen Sie sie in die Eingabefelder ClientID und ClientSecret auf der Seite Google Provider-Einstellungen ein. Klicken Speichern um den Anbieter zu aktivieren.

Konfigurieren Sie den Supabase-Authentifizierungsdienst in einer React.js-Anwendung

Erstellen Sie eine React.js-Anwendung, und öffnen Sie dann den Projektordner in Ihrem bevorzugten Code-Editor. Erstellen Sie als Nächstes im Stammverzeichnis Ihres Projektordners eine ENV-Datei, die Ihre Umgebungsvariablen enthält: Ihre Projekt-URL und Ihren öffentlichen anonymen Schlüssel. Gehen Sie zu Ihrer Supabase-Einstellungsseite, öffnen Sie den API-Bereich und kopieren Sie die Projekt-URL und den öffentlichen Anon-Schlüssel.

REACT_APP_SUPABASE_URL= Projekt-URL
REACT_APP_SUPABASE_API_KEY = öffentlich Anon-Schlüssel

1. Installieren Sie die erforderlichen Pakete

Führen Sie diesen Befehl auf Ihrem Terminal aus, um die erforderlichen Abhängigkeiten zu installieren:

npm installieren @supabase/auth-ui-react @supabase/supabase-js reagieren Reagieren-Router-Dom

2. Erstellen Sie die Komponenten Anmeldeseite und Erfolgsseite

Erstellen Sie einen neuen Ordner im /src-Verzeichnis Ihrer React.js-Anwendung und nennen Sie ihn Seiten. Erstellen Sie in diesem Ordner zwei Dateien: Login.js und Success.js.

3. Anmeldeseitenkomponente

Diese Komponente rendert eine Registrierungs- und Anmeldefunktion unter Verwendung der von Supabase bereitgestellten React.js-Authentifizierungs-UI. Sie haben die Authentifizierungs-UI als Abhängigkeit importiert (@supabase/auth-UI-react), was die Implementierung der Authentifizierungsfunktionalität vereinfacht.

Fügen Sie in der Datei login.js den folgenden Code hinzu:

importieren Reagieren aus'reagieren';
importieren {createClient} aus'@supabase/supabase-js';
importieren {Auth, ThemeSupa} aus'@supabase/auth-ui-react';
importieren {useNavigate} aus'reagieren-router-dom';
konst superbase = createClient(
Verfahren.env.REACT_APP_SUPABASE_URL,
Verfahren.env.REACT_APP_SUPABASE_API_KEY
); 
FunktionAnmeldung() {
konst navigieren = verwendenNavigate(); 
 supabase.auth.onAuthStateChange(asynchron (Ereignis) =>{
Wenn (Ereignis !== "ABGEMELDET") {
 navigieren('/Erfolg');
 }anders{
 navigieren('/');
 }
 })
zurückkehren (
<divKlassenname="App">
<HeaderKlassenname="App-Header">
 supabaseClient={supabase}
 Aussehen={{Thema: ThemeSupa}}
 thema ="dunkel"
 Anbieter={['Google']}
 /> 
Header>
div>
 );
}
ExportStandard Anmeldung;

Lassen Sie es uns aufschlüsseln:

  • Initialisieren Sie einen Supabase-Client mit den Umgebungsvariablen – Ihrer Projekt-URL und Ihrem öffentlichen anonymen Schlüssel in der ENV-Datei.
  • Richten Sie einen Ereignis-Listener ein, um Änderungen im Authentifizierungsstatus mit der Methode supabase.auth.onAuthStateChange() zu verfolgen, d. H. Wenn die Der Authentifizierungsstatus ist nicht „SIGNED_OUT“, dann wird der Benutzer zur Seite „/success“ navigiert, andernfalls wird der Benutzer zur Seite „/“ navigiert. (Home/Login) Seite.
  • Sie verwenden die Navigate-Methode aus dem useNavigate-Hook, um diesen Prozess zu verwalten.
  • Geben Sie schließlich ein div zurück, das die React Auth-UI-Komponente aus der Supabase-Bibliothek enthält, wobei als Eigenschaften das Erscheinungsbild themeSupa (bereitgestellt von Supabase), das dunkle Design und der Google-Anbieter festgelegt sind.

4. Erfolgsseitenkomponente

Diese Komponente rendert eine Erfolgsseite mit den Benutzerdetails, nachdem ein Benutzer erfolgreich authentifiziert wurde, und eine Abmeldeschaltfläche.

Fügen Sie in der Success.js-Datei den folgenden Code hinzu:

importieren Reagieren aus'reagieren';
importieren {createClient} aus'@supabase/supabase-js';
importieren {useNavigate} aus'reagieren-router-dom';
importieren {useEffect, useState} aus'reagieren';
konst superbase = createClient(
Verfahren.env.REACT_APP_SUPABASE_URL,
Verfahren.env.REACT_APP_SUPABASE_API_KEY
); 
FunktionErfolg() {
konst [user, setUser] = useState([]); 
konst navigieren = verwendenNavigate(); 
 useEffect (() => {
asynchronFunktionBenutzerdaten abrufen(){
erwarten supabase.auth.getUser().then((Wert) => {
Wenn(Wert.Daten?.Benutzer) {
setUser(Wert.Daten.Benutzer)} 
 }) }
 getUserData();
 },[]);
konst avatar = user?.user_metadata?.avatar_url; 
konst Benutzername = Benutzer?.Benutzermetadaten?.Vollständiger_Name; 
asynchronFunktionsignOutUser(){
erwartenSuperbase.auth.austragen();
 navigieren('/');
 };
zurückkehren (
<divKlassenname="App">
<HeaderKlassenname="App-Header">
<h1>Anmeldung erfolgreichh1>
<h2>{Nutzername}h2>
<BildQuelle={Benutzerbild} />
<TasteonClick={()=> signOutUser()}>AbmeldenTaste>
Header>
div>
 );
}
ExportStandard Erfolg;

Lassen Sie es uns aufschlüsseln:

  • Initialisieren Sie einen Supabase-Client mit den Umgebungsvariablen – Ihrer Projekt-URL und Ihrem öffentlichen anonymen Schlüssel in der ENV-Datei.
  • Verwenden React.js-Hooks, useState und useEffect, um Daten aus der API-Antwort abzurufen.
  • Der Hook useEffect implementiert eine asynchrone Funktion, die die Methode supabase.auth.getUser aufruft. Diese Methode ruft die Benutzerinformationen ab, die der Sitzung des aktuellen Benutzers zugeordnet sind.
  • Die asynchrone Funktion prüft dann, ob die Benutzerdaten vorhanden sind, und setzt sie auf die Zustandsvariable, wenn dies der Fall ist.
  • Die Funktion signOutUser verwendet die Methode supabase.auth.signOut, um den Benutzer abzumelden und ihn zurück zur Anmeldeseite zu navigieren, wenn er auf die Abmeldeschaltfläche klickt.
  • Geben Sie schließlich ein div mit einigen Benutzerinformationen zurück.

5. Konfigurieren Sie die Seitenrouten

Konfigurieren Sie abschließend die Routen für die Anmelde- und Erfolgsseiten.

Fügen Sie in der Datei app.js den folgenden Code hinzu:

importieren Reagieren aus'reagieren';
importieren {BrowserRouter als Router, Routen, Route } aus'reagieren-router-dom';
importieren Anmeldung aus'./pages/Login';
importieren Erfolg aus'./seiten/Erfolg';
FunktionApp() {
zurückkehren (
<Router>
//Definiere die Routen
"/" element={} />
"/Erfolg" element={} />
Routen>
Router>
 );
}
ExportStandard Anwendung;

Lassen Sie es uns aufschlüsseln:

  • Definieren Sie die beiden Routen: eine Route für die Anmeldeseite und eine Route für die Erfolgsseite, indem Sie die Router-Komponenten aus der React-Router-Bibliothek verwenden.
  • Legen Sie die Routenpfade jeweils auf „/“ und „/success“ fest und weisen Sie die Komponenten „Login“ und „Success“ ihren jeweiligen Routen zu.
  • Führen Sie schließlich diesen Befehl auf Ihrem Terminal aus, um den Entwicklungsserver hochzufahren: 
 npm Start
  • Navigieren Sie zu http//:localhost: 3000 in Ihrem Browser, um das Ergebnis anzuzeigen. Die Anmeldekomponente rendert die React-Auth-UI von Supabase sowohl mit den E-Mail- als auch mit den Google-Anbietern.

Sie können sich entweder mit Google authentifizieren oder sich mit Ihrer E-Mail-Adresse und Ihrem Passwort anmelden und sich mit diesen Anmeldeinformationen anmelden. Der Vorteil der Nutzung der Social-Login-Anbieter von Supabase oder des E-Mail-Anbieters besteht darin, dass Sie sich keine Gedanken über die Anmeldelogik machen müssen.

Sobald sich ein Benutzer bei einem sozialen Anbieter oder mit einer E-Mail und einem Passwort anmeldet, werden die Daten für Ihr Projekt in der Auth-Benutzerdatenbank von Supabase gespeichert. Wenn sie sich mit ihren Anmeldeinformationen anmelden, validiert Supabase die Details mit den Anmeldeinformationen, die zur Anmeldung verwendet wurden.

Supabase macht die Authentifizierung in React einfach

Supabase bietet eine umfassende Suite von Funktionen über die Authentifizierung hinaus, wie z. B. Datenbank-Hosting, API-Zugriff und Datenstreaming in Echtzeit. Es bietet auch Funktionen wie den Abfragegenerator und die Datenvisualisierung, um Entwicklern zu helfen, ihre Anwendungen effizienter zu erstellen und zu verwalten.

Mit seinem intuitiven Dashboard und seiner robusten API ist Supabase ein leistungsstarkes Tool zum Erstellen skalierbarer und sicherer Anwendungen.