Files
WalletTracker/FIREBASE_SETUP.md
Arthur Lempereur 8bde3d4f21 Initial commit: WalletTracker app with Firebase integration
- Setup Expo project with TypeScript
- Implement authentication (Login/Signup/Logout)
- Create Dashboard, Transactions, Subscriptions, and Analysis screens
- Add Firebase services (Auth, Firestore, Storage)
- Implement real-time synchronization
- Add charts and analytics
- Create reusable components (Button, InputText, TransactionCard, SubscriptionCard)
- Configure React Navigation with bottom tabs
- Add Firestore security rules
- Create comprehensive documentation (README, FIREBASE_SETUP, TESTING)
2025-10-23 14:36:36 +02:00

5.3 KiB

🔥 Guide de configuration Firebase

Ce guide vous aidera à configurer Firebase pour WalletTracker.

Étape 1 : Créer un projet Firebase

  1. Allez sur Firebase Console
  2. Cliquez sur "Ajouter un projet"
  3. Entrez le nom du projet : WalletTracker
  4. Désactivez Google Analytics (optionnel)
  5. Cliquez sur "Créer le projet"

Étape 2 : Ajouter une application Web

  1. Dans la console Firebase, cliquez sur l'icône Web (</>)
  2. Enregistrez l'application avec le nom : WalletTracker
  3. Cochez "Configurer Firebase Hosting" (optionnel)
  4. Cliquez sur "Enregistrer l'application"
  5. Copiez les identifiants de configuration qui s'affichent

Étape 3 : Configurer l'application

  1. Ouvrez le fichier src/config/firebase.ts
  2. Remplacez les valeurs par défaut par vos identifiants Firebase :
const firebaseConfig = {
  apiKey: "AIzaSy...",              // Votre clé API
  authDomain: "wallettracker-xxx.firebaseapp.com",
  projectId: "wallettracker-xxx",
  storageBucket: "wallettracker-xxx.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

Étape 4 : Activer Authentication

  1. Dans la console Firebase, allez dans Authentication
  2. Cliquez sur "Commencer"
  3. Dans l'onglet Sign-in method, activez :
    • Email/Password : Activez cette méthode
    • Cliquez sur "Enregistrer"

Étape 5 : Créer la base de données Firestore

  1. Dans la console Firebase, allez dans Firestore Database
  2. Cliquez sur "Créer une base de données"
  3. Sélectionnez Mode production
  4. Choisissez un emplacement (par exemple : europe-west1 pour l'Europe)
  5. Cliquez sur "Activer"

Étape 6 : Configurer les règles Firestore

  1. Dans Firestore Database, allez dans l'onglet Règles
  2. Copiez le contenu du fichier firestore.rules de ce projet
  3. Collez-le dans l'éditeur de règles Firebase
  4. Cliquez sur "Publier"

Les règles configurées permettent :

  • Chaque utilisateur peut lire/écrire uniquement ses propres données
  • Protection contre les accès non autorisés
  • Validation des champs requis lors de la création

Étape 7 : Activer Storage (optionnel)

Pour stocker les photos de tickets :

  1. Dans la console Firebase, allez dans Storage
  2. Cliquez sur "Commencer"
  3. Sélectionnez Mode production
  4. Cliquez sur "Suivant" puis "Terminé"
  5. Dans l'onglet Règles, utilisez ces règles :
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Étape 8 : Créer les index Firestore (si nécessaire)

Si vous rencontrez des erreurs de requête, Firebase vous fournira un lien pour créer automatiquement les index nécessaires.

Les index recommandés :

Collection transactions

  • Champs : userId (Ascending), date (Descending)
  • Champs : userId (Ascending), type (Ascending), date (Descending)
  • Champs : userId (Ascending), category (Ascending), date (Descending)

Collection subscriptions

  • Champs : userId (Ascending), nextPaymentDate (Ascending)

Étape 9 : Tester la configuration

  1. Lancez l'application : npm start
  2. Créez un compte de test
  3. Vérifiez dans la console Firebase :
    • Authentication : Votre utilisateur doit apparaître
    • Firestore : Les collections doivent se créer automatiquement

🔐 Sécurité

Bonnes pratiques

  1. Ne jamais commiter vos identifiants Firebase dans Git
  2. Utilisez des variables d'environnement pour la production
  3. Activez l'authentification à deux facteurs sur votre compte Firebase
  4. Surveillez l'utilisation dans la console Firebase
  5. Configurez des alertes de budget

Limites du plan gratuit (Spark)

  • Firestore : 1 Go de stockage, 50k lectures/jour, 20k écritures/jour
  • Authentication : 10k vérifications/mois
  • Storage : 5 Go de stockage, 1 Go de téléchargement/jour

Pour une utilisation en production avec plusieurs utilisateurs, envisagez le plan Blaze (paiement à l'usage).

🆘 Dépannage

Erreur : "Firebase: Error (auth/invalid-api-key)"

  • Vérifiez que vous avez bien copié l'apiKey correctement
  • Assurez-vous qu'il n'y a pas d'espaces avant/après

Erreur : "Missing or insufficient permissions"

  • Vérifiez que les règles Firestore sont bien publiées
  • Assurez-vous que l'utilisateur est bien authentifié

Les catégories ne s'affichent pas

  • Vérifiez que l'utilisateur est connecté
  • Les catégories par défaut se créent automatiquement au premier ajout de transaction

📚 Ressources

Checklist de configuration

  • Projet Firebase créé
  • Application Web ajoutée
  • Identifiants copiés dans firebase.ts
  • Authentication activée (Email/Password)
  • Firestore Database créée
  • Règles Firestore configurées
  • Storage activé (optionnel)
  • Application testée avec succès

Une fois toutes ces étapes complétées, votre application WalletTracker est prête à être utilisée ! 🎉