2/ Expo: Authentifications

Tout d’abord, nous allons organiser la structure de notre application, en gardant en tête que cette structure changera au fur et à mesure de l'avancement du cours.

Notre application affichera un système d’authentification quand l’utilisateur ne s’est pas encore euthentifié, ou une page de profil si c’est le cas.

Nous devons créer deux composants: Auth.jsx et Profil.jsx.

Création du composant: ./components/page/Auth/Auth.jsx

import { View, Text, StyleSheet } from "react-native";
const Auth = () => {
  return (
    <View>
      <Text>Page d'authentification</Text>
    </View>
  );
};
export default Auth;

Création du composant: ./components/page/Profil/Profil.jsx

import { View, Text, StyleSheet } from "react-native";
const Profil = () => {
  return (
    <View>
      <Text>Page de profil</Text>
    </View>
  );
};
export default Profil;

Puis nous allons afficher ces deux composants au niveau de App.jsx:

import { useState } from "react";
import { StyleSheet, ScrollView } from "react-native";
import Auth from "./components/page/Auth/Auth";
import Profil from "./components/page/Profil/Profil";

export default function App() {
  const [user, setUser] = useState(null);

  return <ScrollView style={styles.container}>{user ? <Profil /> : <Auth />}</ScrollView>;
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
});

• Nous avons créé une variable d’état nommé user, initialisé à null représentant l’utilisateur, et la fonction setUser permettant de modifier cette variable.

• En utilisant un opérateur ternaire, nous affichons conditionnellement:

  • Le composant Profil.jsx si l’utilisateur est authentifié: user !== null

  ou,

  • Le composant Auth.jsx: user === null.

Nous allons ajouter à notre code un nouveau composant, afin d’afficher un message de bienvenue aux utilisateurs:

1. Créer le composant fonctionnel : ./Components/HOC/Card/Card.jsx

2. Le composant reçoit en paramètres : title, content, children.

3. Afficher title et content dans deux balises <Text>.

4. Afficher children dans une balise <View>.

5. Styliser le composant. (Exemple en dessous )

6. Afficher le composant Card.jsx dans Auth.jsx

Tout d’abord créer les deux composants:

Création du composant: ./components/container/SugnUpForm/SignUpForm.js

import { View, Text } from "react-native";
const SignUpForm = () => {
  return (
    <View>
      <Text>SignUpForm</Text>
    </View>
  );
};
export default SignUpForm;

Création du composant: ./components/container/LoginForm/LoginForm.jsx

import { View, Text } from "react-native";
const LoginForm = () => {
  return (
    <View>
      <Text>LoginForm</Text>
    </View>
  );
};
export default LoginForm;

Puis dans le composant Auth.jsx:

import { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import LoginForm from "../../containers/LoginForm/LoginForm";
import SignUpForm from "../../containers/SignUpForm/SignUpForm";
import Card from "../../hoc/Card/Card";

export default function Auth() {
  const [isLogin, setIsLogin] = useState(true);

  function toggleIsLogin() {
    setIsLogin(!isLogin);
  }

  return (
    <View style={styles.container}>
      <Card
        title='Bienvenue!'
        content={isLogin ? "Veuillez vous connecter." : "Veuillez vous inscrire."}
      >
        {isLogin ? <LoginForm /> : <SignUpForm />}
        <TouchableOpacity onPress={toggleIsLogin}>
          <Text>
            {isLogin
              ? "Pas encore membre? Inscrivez-vous!"
              : "Déjà membre? Connectez-vous!"}
          </Text>
        </TouchableOpacity>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
  },
});

Pour pouvoir afficher conditionnellement les formulaires:

• On utilise le hook useState pour déclarer une variable d’état nommée isLogin avec une valeur initiale a true, et la fonction setIsLogin(), permettant de modifier cette variable.

• On crée la fonction nommée toggleIsLogin(), pour pouvoir inverser la valeur de la variable d’état isLogin.

• On utilise l’opérateur ternaire, qui suivant l'état de la variable isLogin, affiche LoginForm ou SignUpForm.

• Nous avons fourni la fonction toggleIsLogin() a l’attribut onPress d’une TouchableOpacity, pour pouvoir passer d’un formulaire à l'autre