Retour
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.
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 debackgroundColor
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 fonctionsetUser
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
.
- Le composant
3.2/ Exercice: Message de bienvenue:
Nous allons ajouter à notre code un nouveau composant, afin d’afficher un message de bienvenue aux utilisateurs:
-
Créer le composant fonctionnel :
./Components/HOC/Card/Card.jsx
-
Le composant reçoit en paramètres :
title
,content
,children
. -
Afficher
title
etcontent
dans deux balises<Text>
. -
Afficher
children
dans une balise<View>
. -
Styliser le composant. (Exemple en dessous )
-
Afficher le composant
Card.jsx
dansAuth.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éeisLogin
avec une valeur initiale a true, et la fonctionsetIsLogin()
, permettant de modifier cette variable. -
On crée la fonction nommée
toggleIsLogin()
, pour pouvoir inverser la valeur de la variable d’étatisLogin
. -
On utilise l’opérateur ternaire, qui suivant l'état de la variable
isLogin
, afficheLoginForm
ouSignUpForm
. -
Nous avons fourni la fonction
toggleIsLogin()
a l’attributonPress
d’uneTouchableOpacity
, pour pouvoir passer d’un formulaire à l'autre