Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

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.

instagram viewer

Créer un nouveau projet sur Supabase Developer Console

Pour créer un nouveau projet sur Supabase Developer Console, suivez ces étapes :

  1. Inscrivez-vous pour un Supbase compte développeur. Accédez au tableau de bord et créez un nouveau projet.
  2. Remplissez le nom du projet et un mot de passe (ceci est facultatif pour ce didacticiel 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.
  3. Sous Paramètres de l'API, copiez le projet URL et le public anonyme clé.

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 :

  1. Dans le volet de gauche, sélectionnez le Authentification languette.
  2. Dans la page Paramètres d'authentification, sélectionnez le Fournisseurs option, et enfin, sélectionnez l'option Fournisseur Google de 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.
  3. Activez le Fournisseur bouton à bascule.
  4. 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 le 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 ClientSecret. Suivez ces étapes pour configurer un projet sur GDC :

  1. Aller à Console de développeur Google et connectez-vous avec votre compte Google pour accéder à la console.
  2. Une fois connecté, accédez au API et services onglet, choisissez l'onglet Créer des identifiants option, puis sélectionnez ID client OAuth.
  3. Spécifiez le type d'application parmi les options fournies, puis renseignez le nom de votre application.
  4. 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. Cliquer sur Sauvegarder pour terminer le processus.
  5. Copiez le Identité du client 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 Sauvegarder pour activer le fournisseur.

Configurer le service d'authentification Supabase dans une application React.js

Créer 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= URL du projet
REACT_APP_SUPABASE_API_KEY = public clé anonyme

1. Installer les packages requis

Exécutez cette commande sur votre terminal pour installer les dépendances requises :

installation npm @supabase/auth-ui-react @supabase/supabase-js réagir réagir-routeur-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 :

importer Réagir depuis'réagir';
importer {créerClient} depuis'@supabase/supabase-js';
importer {Auth, ThemeSupa} depuis'@supabase/auth-ui-react';
importer {useNavigate} depuis'réagir-routeur-dom';
constante supabase = créerClient(
processus.env.REACT_APP_SUPABASE_URL,
processus.env.REACT_APP_SUPABASE_API_KEY
); 
fonctionConnexion() {
constante naviguer = utiliserNaviguer(); 
 supabase.auth.onAuthStateChange(asynchrone (événement) =>{
si (événement !== "SE DÉCONNECTER") {
 naviguer('/succès');
 }autre{
 naviguer('/');
 }
 })
retour (
<divnom du cours="Application">
<entêtenom du cours="App-header">
 supabaseClient={supabase}
 apparence={{theme: ThemeSupa}}
 thème="sombre"
 fournisseurs={['Google']}
 /> 
entête>
div>
 );
}
exporterdéfaut Connexion;

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énements pour suivre les modifications de l'état d'authentification à l'aide de la méthode supabase.auth.onAuthStateChange(), c'est-à-dire si le l'état d'authentification n'est pas "SIGNED_OUT" alors l'utilisateur est dirigé vers la page '/success', sinon, l'utilisateur est dirigé vers le '/' (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 :

importer Réagir depuis'réagir';
importer {créerClient} depuis'@supabase/supabase-js';
importer {useNavigate} depuis'réagir-routeur-dom';
importer {useEffect, useState} depuis'réagir';
constante supabase = créerClient(
processus.env.REACT_APP_SUPABASE_URL,
processus.env.REACT_APP_SUPABASE_API_KEY
); 
fonctionSuccès() {
constante [utilisateur, setUser] = useState([]); 
constante naviguer = utiliserNaviguer(); 
 useEffet (() => {
asynchronefonctiongetUserData(){
attendre supabase.auth.getUser().then((valeur) => {
si(valeur.données?.utilisateur) {
setUser(valeur.données.utilisateur)} 
 }) }
 getUserData();
 },[]);
constante avatar = utilisateur?.user_metadata?.avatar_url; 
constante userName = user?.user_metadata?.full_Name; 
asynchronefonctionUtilisateur déconnecté(){
attendresuperbase.auth.se déconnecter();
 naviguer('/');
 };
retour (
<divnom du cours="Application">
<entêtenom du cours="App-header">
<h1>Connexion réussieh1>
<h2>{nom d'utilisateur}h2>
<imagesrc={avatar} />
<boutonsur clic={()=> signOutUser()}>Déconnexionbouton>
entête>
div>
 );
}
exporterdéfaut Succès;

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.
  • Utiliser 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 :

importer Réagir depuis'réagir';
importer { NavigateurRouteur comme Routeur, Itinéraires, Itinéraire } depuis'réagir-routeur-dom';
importer Connexion depuis'./pages/Connexion';
importer Succès depuis'./pages/Succès';
fonctionApplication() {
retour (
<Routeur>
//Définir les routes
"/" élément={} />
"/succès" élément={} />
Itinéraires>
Routeur>
 );
}
exporterdéfaut application ;

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 commencer
  • Aller vers http//:localhost: 3000 sur votre navigateur pour voir 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 ou le fournisseur de messagerie de Supabase 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.