Comment intégrer le service d’authentification Supabase dans une application React.js
Construire un système d’authentification personnalisé peut être une tâche ardue. Cela nécessite une compréhension approfondie des protocoles d’authentification et des processus d’authentification et d’autorisation des utilisateurs. Cependant, en intégrant un outil comme Supabase, vous pouvez vous concentrer davantage sur la construction de la logique de base de votre application.
Supabase est une alternative Firebase open source qui fournit une plate-forme de développement basée sur le cloud. Il offre une gamme de services backend tels qu’une base de données Postgres à part entière, un service d’authentification et des fonctionnalités sans serveur.
Il est conçu pour être plus accessible, vous permettant de mettre en place des projets rapidement. Suivez-nous pour apprendre à intégrer le service d’authentification dans vos applications React.js.
Créer un nouveau projet sur Supabase Developer Console
Pour créer un nouveau projet sur Supabase Developer Console, suivez ces étapes :
- Inscrivez-vous pour un compte développeur Supabase . Accédez au tableau de bord et créez un nouveau projet.
- Remplissez le nom du projet et un mot de passe (ceci est facultatif pour ce tutoriel mais recommandé lors de la configuration d’une base de données), sélectionnez la région et enfin cliquez sur Créer un nouveau projet .
- Sous Paramètres de l’API, copiez l’ URL du projet et la clé anon publique .
Configurer un fournisseur d’authentification
Un fournisseur d’authentification offre aux utilisateurs un moyen sécurisé de s’authentifier à l’aide de diverses connexions sociales. Supabase fournit par défaut un fournisseur de messagerie. De plus, vous pouvez ajouter d’autres fournisseurs tels que Google, GitHub ou Discord en fonction de vos préférences.
Ce didacticiel vous montrera comment configurer un fournisseur Google. Pour ce faire, suivez ces étapes :
- Dans le volet de gauche, sélectionnez l’ onglet Authentification .
- Dans la page des paramètres d’authentification, sélectionnez l’ option Fournisseurs , et enfin, sélectionnez le fournisseur Google dans la liste des fournisseurs. Notez que le fournisseur de messagerie est déjà configuré par défaut. Vous n’avez pas besoin de faire de configurations.
- Activez le bouton bascule Fournisseur .
- Le fournisseur Google nécessite deux entrées : un ID client et un secret client. Vous obtiendrez ces deux valeurs après avoir créé une application sur Google Developer Console. Pour l’instant, copiez l’ URL de redirection. Vous l’utiliserez pour configurer une application sur Google Developer Console afin d’obtenir le ClientID et le ClientSecret.
Configurer votre projet sur Google Developer Console (GDC)
Pour vous authentifier auprès de Google, vous devrez enregistrer votre application sur la Google Developer Console (GDC) et obtenir un ClientID et un ClientSecret . Suivez ces étapes pour configurer un projet sur GDC :
- Accédez à Google Developer Console et connectez-vous avec votre compte Google pour accéder à la console.
- Une fois connecté, accédez à l’ onglet API et services , choisissez l’option Créer des informations d’identification , puis sélectionnez ID client OAuth .
- Spécifiez le type d’application parmi les options fournies, puis renseignez le nom de votre application.
- Ensuite, spécifiez l’URL de la route d’accueil de votre application ( http//:localhost:3000 ), et enfin, spécifiez l’URL de redirection de rappel. Collez l’URL de redirection que vous avez copiée à partir de la page des paramètres Supabase Google Provider. Cliquez sur Enregistrer pour terminer le processus.
- Copiez ClientID et ClientSecret et revenez au tableau de bord de votre projet Supabase et collez-les dans les champs de saisie ClientID et ClientSecret de la page des paramètres du fournisseur Google. Cliquez sur Enregistrer pour activer le fournisseur.
Configurer le service d’authentification Supabase dans une application React.js
Créez une application React.js, puis ouvrez le dossier du projet dans votre éditeur de code préféré. Ensuite, dans le répertoire racine de votre dossier de projet, créez un fichier ENV pour contenir vos variables d’environnement : l’URL de votre projet et votre clé publique anon. Rendez-vous sur votre page de paramètres Supabase, ouvrez la section API et copiez l’URL du projet et la clé publique anon.
REACT_APP_SUPABASE_URL= project URL
REACT_APP_SUPABASE_API_KEY = public anon key
1. Installez les packages requis
Exécutez cette commande sur votre terminal pour installer les dépendances requises :
npm install @supabase/auth-ui-react @supabase/supabase-js react react-router-dom
2. Créer les composants de la page de connexion et de la page de réussite
Créez un nouveau dossier dans le répertoire /src de votre application React.js et nommez-le pages. Dans ce dossier, créez deux fichiers : Login.js et Success.js.
3. Composant de la page de connexion
Ce composant rendra une fonctionnalité d’inscription et de connexion, en utilisant l’interface utilisateur d’authentification React.js fournie par Supabase. Vous avez importé l’interface utilisateur d’authentification en tant que dépendance (@supabase/auth-UI-react), ce qui simplifie l’implémentation de la fonctionnalité d’authentification.
Dans le fichier login.js, ajoutez le code ci-dessous :
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;
Décomposons-le :
- Initialisez un client Supabase avec les variables d’environnement – votre URL de projet et votre clé anon publique dans le fichier ENV.
- Configurez un écouteur d’événement pour suivre les modifications de l’état d’authentification à l’aide de la méthode supabase.auth.onAuthStateChange(), c’est-à-dire que si l’état d’authentification n’est pas « SIGNED_OUT », l’utilisateur est dirigé vers la page ‘/success’, sinon, l’utilisateur est dirigé à la page ‘/’ (accueil/connexion).
- Vous utiliserez la méthode de navigation du hook useNavigate pour gérer ce processus.
- Enfin, renvoyez un div contenant le composant React Auth UI de la bibliothèque Supabase avec une apparence de themeSupa (fourni par Supabase), un thème sombre et un fournisseur Google définis comme propriétés.
4. Composant de la page de réussite
Ce composant affichera une page de réussite avec les détails de l’utilisateur une fois qu’un utilisateur est authentifié avec succès et un bouton de déconnexion.
Dans le fichier Success.js, ajoutez le code ci-dessous :
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;
Décomposons-le :
- Initialisez un client Supabase avec les variables d’environnement – votre URL de projet et votre clé anon publique dans le fichier ENV.
- Utilisez les crochets React.js, useState et useEffect, pour obtenir des données à partir de la réponse de l’API.
- Le crochet useEffect implémente une fonction asynchrone qui appelle la méthode supabase.auth.getUser. Cette méthode récupère les informations utilisateur associées à la session de l’utilisateur actuel.
- La fonction asynchrone vérifie ensuite si les données utilisateur existent et les définit sur la variable d’état si c’est le cas.
- La fonction signOutUser utilise la méthode supabase.auth.signOut pour déconnecter l’utilisateur et le ramener à la page de connexion lorsqu’il clique sur le bouton de déconnexion.
- Enfin, renvoyez un div avec certaines des informations de l’utilisateur.
5. Configurer les itinéraires de page
Enfin, configurez les itinéraires pour les pages de connexion et de réussite.
Dans le fichier app.js, ajoutez le code ci-dessous :
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;
Décomposons-le :
- Définissez les deux routes : une route pour la page de connexion et une route pour la page de réussite à l’aide des composants Router de la bibliothèque react-router.
- Définissez les chemins d’accès sur ‘/’ et ‘/success’ respectivement, et affectez les composants Login et Success à leurs routes respectives.
- Enfin, exécutez cette commande sur votre terminal pour lancer le serveur de développement :
npm start
- Accédez à http//:localhost:3000 sur votre navigateur pour afficher le résultat. Le composant de connexion rend l’interface utilisateur React-auth de Supabase avec les fournisseurs de messagerie et Google.
Vous pouvez soit vous authentifier à l’aide de Google, soit vous inscrire avec votre adresse e-mail et votre mot de passe et utiliser ces informations d’identification pour vous connecter. L’avantage d’utiliser les fournisseurs de connexion sociale de Supabase ou le fournisseur de messagerie est que vous n’avez pas à vous soucier de la logique d’inscription.
Une fois qu’un utilisateur s’est inscrit auprès d’un fournisseur social ou avec un e-mail et un mot de passe, les données seront stockées dans la base de données utilisateur Auth de Supabase pour votre projet. Lorsqu’ils se connectent à l’aide de leurs informations d’identification, Supabase validera les détails par rapport aux informations d’identification utilisées pour s’inscrire.
Supabase facilite l’authentification dans React
Supabase offre une suite complète de fonctionnalités au-delà de l’authentification, telles que l’hébergement de bases de données, l’accès aux API et le streaming de données en temps réel. Il offre également des fonctionnalités telles que le générateur de requêtes et la visualisation des données pour aider les développeurs à créer et à gérer leurs applications plus efficacement.
Avec son tableau de bord intuitif et son API robuste, Supabase est un outil puissant pour créer des applications évolutives et sécurisées.
Laisser un commentaire