2
Configuration Firebase
Arthur Lempereur edited this page 2025-10-23 18:23:11 +02:00

🔥 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

🔒 Configuration sécurisée avec variables d'environnement

Pour des raisons de sécurité, les identifiants Firebase sont stockés dans des variables d'environnement.

  1. Copiez le fichier d'exemple :

    cp .env.example .env
    
  2. Remplissez vos identifiants Firebase dans le fichier .env :

    EXPO_PUBLIC_FIREBASE_API_KEY=AIzaSy...
    EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=wallettracker-xxx.firebaseapp.com
    EXPO_PUBLIC_FIREBASE_PROJECT_ID=wallettracker-xxx
    EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET=wallettracker-xxx.appspot.com
    EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
    EXPO_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123
    EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
    
  3. Vérifiez que .env est bien dans .gitignore (déjà fait par défaut)

⚠️ IMPORTANT : Ne commitez JAMAIS le fichier .env dans Git ! Il contient vos identifiants secrets.

É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

    • Le fichier .env est automatiquement ignoré par Git
    • Vérifiez toujours avant de commit : git status
  2. Utilisez des variables d'environnement

    • Développement : fichier .env local
    • Production : secrets EAS ou variables CI/CD
  3. Activez l'authentification à deux facteurs sur votre compte Firebase

  4. Surveillez l'utilisation dans la console Firebase

    • Vérifiez régulièrement les utilisateurs authentifiés
    • Surveillez les lectures/écritures Firestore
  5. Configurez des alertes de budget

    • Firebase Console > Utilisation et facturation > Détails et paramètres
    • Définissez des alertes pour éviter les surprises

🚨 Si vos identifiants ont été exposés

Si vous avez accidentellement commité vos identifiants Firebase :

  1. Régénérez immédiatement vos clés API :

    • Firebase Console > Paramètres du projet > Clés API
    • Supprimez l'ancienne clé
    • Créez-en une nouvelle
    • Mettez à jour votre fichier .env
  2. Vérifiez les accès non autorisés :

    • Firebase Console > Authentication > Utilisateurs
    • Supprimez les comptes suspects
    • Vérifiez les logs d'activité
  3. Nettoyez l'historique Git (si nécessaire) :

    # Attention : ceci réécrit l'historique Git
    git filter-branch --force --index-filter \
      "git rm --cached --ignore-unmatch src/config/firebase.ts" \
      --prune-empty --tag-name-filter cat -- --all
    
  4. Renforcez la sécurité :

    • Activez App Check dans Firebase
    • Restreignez les clés API par domaine/application
    • Revoyez vos règles Firestore

Variables d'environnement pour la production

Pour déployer en production avec EAS :

# Créer les secrets EAS
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_API_KEY --value "votre_clé"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN --value "votre_domaine"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_PROJECT_ID --value "votre_projet"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET --value "votre_bucket"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID --value "votre_sender_id"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_APP_ID --value "votre_app_id"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID --value "votre_measurement_id"

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 ! 🎉