Connect Firepress to Firebase

In order for your Firepress app to interact with Firebase services, you need to add your Firebase project configuration to your Firepress app.

Details of the two files you need to create can be found in your project's /config folder.

Step 1: Set up a Service Account

Firebase projects support Google service accounts, which can be use to call Firebase server APIs from trusted environments.

In order for your development server to interact with Firebase services we will use credentials obtained via this service account to authorize server requests.

You can read more about it here - https://firebase.google.com/docs/admin/setup

To authenticate a service account and authorize it to access Firebase services, you must generate a private key file in JSON format.

To generate a private key file for your service account:

1. In the Firebase console, open Settings > Service Accounts.

2. Click Generate New Private Key, then confirm by clicking Generate Key.

3. Rename the file to service-account.json and add the file to your Firepress app's /config folder.

By default this file will be excluded from your Github repository's source code.

Step 2: Add Firebase config object to your Firepress web app

To get the config object for a Firebase Web App:

1. In the Firebase console, open Settings > General

2. In the Your apps card, select the nickname of the app for which you need a config object.

3. Select Config from the Firebase SDK snippet pane.

4. Create a new firebase.config.js file in your Firepress app's /config folder and add the config object snippet.

By default this file will be included in your Github repository's source coded.

Step 3: Run Development Environment

At this point the basic connection between Firepress and Firebase has been made so you can spin up the development environment and have a look around.

1. Run the command npm run dev

Step 4: Set Up Admin User

In order to perform database updates from the UI we need to set up an admin user. You will remember from a previous section that we enabled authentiction with the Google provider sign in, as well as restricting database operations to users with the custom claim of editor. We will now finish this process by setting up and admin user with the right claims.

1. With the development environment running, go to http://localhost:3040/sign-in

2. Sign In with the google account that is to be used as the admin user.

3. This process will have registered a user within Firebase. -- You can go to the Authentication section of the Firebase Console, click on the Users tab and you should see the newly created user.

4. Next we will grant editing permisssions to the admin account. To do this, shut down the development environment, and run the command: npm run grant-editor <admin email address>

5. Runing the above will have assigned our admin account with the claim of editor, but in order to start editing from the UI we must re-sign in.

6. Start the development environment using npm run dev.

7. Go to http://localhost:3040/sign-in and click the Sign Out button.

8. Go back to http://localhost:3040/sign-in and sign back in using the Google provider.

9. The Firepress CMS toolbar should now appear at the top of page.