<-

Retour

2/ Expo: Authentifications

2/ Expo: Authentifications

Tutoriels de création d'une application avec les Frameworks React Native et Expo.

Dans ce tutos nous allons voir comment metre en place un formulaire d'authentification.

0

Partager sur twitterPartager sur FacebookPartager sur LinkdinPartager sur Telegram

1/ Changer le Splash Screen:

Le Splash screen, est l’image affichée en ouvrant notre application:


  • La taille recommandée pour un Splash screen est de 1242px x 2436px.

  • Il nous suffit juste de remplacer l’image nommée : splash.png dans le dossier /assets.

  • Pour changer la couleur d’arrière-plan (blanche par défaut), il faut nous rendre dans le fichier app.json, et changer la valeur de backgroundColor



2/ Changer l’icone:

Pour changer l’icône de notre application:


  • La taille recommandée pour l'icône est de 1024px x 1024px.

  • Il nous suffit juste de remplacer l’image nommée : icon.png dans le dossier /assets.



3/ Premiers composants:

3.1/ Structure de l’application:

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.


3.2/ Exercice: Message de bienvenue:

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




4/ Formulaires d’authentification:

4.1 /Mise en place des composants:

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


Commentaires

IsLoading