Application de gestion de mot de passe avec Firebase
1 : Création projet React Native
2 : Inscription sur https://firebase.google.com/ , puis créer un projet. Activer l’authentification par mail et mot de passe.
3 : Dans l’app mobile, création de deux formulaires dans deux écrans séparés :
• La page d’inscription. Elle permet de s’inscrire sur l’application. Les données sont stockées dans la partie Authentification de Firebase.
• La page connexion. Elle permet de se connecter à l’application. La vérification se fait via Firebase. Si la connexion réussie, rediriger vers une troisième page qui affiche les données.
Infos d'utilisation de Firebase dans une app React Native : https://rnfirebase.io/
4 : Avec Firestore Database, enregistrement d'un mot de passe avec les informations suivantes : • Login : string (identifiant) • Password : string (mot de passe) • Name : string (nom du site ou de l’application) • Type : String (Appli mobile ou site web) Structure minimale qui peut être améliorée...
5 : Création des différents écrans permettant d’afficher, créer, modifier et supprimer les mots de passe enregistrés.
Pour l’affichage, les mots de passes sont cachés par défaut.
6 : En utilisant https://rnmmkv.vercel.app/#/ , on fait en sorte que lorsqu'un utilisateur se connecte, cela enregistre ses identifiants de connexion pour qu’il puisse se loguer automatiquement les prochaines fois.
A la déconnexion, suppression de ses identifiants de connexion.
-
Connexion avec la Biométrie
-
Transfère des photos depuis la galerie vers FireStore
Avec la nouvelle version de React 18, react Native a des soucis avec React Navigation. Il faut donc créer le projet avec cette ligne de commande :
npx react-native init p17BaaS --template react-native-template-typescript@6.10.2
Installer les packages :
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Les icônes:
npm install --save react-native-vector-icons
npm i --save-dev @types/react-native-vector-icons
Editer le fichier android/app/build.gradle (MAIS PAS android/build.gradle) et ajouter en bas :
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
npm install react-native-vector-icons react-native link react-native-vector-icons
Installer React Native Firebase
npm install --save @react-native-firebase/app
Installer le module d'authentification de Firebase. Ca fournit des services backend et des SDK faciles à utiliser pour authentifier les utilisateurs. Il prend en charge l'authentification à l'aide de mots de passe, de numéros de téléphone, de fournisseurs d'identité fédérés populaires comme Google, Facebook et Twitter, et plus encore.
npm install @react-native-firebase/auth
Gestion des formulaires avec React Hook Form
npm install react-hook-form
un bon tuto vidéo : https://www.youtube.com/watch?v=6DRAg26QtPI&list=PLpepLKamtPjh-xbBONWs42XNNSbtz3VGc&index=7&ab_channel=WawaSensei
Gestion des règles de validations des formulaires avec YUP
npm i yup
Yup a besoin d'un resolver et donc de sa librairie :
npm install @hookform/resolvers
Doc d'inspiration : https://blog.logrocket.com/email-authentication-react-native-react-navigation-firebase/
4/ création de la DB : https://console.firebase.google.com/project/lamanubaas/firestore
npm install @react-native-firebase/app
npm install @react-native-firebase/firestore
6/ installation de la lib :
npm install react-native-mmkv-storage
7/ biométrie
npm i react-native-biometrics
8/ Gestion de la galerie photo
$ npm i react-native-image-picker
Ajouter dans le fichier android/app/src/debug/AndroidManifest.xml :
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Pour stocker les photos: https://console.firebase.google.com/project/lamanubaas/storage/lamanubaas.appspot.com/files Doc sur https://rnfirebase.io/storage/usage
Gérer le storage
npm install @react-native-firebase/app @react-native-firebase/storage
npm install react-native-progress
Ajouter des règles dans le firebase cloud storage pour pouvoir enregistrer des photos :
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}