Setting Firebase Credentials

In order for our web app to make authorized requests over the internet to Firebase, we need to make sure we initialize the web app’s use of the Firebase SDK with appropriate credentials from our Firebase project.

We can retrieve our Firebase project’s web application SDK configuration using the Firebase CLI:

firebase apps:sdkconfig --project ionic-conference-demo

Which yields some output like:

✔ Downloading configuration data of your Firebase WEB app
// Copy and paste this into your JavaScript code to initialize the Firebase SDK.
// You will also need to load the Firebase SDK.
// See https://firebase.google.com/docs/web/setup for more details.

firebase.initializeApp({
  "projectId": "ionic-conference-demo",
  "appId": "1:123456789123:web:a1b2c3d4e5f6a7b8c9d1e2",
  "databaseURL": "https://ionic-conference-demo.firebaseio.com",
  "storageBucket": "ionic-conference-demo.appspot.com",
  "locationId": "us-central",
  "apiKey": "AIa1b2c3d4e5f6a7b8c9d1e2f3a1b2c3d4e5f6a",
  "authDomain": "ionic-conference-demo.firebaseapp.com",
  "messagingSenderId": "123456789123"
});

You may have noticed when we cloned our Ionic demo app repository that there is a secrets directory in the source tree. This is where we need to place our Firebase credentials in a TypeScript file called firebase-app-config.ts. Let’s use Cloud9’s editor to do that.

Expand the ionic-conference-demo directory in the Cloud9 editor’s tree view on the left, and right-click on the secrets directory to open the context menu. Select “New File” and name it firebase-app-config.ts:

Now copy and paste the Firebase CLI output from the previous window into our new file. Go ahead and edit the text so that it contains the following. We’re most interested in keeping the JSON content between the { and }:

Eventually we’ll be migrating the app to use Amplify, and for now we’ll need to stub out an Amplify config file as well. Like we just did, create a new file in the secrets directory and name it amplify-config.ts. Edit the file so it contains:

If you’ve never written any code before, congratulations - you just fixed a bug without even knowing it! Now that the Firebase SDK is configured in the web app, we can serve the app from Cloud9.