Partie 1 : Démarrer un projet sur de bonnes bases
Partie 2 : Construire un espace membre sécurisé avec JWT
Partie 3 : Implémenter des fonctionnalités métiers
Partie 4 : Bonus

4.2. Ajouter Firebase à notre projet Angular

Maintenant, nous devons relier notre application Angular avec le backend de Firebase. Pour cela, nous allons utiliser les clefs de configuration récupérées précédemment depuis Firebase. Ouvrez donc le fichier /src/environments/environment.ts, et ajouter les clefs suivantes :

export const environment = {
  production: false,
  firebase: {
      apiKey: '<your-key>',    
      authDomain: '<your-project-authdomain>', 
      databaseURL: '<your-database-URL>',
      projectId: '<your-project-id>',
      storageBucket: '<your-storage-bucket>',
      messagingSenderId: '<your-messaging-sender-id>',
      appId: '<your-app-id>' 
  }
};

J’ai une remarque importante de sécurité à vous faire, si vous utilisez un système de gestion de version comme Git pour votre projet. Nous ajoutons ici des clefs secrètes de configuration pour accéder à Firebase. Si vous ne prenez aucune précaution particulière, ces clefs secrètes vont apparaître en claire dans votre système de gestion de version, et peuvent donc se retrouver sur un service en ligne comme Github par exemple. Pour éviter cela, pensez à ne pas versionner les fichiers contenant vos clefs secrètes, en ajoutant cette ligne dans votre fichier .gitignore :

# env
/src/environments/**

De plus, retirer ces fichiers de Git à l’aide de la commande suivante :

git rm --cached /src/environments/** 

Voilà, c’est plus prudent comme ça. 🤫

Si vous n’utilisez, ou ne savez pas ce qu’est Git, vous pouvez ignorer ce que viens de raconter. 😉

Nous avons désormais ajouté les clefs de Firebase dans notre application Angular. Plus tad, lorsque nous effectuerons des requêtes à Firebase, nous aurons déjà mis en place ces clefs. Nous pouvons passer à la suite !