Ajouter l’authentification des utilisateurs à votre application React
Lors de la création d’applications web, l’authentification de l’utilisateur est une fonctionnalité nécessaire à ajouter à votre application. L’authentification des utilisateurs permet aux utilisateurs vérifiés d’accéder aux fonctionnalités disponibles dans votre application et refuse l’accès aux utilisateurs non vérifiés.
L’intégration de l’authentification des utilisateurs dans les applications React n’est pas une tâche facile et prend du temps car elle implique plusieurs processus complexes, tels que le hachage des mots de passe, la génération et la gestion des jetons d’authentification, et bien d’autres encore.
Cependant, avec des plateformes comme Back4App, intégrer l’authentification des utilisateurs à vos applications React est simple et facile. Dans cet article, vous explorerez comment ajouter l’authentification des utilisateurs à votre application React à l’aide de Back4App.
Contents
Comprendre l’authentification des utilisateurs
L’authentification de l’utilisateur consiste à déterminer l’identité d’une personne qui tente d’accéder à votre application.
Elle exige que la personne qui tente d’accéder à votre application fournisse des informations d’identification vérifiables, qui peuvent prendre la forme d’un nom d’utilisateur et d’un mot de passe, de données biométriques, de clés d’accès/de jetons, etc.
Si votre mécanisme d’authentification estime que les informations d’identification sont valables, il accorde à l’utilisateur l’accès à votre application, sinon il rejette la demande d’authentification avec le message d’erreur approprié.
Méthodes d’authentification courantes
Les méthodes d’authentification les plus courantes sont les suivantes :
- Nom d’utilisateur et mot de passe: cette méthode d’authentification exige que l’utilisateur fournisse un nom d’utilisateur et un mot de passe valides afin d’authentifier son identité. Une fois que l’utilisateur a fourni son nom d’utilisateur et son mot de passe, ce mécanisme d’authentification les compare aux données stockées dans la base de données et n’approuve la demande d’authentification qu’en cas de concordance.
- Authentification multifactorielle (AMF): L’AMF fait référence à la combinaison de plusieurs mécanismes d’authentification pour authentifier un utilisateur. Dans un système d’authentification utilisant l’AFM, l’utilisateur doit valider son identité plus d’une fois. Par exemple, un utilisateur peut être amené à saisir un code d’authentification après avoir authentifié son identité à l’aide d’un nom d’utilisateur et d’un mot de passe.
- Authentification biométrique: L’authentification biométrique fait référence aux mécanismes d’authentification qui dépendent de caractéristiques biologiques telles que le visage, l’iris, les empreintes digitales ou la reconnaissance vocale pour authentifier un utilisateur.
- OAuth: OAuth est un protocole d’authentification qui permet à vos utilisateurs d’authentifier leur identité en accordant à votre application un accès à leur fournisseur OAuth préféré, tel que Facebook ou X (anciennement Twitter). Lorsqu’un utilisateur tente de s’authentifier à l’aide d’OAuth, il est redirigé vers l’écran de connexion du fournisseur OAuth afin d’authentifier son identité.
- Jetons Web JSON (JWT) : Les JWT sont des formats de jetons compacts portables et sûrs pour les URI qui sont généralement utilisés pour transmettre des informations d’authentification et d’autorisation en toute sécurité entre différentes parties. L’authentification par JWT implique que l’utilisateur envoie le jeton d’accès JWT dans ses demandes pour valider son identité.
Ajouter l’authentification de l’utilisateur à votre application avec Back4app
Back4app est une plateforme cloud qui offre une large gamme de services, y compris une fonction Backend-as-a-service (BaaS). L’option BaaS de Back4app offre diverses fonctionnalités, dont l’authentification des utilisateurs.
La mise en œuvre de l’authentification des utilisateurs avec Back4app implique quelques étapes. Pour ce tutoriel, vous allez construire une application simple de gestion bancaire en utilisant React.
Cette application intégrera les fonctions d’authentification de Back4app, ce qui vous permettra de créer un compte, de vous connecter à votre compte, d’accéder à vos informations de connexion actuelles et de vous déconnecter.
Créer une application React
Pour créer une nouvelle application React, commencez par échafauder une nouvelle application React à l’aide de Vite. Vite est un outil de développement web qui offre une expérience de développement plus rapide et plus efficace.
Exécutez la commande suivante dans votre terminal pour échafauder la nouvelle application React :
npm init vite
Après avoir exécuté la commande ci-dessus, une série d’invites s’affichera sur votre écran, vous demandant de spécifier le nom de l’application, le cadre de travail choisi et la variante linguistique à utiliser.
Comme cela :
Dans l’image ci-dessus, le nom de l’application est react-authentication-app, le framework sélectionné est React et la variante de langage est JavaScript.
Ensuite, changez votre répertoire courant en répertoire de l’application et installez les dépendances nécessaires en exécutant les commandes ci-dessous :
cd react-authentication-app && npm install
Ensuite, installez le React Router dans votre application en exécutant la commande ci-dessous :
npm install react-router-dom
Ensuite, ouvrez votre application React sur un IDE (Integrated Development Environment) et modifiez le fichier main.jsx en remplaçant le contenu par le bloc de code ci-dessous.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
Ce bloc de code importe le composant BrowserRouter du paquet react-router-dom et enveloppe le composant App.
Cela permet d’activer le routage dans l’ensemble de l’application. Dans votre composant App, définissez les différents itinéraires de l’application.
Comme cela :
import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
function App() {
return (
<>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="" element={<Signup />}/>
<Route path="/login" element={<Login />}/>
</Routes>
</>
)
}
export default App
Le bloc de code ci-dessus définit trois itinéraires distincts, permettant aux utilisateurs de naviguer entre les pages d’inscription, de connexion et d’accueil en fonction des chemins d’accès URL.
Créez maintenant un dossier components dans le répertoire src de l’application. Dans ce dossier, créez un fichier Authnavbar.jsx. Ce composant contiendra une barre de navigation qui s’affichera sur les pages d’inscription et de connexion.
Dans le composant Authnavbar, écrivez ce code :
import React from "react";
import { Link } from "react-router-dom";
function Authnavbar(props) {
return (
<nav>
<h3>Banka</h3>
{props.type === "signup" ? (
<div>
If you already have an account{""}
<Link to="/login" className="link">
Log in
</Link>
</div>
) : props.type === "login"? (
<div>
If you don't have an account{""}
<Link to="/" className="link">
Sign Up
</Link>
</div>
) : null}
</nav>
);
}
export default Authnavbar;
Le bloc de code ci-dessus crée une barre de navigation avec un rendu conditionnel basé sur la valeur de la propriété de type, permettant aux utilisateurs de naviguer entre les pages d’inscription et de connexion dans l’application.
Ensuite, créez un dossier pages dans le répertoire src de l’application. Dans ce dossier, créez trois composants : Home.jsx, Sign-up.jsx et Login.jsx. Ces fichiers serviront de pages d’accueil, d’inscription et de connexion.
La page d’inscription contient un formulaire dans lequel les utilisateurs peuvent saisir leurs coordonnées, telles que leur nom d’utilisateur, leur adresse électronique et leur mot de passe.
Par exemple :
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Signup() {
const [formData, setFormData] = React.useState({
username: "",
email: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "sign-up"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "email"
name= "email"
placeholder= "Email..."
onChange={handleChange}
value={formData.email}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Sign Up</button>
</div>
</form>
</>
);
}
export default Sign-up;
Ce bloc de code représente une page d’inscription. Il contient un formulaire avec des champs de saisie, y compris le nom d’utilisateur, l’adresse électronique et le mot de passe de l’utilisateur.
Il existe également un état formData qui stocke les valeurs des champs de saisie du nom d’utilisateur, de l’adresse électronique et du mot de passe. La fonction handleChange met à jour l’état formData chaque fois que l’utilisateur tape dans les champs de saisie.
Dans le composant Login, écrivez les lignes de code suivantes :
import React from "react";
import Authnavbar from "../components/Authnavbar";
function Login() {
const [formData, setFormData] = React.useState({
username: "",
password: "",
});
const handleChange = (event) => {
setFormData((prevState) => ({
...prevState,
[event.target.name]: event.target.value,
}));
};
return (
<>
<Authnavbar type= "login"/>
<form>
<input
type= "text"
name= "username"
placeholder= "Username..."
onChange={handleChange}
value={formData.username}
/>
<input
type= "password"
name= "password"
placeholder= "Password..."
onChange={handleChange}
value={formData.password}
/>
<div>
<button>Log In</button>
</div>
</form>
</>
);
}
export default Login;
La page de connexion est assez similaire à la page d’inscription, sauf qu’il n’y a pas de champ de saisie pour l’adresse électronique dans le formulaire de connexion et que l’objet formData ne possède pas de propriété d’adresse électronique.
Maintenant, donnez un style à votre application en remplaçant le code de votre fichier index.css par les lignes de code suivantes :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #333333;
background-color: #E8F7F5;
inline-size: 50%;
margin: auto;
font-family: "Montserrat", sans-serif;
}
input{
padding: 0.7rem 1rem;
border-radius: 10px;
border: none;
outline: none;
color: #333333;
background-color: #FFFFFF;
font-family: "Montserrat", sans-serif;
inline-size: 100%;
}
input::placeholder{
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
button{
padding: 0.7rem 1rem;
background-color: #00C3A5;
color: #FFFFFF;
font-family: "Montserrat", sans-serif;
font-size: 14px;
border-radius: 7px;
border: none;
}
form{
margin-block-start: 25%;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.link{
text-decoration: none;
color: #00C3A5;
}
Après avoir stylisé votre application, exécutez la commande ci-dessous pour démarrer votre application :
npm run dev
En exécutant la commande ci-dessus, vous obtiendrez le lien http://localhost:5173/. Naviguez jusqu’à ce lien dans votre navigateur web pour voir votre application.
Avec les styles que vous avez définis, la page d’inscription devrait ressembler à la page ci-dessous :
Votre page de connexion devrait ressembler à l’image ci-dessous :
Maintenant que vous avez créé votre application React, vous devez créer une nouvelle application Back4app pour gérer votre authentification.
Création d’une nouvelle application Back4App
Pour utiliser Back4app, vous devez avoir un compte. Vous pouvez vous inscrire gratuitement si vous n’en avez pas.
Pour ce tutoriel, vous allez créer une nouvelle application Back4app en utilisant l’agent Back4app AI. L’agent Back4app AI est un assistant qui vous aide à exécuter des tâches sur Back4app en utilisant des invites.
Connectez-vous à votre compte Back4app et localisez et cliquez sur le bouton “AI Agent” dans la barre de navigation de votre tableau de bord (voir l’image ci-dessous).
Pour utiliser l’agent AI de Back4app afin de générer une application, saisissez l’invite ci-dessous :
create a new application named react-authenticationVous devriez obtenir une réponse similaire à celle de l’image ci-dessous :
Comme le montre l’image ci-dessus, l’agent AI de Back4app a créé une application nommée react-authentication. Vous pouvez trouver cette application sur la page web “My App”.
Vous pouvez également créer une nouvelle application Back4app en utilisant l’interface utilisateur intuitive de Back4app.
Dans l’application react-authentication sur Back4app, créez une classe de portefeuille. Cette classe de portefeuille contiendra des informations précieuses sur le portefeuille de l’utilisateur.
Vous pouvez créer la classe avec l’agent AI en utilisant l’invite ci-dessous :
Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication appL’agent AI lance le processus de création de la classe de portefeuille et ajoute les éléments spécifiés, comme le montre l’image ci-dessous.
Connecter votre application React à Back4app
Après avoir créé votre application Back4app, vous devez connecter votre application Back4app à votre application React en utilisant le SDK Parse.
Installez Parse dans votre application en exécutant la commande ci-dessous :
npm install parse
Ensuite, initialisez-le dans votre application en important l’objet Parse dans votre composant d’application et en le configurant avec les clés de votre application Back4app.
Comme cela :
import Parse from 'parse';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';
Remplacez 'YOUR_APP_ID' et 'YOUR_JAVASCRIPT_KEY' par les clés respectives fournies par Back4App. Vous trouverez vos clés d’application sur l’écran après avoir créé votre application avec l’agent AI de Back4App.
Notez que vous devez toujours sécuriser les clés de manière appropriée dans votre application, de préférence en utilisant des variables env.
Mise en œuvre de l’authentification des utilisateurs à l’aide du SDK Parse
Avec Parse initialisé, vous pouvez maintenant mettre en œuvre l’authentification des utilisateurs dans votre application React.
Back4App fournit automatiquement une classe User pour l’authentification des utilisateurs. Cette classe possède des champs par défaut comme le nom d'utilisateur, le mot de passe, l’email, etc.
Ajoutez les lignes de code suivantes au composant Sign-up pour mettre en œuvre l’inscription des utilisateurs dans votre application React.
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const signUpUser = async () => {
try {
const newUser = new Parse.User();
newUser.set("username", formData.username);
newUser.set("email", formData.email);
newUser.set("password", formData.password);
const user = await newUser.signUp();
let Wallet = Parse.Object.extend("Wallet");
let wallet = new Wallet();
let userPointer = {
__type: "Pointer",
className: "_User",
objectId: user.id,
};
wallet.set("owner", userPointer);
wallet.set("balance", 100);
wallet.save();
console.log(`${user} have successfully signed up`);
navigate("/login");
} catch (error) {
console.log("you encountered an error signing up");
}
};
Le bloc de code ci-dessus utilise le hook useNavigate de react-router-dom pour naviguer de manière programmatique vers différents itinéraires. Le hook useNavigate renvoie une fonction navigate assignée à la variable navigate.
La fonction signUpUser est responsable de l’inscription d’un nouvel utilisateur. La fonction crée un nouvel objet Parse User newUser à l’aide de la méthode Parse.User et définit les valeurs de ses propriétés username, email et password en fonction des valeurs des propriétés correspondantes de l’objet formData state. Elle appelle ensuite la méthode signUp de manière asynchrone sur l’objet newUser.
Après avoir créé un nouvel utilisateur, le code définit une classe Parse nommée “Wallet” à l’aide de la méthode Parse.Object.extend.
Il crée ensuite un objet userPointer, qui représente un pointeur sur l’utilisateur avec le nom de classe _User et l’ID de l’objet de l’utilisateur nouvellement inscrit. À l’aide de la méthode set, le code attribue le propriétaire du portefeuille à l’objet userPointer et fixe le solde initial du portefeuille à 100.
Lorsque l’inscription est réussie, la fonction enregistre un message de réussite et redirige vers l’itinéraire de connexion à l’aide de la fonction navigate. Si une erreur survient lors de l’inscription, la fonction l’attrape et enregistre un message d’erreur.
Créez ensuite une fonction handleSubmit qui invoque la fonction signUpUser. Liez cette fonction au formulaire d’inscription à l’aide du gestionnaire d’événements onSubmit.
Ainsi, lorsqu’un utilisateur soumet le formulaire d’inscription, la fonction handleSubmit est automatiquement déclenchée.
La fonction handleSubmit doit ressembler à ceci :
const handleSubmit = (event) => {
event.preventDefault();
signUpUser();
};
Pour mettre en œuvre la connexion de l’utilisateur, vous allez créer une fonction logInUser qui contient la logique de connexion d’un utilisateur.
Ajoutez le bloc de code ci-dessous à votre composant Login:
import Parse from "parse"
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const logInUser = async () => {
try {
const user = await Parse.User.logIn(formData.username, formData.password);
console.log("User logged in successfully:", user);
navigate("/home");
} catch (error) {
console.log("Error logging in user:", error);
}
};
const handleSubmit = (event) => {
event.preventDefault();
logInUser();
};
La fonction logInUser appelle la méthode logIn de la classe Parse.User de manière asynchrone, en transmettant les valeurs des propriétés nom d'utilisateur et mot de passe de l’état de l’objet formData.
La fonction vérifie si le nom d’utilisateur et le mot de passe saisis par l’utilisateur correspondent à ceux stockés dans la classe User de Back4App. S’ils correspondent, l’utilisateur se connectera avec succès.
Liez la fonction handleSubmit au formulaire de connexion en utilisant l’événement onSubmit. La fonction handleSubmit appellera la fonction logInUser et tentera de connecter l’utilisateur.
Après la connexion, le SDK Parse gère la session de l’utilisateur. Vous pouvez accéder à l’utilisateur actuel avec la méthode Parse.User.current. Vous utiliserez cette méthode dans le composant Home.
Ouvrez le composant Home et écrivez ce code :
import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const [balance, setBalance] = React.useState(0);
const user = Parse.User.current();
const fetchBalance = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
setBalance(wallet.get("balance"));
};
fetchBalance();
return (
<>
<nav>
<h1 className="title">Banka</h1>
<button>Log out</button>
</nav>
<div className="home">
<p className="top">Welcome {user.get("username")}</p>
<div className="balance-card">
<p>Total Wallet Balance</p>
<h1>{balance}</h1>
<button>Top Up</button>
</div>
<div className="features">
<div className="card">
<p>Pay Bills</p>
</div>
<div className="card">
<p>Airtime/Data</p>
</div>
<div className="card">
<p>Transfers</p>
</div>
<div className="card">
<p>Withdraw</p>
</div>
</div>
</div>
</>
);
}
export default Home;
Le bloc de code ci-dessus représente la page d’accueil de votre application. La fonction fetchBalance récupère le solde du portefeuille de l’utilisateur actuel.
Il interroge la classe “Wallet” à l’aide de la méthode Parse.Query et impose une contrainte à la requête pour récupérer le portefeuille dont la propriété owner est égale à l’utilisateur actuel à l’aide de la méthode query.equalTo.
La méthode query.first exécute la requête et renvoie le premier résultat qui correspond aux contraintes de la requête.
Avec la fonction setBalance, le code met le solde du portefeuille à l’état ” balance". Le code affiche le nom de l’utilisateur et le solde de son portefeuille.
Dans la section JSX du bloc de code, vous trouverez le bouton “top up” dans la balise div avec la classe balance-card.
En cliquant sur ce bouton, le solde du portefeuille augmente de 10. Pour ce faire, vous devez créer une fonction topUp contenant la logique d’augmentation du solde.
Comme cela :
const topUp = async () => {
const Wallet = await Parse.Object.extend("Wallet");
const query = new Parse.Query(Wallet);
query.equalTo("owner", user);
const wallet = await query.first();
wallet.increment("balance", 10);
const newBalance = await wallet.save();
setBalance(newBalance.get("balance"));
};
Ce code récupère le portefeuille de l’utilisateur dans le backend de Parse, incrémente le solde de 10 avec la méthode increment, sauvegarde le portefeuille mis à jour dans le backend et met à jour l’état du solde. Liez la fonction topUp au bouton “top up” en utilisant le gestionnaire d’événement click.
Ensuite, dans le composant Home, ajoutez une fonction logOutUser chargée de déconnecter l’utilisateur. La fonction doit ressembler à ceci :
const logOutUser = async () => {
try {
const user = await Parse.User.logOut();
console.log("User logged out successfully:", user);
navigate("/");
} catch (error) {
console.error("Error logging out user:", error);
}
};
La fonction logOutUser appelle la méthode logOut de la classe Parse.User de manière asynchrone pour déconnecter l’utilisateur actuel. Liez la fonction logOutUser au bouton “log out” du composant Home en utilisant l’événement click.
Pour styliser le composant Accueil, ajoutez les classes CSS définies ci-dessous au fichier index.css.
.home{
display: flex;
flex-direction: column;
gap: 3rem;
margin-block-start: 4rem;
}
.title{
text-align: center;
margin-block-start: 2rem;
}
.top{
font-size: 25px;
font-weight: 500;
}
.balance-card{
background-color: #FFFFFF;
inline-size: 40%;
padding: 1rem 2rem;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.features{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card{
background-color: #FFFFFF;
color: #00C3A5;
margin-block-end: 1rem;
padding: 1rem 2rem;
font-size: 25px;
border-radius: 10px;
}
.card:hover{
opacity: 0.6;
}
Tester votre application
Une fois que vous avez terminé de construire l’application React et d’implémenter l’authentification de l’utilisateur avec Back4app.
L’étape suivante consiste à tester l’application. Pour ce faire, cliquez sur le lien http://localhost:5173/ dans votre navigateur web, et la page d’inscription s’affichera sur votre écran.
Remplissez le formulaire d’inscription et envoyez-le.
Après l’inscription, vous pouvez confirmer que l’inscription a été réussie en visitant le tableau de bord de votre application sur Back4app. Si l’inscription est réussie, Back4app ajoutera les détails de l’utilisateur à la classe Utilisateur de votre application.
Comme cela :
Après l’inscription, l’application vous redirigera vers la page de connexion, où vous vous connecterez à l’aide du nom d’utilisateur et du mot de passe que vous avez utilisés dans le formulaire d’inscription.
Par exemple :
Une fois que vous êtes connecté, la page d’accueil s’affiche sur votre écran et doit ressembler à ceci :
Cliquez maintenant sur le bouton “recharger” pour augmenter votre solde de 10.
Déployer votre application React sur Back4app
Pour déployer votre application React sur Back4app, vous utiliserez l’application Container as a Service (CaaS) de Back4app.
Le CaaS de Back4app vous permet de déployer et de gérer des conteneurs Docker dans l’environnement cloud fourni par Back4App.
Avant de pouvoir déployer votre application React, vous devez d’abord la dockeriser. Pour ce faire, créez un Dockerfile dans le répertoire racine de votre application et ajoutez les lignes de code suivantes :
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
Ce fichier Docker met en place un environnement Node.js, crée un répertoire de travail, installe les dépendances, copie le code de l’application, expose un port et spécifie la commande par défaut pour exécuter l’application.
Créez également un fichier .dockerignore. Dans le fichier .dockerignore, ajoutez les fichiers et répertoires exclus du contexte lors de la construction des images Docker.
Par exemple :
#.dockerignore
node_modules
Puisque vous avez créé l’application React avec Vite, vous devez mettre à jour le fichier de configuration de Vite pour prendre en charge Docker. Dans votre fichier vite.config.js, remplacez le code existant par le bloc de code ci-dessous :
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
Ce bloc de code configure le serveur pour qu’il utilise l’hôte par défaut, généralement localhost. Il définit le numéro de port sur lequel le serveur de développement écoutera le port 5173 et garantit que Vite ne démarrera pas le serveur si le port spécifié n’est pas disponible.
Vous pouvez maintenant construire l’image docker de votre application en exécutant la commande suivante dans votre terminal :
docker build -t quote-generator .
Assurez-vous de pousser votre application sur votre compte GitHub avant d’essayer de déployer l’application sur Back4app. Une fois l’application poussée, intégrez votre compte GitHub à Back4app.
Vous pouvez le faire avec l’application Back4app Github. Après avoir intégré votre GitHub avec Back4app, vous pouvez maintenant déployer votre application en utilisant l’agent AI de Back4app.
Pour déployer l’application, saisissez l’invite ci-dessous :
Deploy my repository <<repository-url>> on Back4app containers
Dans le bloc de code ci-dessus, remplacez repository-url par l’URL du dépôt GitHub de votre application.
Comme le montre l’image ci-dessus, lorsque vous communiquez avec l’agent AI, indiquez le lien du dépôt GitHub de l’application que vous souhaitez déployer.
Après que l’agent AI de Back4app ait initié le déploiement de l’application, attendez quelques minutes, puis confirmez l’état actuel du déploiement.
Par exemple :
Une fois le déploiement réussi, l’agent Back4app AI mettra à jour le statut de déploiement de l’application à “déployé” et vous fournira un lien pour accéder à l’application sur votre navigateur.
Vous pouvez trouver l’application finie sur ce dépôt GitHub et l’application live sur cette URL.
Conclusion
Cet article explique comment ajouter l’authentification à une application React en utilisant un backend en tant que service.
Intégrer l’authentification des utilisateurs dans votre application React en utilisant Back4App est un processus simple qui améliore considérablement la sécurité et la fonctionnalité de votre application.
En utilisant les services de Back4App, vous pouvez vous concentrer sur le développement de vos applications web avec une expérience utilisateur exceptionnelle tout en laissant la gestion du backend et les tâches d’authentification à une plateforme fiable.
