Introduction

Dans cette deuxième partie de notre blog, nous plongeons dans les aspects techniques du développement Full Stack avec React.js, Amplify et GitHub. Nous explorerons en détail les étapes pour développer les interfaces utilisateur de notre application et mettre en place l'authentification pour sécuriser l'accès aux fonctionnalités.

Le développement des interfaces utilisateur avec React.js est essentiel pour créer des applications réactives et interactives. Nous aborderons les concepts clés, tels que la création de composants réutilisables, la gestion de l'état avec les hooks de React et le routage avec React Router.

Ensuite, nous nous tournerons vers l'authentification avec Amplify. Nous vous guiderons à travers la configuration d'Amplify pour la gestion des utilisateurs, l'intégration de l'authentification dans l'interface utilisateur, et la gestion des autorisations et des rôles pour contrôler l'accès aux fonctionnalités de l'application.

En suivant ce parcours technique, vous serez en mesure de développer des interfaces utilisateur robustes avec React.js et de mettre en place une authentification sécurisée avec Amplify. Ces compétences clés vous aideront à créer des applications Full Stack évolutives et performantes.

Interfaces

Dans cette partie, je vais vous présenter les fonctionnalités principales de mon application et expliquer comment j'ai utilisé React.js, Amplify et React Bootstrap pour les améliorer.

1. Routage avec React Router : J'ai utilisé React Router pour gérer le routage et la navigation entre différentes pages de mon application. Cela permet aux utilisateurs de passer facilement d'une page à une autre et d'explorer les fonctionnalités de manière fluide.

2. Composants fonctionnels avec useState et useEffect : J'ai structuré mon application en utilisant des composants fonctionnels et j'ai utilisé les hooks useState et useEffect pour gérer l'état local des composants et effectuer des actions en réponse à des événements. Cela m'a permis de créer des interfaces utilisateur réactives et dynamiques.

3. Utilisation d'Amplify UI : J'ai intégré Amplify UI dans mon application pour bénéficier de composants prêts à l'emploi tels que les formulaires d'inscription, de connexion et de réinitialisation de mot de passe. Cela m'a fait gagner du temps dans le développement de fonctionnalités d'authentification sécurisées.

4. Intégration de React Bootstrap : J'ai utilisé React Bootstrap pour accéder à une bibliothèque étendue de composants stylisés tels que les boutons, les cartes, les modales, etc. Cela m'a permis de créer une interface esthétique et moderne sans avoir à écrire beaucoup de CSS personnalisé.

Voici le lien de mon dépot Github. Github

Voici la version déployé sur amplify: Live

Utilise ceci Pour le déploement de votre interface sur Amplify.

Authentification

Suivez cette partie de la documentation officielle pour l'authentification. Lien.

Une fois ces étapes terminées, il ne nous reste plus qu'à intégrer cela dans notre application. Cependant, si nous suivons strictement cette documentation, en utilisant le HOC withAuthenticator() sur le composant App, Amplify va remplacer notre page de connexion avec l'interface utilisateur générique. Cela ne convient pas à nos besoins, car nous souhaitons utiliser notre propre interface utilisateur personnalisée. C'est pourquoi dans mon dépôt GitHub, dans le composant Welcome, nous trouvons le code suivant :

import React, { useState, useEffect } from 'react';
import { Auth } from 'aws-amplify';

import Home from '../components/Home';
import Login from './Login';

function Welcome() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(() => {
      checkUser();
    }, []);

    async function checkUser() {
      try {
        const user = await Auth.currentAuthenticatedUser();
        setIsLoggedIn(true);
      } catch (error) {
        setIsLoggedIn(false);
      }
    }

    return (
    isLoggedIn? <Home /> : <Login />
    )
}

export default Welcome;

Ici, nous vérifions si l'utilisateur est connecté, puis nous utilisons l'opérateur ternaire pour soit afficher l'écran d'accueil, soit afficher la page de connexion. Cependant, il est important de noter que certaines parties de cette logique peuvent varier en fonction de notre propre implémentation de l'authentification.

Une fois ces étapes terminées, il ne nous reste plus qu'à intégrer cela à notre application. Cependant, avec la logique actuelle, tout utilisateur non connecté est redirigé vers la page de connexion. Pour permettre aux utilisateurs de créer un compte et de s'inscrire, nous avons mis en place le composant SignUp.

Dans le composant SignUp, nous collectons les informations de l'utilisateur à partir du formulaire, telles que le nom d'utilisateur et le mot de passe. En utilisant les fonctions fournies par Amplify, nous pouvons enregistrer l'utilisateur et créer un compte pour lui. Amplify a déjà créé tous les services nécessaires pour l'authentification lors de la mise en place du backend.

import React, {useState} from "react";
import '@aws-amplify/ui-react/styles.css';
import { Link, useNavigate } from "react-router-dom";
import { Auth } from "aws-amplify";

import '../App.css';
import mylogo from '../images/mylogo.png';
import { Flex } from '@aws-amplify/ui-react';

function SignUp(){
    const navigate = useNavigate();
    const [user, setUser] = useState({username: "", email: "", password: "", passwordConfirm:""});
    function handleChange(e) {
        setUser(prevUser => {
          return {
            ...prevUser,
            [e.target.name]: e.target.value
          };
        });
      }

      async function handleSignUp(event) {
        event.preventDefault();
        console.log(user);
        const {username, email, password} = user;

        try {
          await Auth.signUp({
              username,
              password,
              attributes: {
                  email
              }

          });

          console.log('Sign-up successful!');
          navigate(`/confirm/${username}`);
        } catch (error) {
          console.log('Error signing up:', error);
          // Handle sign-up error, e.g., display error message
        }
      }


    return(
        <div className="App">
        <Flex direction={{ base: 'column', large: 'column' }}>
        <header className="screen">
              <p className="text_header text">
                Powered by <span className="giga">FREELANCE</span>
                <span className="net">CONNECT</span>. 
              </p>
              <img src={mylogo} alt="Giganet Logo" className="logo" />
        </header>
          <div id="connect" className="container tab-pane active">
          <br />
          <h3 className="text align-center">Enregistrez vous ici</h3>
          <p className="text textB">
             Veuillez entrer vos informations
          </p>
          <form className="loginForm" onSubmit={handleSignUp}>
            <div className="form-group">
              <label htmlFor="exampleInputEmail1" className="text">
                Identifiant
              </label>
              <input
                type="text"
                name="username"
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                placeholder="Votre identifiant"
                onChange={handleChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputEmail1" className="text">
                Email
              </label>
              <input
                type="email"
                name="email"
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                placeholder="Votre identifiant"
                onChange={handleChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputPassword1" className="text">
                Mot de passe.
              </label>
              <input
                type="password"
                name="password"
                className="form-control"
                id="exampleInputPassword1"
                placeholder="Mot de passe"
                onChange={handleChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputPassword1" className="text">
                Confirmer le mot de passe.
              </label>
              <input
                type="password"
                name="passwordConfirm"
                className="form-control"
                id="exampleInputPassword1"
                placeholder="Mot de passe"
                onChange={handleChange}
              />
            </div>
            <div className="btnDiv">
             <div>
              <button type="submit" className="btn btn-grad btn-grad34 text">
                  Sign Up
                </button>
              </div>
              <div>
                <span>Already have an account? </span>
                <Link to="/signin" className="sign"> Sign In</Link>
              </div>
            </div>

          </form>
        </div>
         <div>
            <div className="voir_plus">
              <p><i className="fas fa-long-arrow-alt-right"></i></p>
            </div>
            <p className="text textA textB">Le meilleur de l'internet Wifi haut débit</p>
          </div>
       </Flex>
      </div>
    )
}

export default SignUp;

Une fois que l'utilisateur s'est inscrit avec succès, il est généralement nécessaire de confirmer son adresse e-mail avant de pouvoir se connecter. Amplify facilite la gestion de ce processus de confirmation.

Après l'inscription, Amplify envoie automatiquement un e-mail de confirmation à l'adresse e-mail fournie par l'utilisateur. Ce e-mail contient un lien de confirmation unique qui permet à l'utilisateur de valider son compte. Le processus de confirmation peut être géré en utilisant les fonctions fournies par Amplify.

import React, { useState } from 'react';
import { Auth } from 'aws-amplify';
import { Flex } from '@aws-amplify/ui-react';
import { useNavigate, Link } from 'react-router-dom';
import { useParams } from 'react-router-dom';


import mylogo from '../images/mylogo.png';

function Verification() {
  const navigate = useNavigate();
  const { username } = useParams();
  const [verificationCode, setVerificationCode] = useState('');

  async function handleVerification(event) {
    event.preventDefault();

    try {
      await Auth.confirmSignUp(username, verificationCode);

      console.log('Verification successful!');
      navigate('/signin')
      // Handle successful verification, e.g., navigate to a new page
    } catch (error) {
      console.log('Error verifying sign-up:', error);
      // Handle verification error, e.g., display error message
    }
  }

  return (
            <div className="App">
            <Flex direction={{ base: 'column', large: 'column' }}>
            <header className="screen">
              <p className="text_header text">
                Powered by <span className="giga">FREELANCE</span>
                <span className="net">CONNECT</span>. 
              </p>
              <img src={mylogo} alt="Giganet Logo" className="logo" />
            </header>
              <div id="connect" className="container tab-pane active">
              <br />
              <h3 className="text">Verification</h3>
              <p className="text textB">
                Pour verifier votre compte, veuillez entrer le code sur votre Email.
              </p>
              <form className="loginForm" onSubmit={handleVerification}>
                <div className="form-group">
                  <label htmlFor="exampleInputEmail1" className="text">
                    Code de verification
                  </label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Verification Code"
                    value={verificationCode}
                    onChange={(e) => setVerificationCode(e.target.value)}
                    />
                </div>
                <div className="btnDiv">
                  <div>
                    <button type="submit" className="btn btn-grad textA">
                      Verifier
                    </button>
                  </div>
                </div>
              </form>
            </div>
             <div>
                <div className="voir_plus">
                  <p><i className="fas fa-long-arrow-alt-right"></i></p>
                  <Link to="/signin" className="sign"> Sign In</Link>
                </div>
                <p className="text textA textB">Le meilleur de l'internet Wifi haut débit</p>
              </div>
           </Flex>
          </div>
  );
}

export default Verification;

Une fois que l'utilisateur s'est inscrit et a confirmé son compte, il peut se connecter à notre application. Nous allons maintenant aborder l'implémentation de la fonctionnalité de connexion en utilisant Amplify.

Voici un exemple de code pour gérer la connexion de l'utilisateur :

import React, { useState } from "react";
import '../App.css';
import '@aws-amplify/ui-react/styles.css';
import { Link } from "react-router-dom";
import { Auth } from 'aws-amplify';
import mylogo from '../images/mylogo.png';
import { Flex } from '@aws-amplify/ui-react';
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  async function signIn(e) {
    e.preventDefault(); // Prevent the form from being submitted and page reload

    try {
      const user = await Auth.signIn(username, password);
      console.log('User signed in:', user);
      navigate('/')

      // Handle successful sign-in, e.g., navigate to a new page
    } catch (error) {
      console.log('Error signing in:', error);
      // Handle sign-in error, e.g., display error message
    }
  }

  return (
    <div className="App">
      <Flex direction={{ base: 'column', large: 'column' }}>
        <header className="screen">
          <p className="text_header text">
            Powered by <span className="giga">FREELANCE</span>
            <span className="net">CONNECT</span>.
          </p>
          <img src={mylogo} alt="Giganet Logo" className="logo" />
        </header>
        <div id="connect" className="container tab-pane active">
          <br />
          <h3 className="text">Connexion ici</h3>
          <p className="text textB">
            Veuillez entrer votre identifiant et votre mot de passe
          </p>
          <form className="loginForm" onSubmit={signIn}>
            <div className="form-group">
              <label htmlFor="exampleInputEmail1" className="text">
                Identifiant
              </label>
              <input
                type="text"
                className="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                placeholder="Votre identifiant"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputPassword1" className="text">
                Mot de passe.
              </label>
              <input
                type="password"
                className="form-control"
                id="exampleInputPassword1"
                placeholder="Mot de passe"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="btnDiv">
              <div>
                <button type="submit" className="btn btn-grad textA">
                  Connexion
                </button>
              </div>
              <div>
                <span>You don't have an account? </span>
                <Link to="/signup" className="sign">Sign Up</Link>
              </div>
            </div>
          </form>
        </div>
        <div>
          <div className="voir_plus">
            <p><i className="fas fa-long-arrow-alt-right"></i></p>
          </div>
          <p className="text textA textB">Le meilleur de l'internet Wifi haut débit</p>
        </div>
      </Flex>
    </div>
  );
}

export default Login;

La mise en place de l'authentification dans notre application Full Stack avec React.js, Amplify et GitHub est désormais terminée. Nous avons exploré différentes fonctionnalités telles que l'inscription, la confirmation et la connexion des utilisateurs.

Grâce à Amplify, nous avons pu créer des interfaces personnalisées pour ces fonctionnalités, offrant ainsi une expérience utilisateur cohérente avec le reste de notre application. L'utilisation des fonctions fournies par Amplify nous a permis de gérer facilement les erreurs et les réponses réussies.

L'authentification est un élément crucial pour sécuriser notre application et garantir que seuls les utilisateurs autorisés peuvent y accéder. Grâce à Amplify, nous avons pu mettre en place cette fonctionnalité de manière simple et efficace.

Conclusion

Dans cette partie de notre blog, nous avons exploré l'implémentation de l'authentification dans notre application Full Stack en utilisant React.js, Amplify et GitHub. Nous avons vu comment Amplify simplifie le processus d'inscription, de confirmation et de connexion des utilisateurs.

En utilisant les fonctionnalités fournies par Amplify, nous avons pu créer des formulaires personnalisés pour l'inscription, la confirmation et la connexion, offrant ainsi une expérience utilisateur cohérente avec le reste de notre application. De plus, nous avons pu gérer les erreurs et les réponses réussies à l'aide des fonctions de gestion d'Amplify.

La mise en place de l'authentification est un élément essentiel pour sécuriser notre application et permettre aux utilisateurs de se connecter et d'accéder à des fonctionnalités spécifiques. Avec Amplify, nous avons pu intégrer cette fonctionnalité de manière simple et efficace.

Dans la prochaine partie de ce blog, nous irons encore plus loin en intégrant une API GraphQL et une base de données. Cette intégration nous permettra d'étendre les fonctionnalités de notre application et d'interagir avec les données de manière puissante et flexible.

Restez à l'écoute pour la prochaine partie, où nous explorerons l'intégration d'une API GraphQL et d'une base de données dans notre application Full Stack avec React.js, Amplify et GitHub. Vous découvrirez comment tirer parti de ces technologies pour créer des fonctionnalités avancées et interagir avec les données de manière optimale.