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:
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.
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
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
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.