So integrieren Sie den Supabase-Authentifizierungsdienst in eine React.js-Anwendung
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.
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:
- Melden Sie sich für ein Supabase- Entwicklerkonto an. Navigieren Sie zum Dashboard und erstellen Sie ein neues Projekt.
- 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 .
- Kopieren Sie unter API-Einstellungen die Projekt – URL und den öffentlichen anonymen Schlüssel.
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:
- Wählen Sie im linken Bereich die Registerkarte Authentifizierung aus.
- Wählen Sie auf der Seite Authentifizierungseinstellungen die Option Anbieter und schließlich den Google-Anbieter aus der Liste der Anbieter aus. Beachten Sie, dass der E-Mail-Anbieter bereits standardmäßig konfiguriert ist. Sie müssen keine Konfigurationen vornehmen.
- Aktivieren Sie die Schaltfläche zum Umschalten des Anbieters .
- 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 zunächst 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 abrufen . Befolgen Sie diese Schritte, um ein Projekt auf GDC einzurichten:
- Gehen Sie zur Google Developer Console und melden Sie sich mit Ihrem Google-Konto an, um auf die Konsole zuzugreifen.
- Navigieren Sie nach der Anmeldung zur Registerkarte APIs und Dienste , wählen Sie die Option Anmeldeinformationen erstellen und dann OAuth-Client-ID aus .
- Geben Sie die Art der Anwendung aus den bereitgestellten Optionen an und geben Sie dann den Namen Ihrer Anwendung ein.
- Geben Sie anschließend die Homerouten-URL Ihrer App ( http//:localhost:3000 ) und schließlich die Callback-Umleitungs-URL an. Fügen Sie die Umleitungs-URL ein, die Sie von der Supabase Google Provider-Einstellungsseite kopiert haben. Klicken Sie auf Speichern , um den Vorgang abzuschließen.
- Kopieren Sie die ClientID und das ClientSecret , gehen Sie zurück zu Ihrem Supabase-Projekt-Dashboard und fügen Sie sie in die Eingabefelder ClientID und ClientSecret auf der Seite mit den Google-Anbietereinstellungen ein. Klicken Sie auf 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= project URL
REACT_APP_SUPABASE_API_KEY = public anon key
1. Installieren Sie die erforderlichen Pakete
Führen Sie diesen Befehl auf Ihrem Terminal aus, um die erforderlichen Abhängigkeiten zu installieren:
npm install @supabase/auth-ui-react @supabase/supabase-js react react-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:
import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {Auth, ThemeSupa} from '@supabase/auth-ui-react';
import {useNavigate} from 'react-router-dom';
const supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_API_KEY
);
function Login() {
const navigate = useNavigate();
supabase.auth.onAuthStateChange(async (event) =>{
if (event! == "SIGNED_OUT") {
navigate('/success');
}else{
navigate('/');
}
})
return (
<div className="App">
<header className="App-header">
<Auth
supabaseClient={supabase}
appearance={{theme: ThemeSupa}}
theme="dark"
providers={['google']}
/>
</header>
</div>
);
}
export default Login;
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, dh wenn der Authentifizierungsstatus nicht „SIGNED_OUT“ ist, wird der Benutzer zur Seite „/success“ navigiert, andernfalls wird der Benutzer navigiert zur ‚/‘ (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:
import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {useNavigate} from 'react-router-dom';
import {useEffect, useState} from 'react';
const supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_API_KEY
);
function Success() {
const [user, setUser] = useState([]);
const navigate = useNavigate();
useEffect (() => {
async function getUserData(){
await supabase.auth.getUser().then((value) => {
if(value.data?.user) {
setUser(value.data.user)}
}) }
getUserData();
},[]);
const avatar = user?.user_metadata?.avatar_url;
const userName = user?.user_metadata?.full_Name;
async function signOutUser(){
await supabase.auth.signOut();
navigate('/');
};
return (
<div className="App">
<header className="App-header">
<h1>Login Successful</h1>
<h2>{userName}</h2>
<img src={avatar} />
<button onClick={()=> signOutUser()}>Sign Out</button>
</header>
</div>
);
}
export default Success;
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 Sie 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:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Success from './pages/Success';
function App() {
return (
<Router>
<Routes> //Define the routes
<Route path="/" element={<Login />} />
<Route path="/success" element={<Success />} />
</Routes>
</Router>
);
}
export default App;
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 in Ihrem Browser zu http//:localhost:3000 , 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 diese Anmeldeinformationen verwenden, um sich anzumelden. Der Vorteil der Verwendung 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.
Schreibe einen Kommentar