Setting up Firebase, Auth, Push Notifications & Firestore in Simple Expo Kit

Simple Expo Kit comes with Firebase integration for auth, firestore and push notification (FCM). These services are already implemented in the code and this guide covers how to setup and configure a firebase project and download google-services.json & google-service-key.json from firebase.

If you are familiar with setting up firebase projects, you can skip to the sections that align with your immediate interest from table of contents.

Create a Firebase Project

Firebase couples very nicely with hybrid mobile applications. Expo and React Native have first class plugin support for firebase. If you are new to mobile development then please note that firebase has two plans, spark and blaze (pay-as-you-go). For most projects, spark plan is more than enough to get started.

To create a firebase project, follow the steps below:

1. Go to the Firebase Console
2. Click on the "Add project" button in the top right corner.
3. Enter the project name or use "Google Cloud Project". click on the "Continue" button.
4. Google will prompt you to enable Gemini, Google Analytics, and others, you can enable them and continue.
5. Link an analytics account from "Choose or create a Google Analytics account"
6. and click on "Create Project" button.

that's all, in couple of moments google will setup a Firebase project for you and ask you to 'continue'. You will be able to setup your android, ios & web apps after the project is created, from project dashboard.

Adding Apps to Firebase Project

Adding an app is very straight forward, you just click Add App button in firebase console. It will present a list of platforms, like ios, android, web, unity & flutter.

01. Add an App (Android & iOS)

First create an android app, then repeat the process for ios app.

1. Open your app.json
2. Copy the app ID (com.company.appname) from ios.bundleIdentifier or android.package
3. Use this same value in firebase for:
   • Android package name
   • iOS bundle identifier
4. Enter your app name as the nickname for both platforms

If you already set this in step 1, just reuse it exactly—no changes needed.

Normally you will then add firebase-sdk, but for Simple Expo Kit (react native template kit), you don't need to do anything else, other than following along the guide.

02. Download Config Files (Android & iOS)

After creating the apps, download the required config files:

• Android: google-services.json
• iOS: GoogleService-Info.plist

Place both files in the root directory of your project.

These files are safe to commit. no need to add them to .gitignore.

If you miss downloading them, you can always get them later from:

Project Settings → General → Your Apps → (Android / iOS) → Download

We will download google-services.json, a couple of times later, when we update few things

Download Firebase Service Account keys

We have the publically accessible files required for configuration in place. Now we are going download firebase Service Account Keys.

Firebase Service Account Keys are used to authenticate firebase admin sdk. Keep them secure and never share them with anyone. SEK (react native template kit) doesn't commit this to the source code.

1. Go to Firebase Console
2. Open Settings / Service Accounts.
3. Click on Generate new private key.
4. Download this key and save it directly to admin/ as /google-service-key.json.

This key is also going to be used in Push Notification Setup with Expo CLI.

Setting Firebase Auth & Google Sign In

Frankly, firebase configurations can be pain in the butt sometimes, but following this guide for our expo template kit will make it insanely easy for you to getting started.

1. In sidebar of Firebase console go to Security > Auth.
2. Click on Get Started.
3. From Additional Providers select Google.
4. Enable the toggle, on the right side.
   • setup project public facing name
   • and support email. and save.
5. Open Google from provider that you just added, you will now see web client id and web client secret.
6. Copy the web client Id from firebase & go to your SEK project root .env.
7. replace EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID with your web client id.
8. Copy the web client id first part 111111111-xxxxxxxxxx, before .apps.googleusercontent.com
   • Go to app.json and locate iosUrlScheme.
   • Replace xxxxxx-xxxxxxxxxxxxxxxxxxxxxx after com.googleusercontent.apps. with your web client id first part.

If you don't see .env, copy .env.example as .env, (but we already handled that in step 1)

Note on 8: iosUrlScheme is only required in this specific pattern, otherwise it won't work.

Now you should be able to sign in with google in your Simple Expo Kit Templated app. You can enable more providers from firebase auth, from email to third party identity providers like X, facebook, github, apple, etc. Your app will automatically support these providers once you enable them in firebase console.

You can also use supabase auth as alternative to firebase auth. Simple Expo kit also supports that, if you are goint to use supabase for auth, you can skip the auth step from firebase.

Push Notification Setup for your Expo React Native App

Simple Expo Kit comes with push notification code with Expo Push, Expo Push Notification API and FCM. It includes everything you need for push notification, like notification_queue, user_devices and cron routines. We simplified it for you. All we have to do is to configure the firebase and expo using eas cli for push notifications.

1: Generate a Web Push Certificate

First, we need to generate a web push certificate, which firebase uses to connect with external push services.

1. Open your Firebase Console.
2. Go to Project Settings → Cloud Messaging.
3. Look for the Web Push Certificate section.
4. Click Generate Key Pair.

2: Setup Google Service Account Key for Push Notifications (FCM V1)

To get expo react native to work flawlessly with push notifications, we need to setup Google Service Account Key for Push Notifications (FCM V1) in our expo app project. To do this we are going to use eas Expo CLI.

If you never worked with eas before, follow this guide - Expo CLI. After installation you need to run eas login to login with your expo account & eas build:configure to setup the project in Expo.

After initial setup, eas will create eas.json file in your project root. You can use this file to configure your project for different environments.

Getting back to the step theme, go to project terminal (root directory of your project). Stuck? Follow this guide from expo: Expo Push Notifications with FCM

1. Run eas credentials from you terminal.
2. Select Android > development > Google Service Account from the options.
3. Choose Manage your Google Service Account Key for Push Notifications (FCM V1).
4. Select Setup Google Servie Account Key for Push Notifications (FCM V1)
5. Upload a new Service Account Key, and it will detect the admin/google-service-key.json automatically. Upload that.

Ensure you are using Private Firebase Key that we have put in admin/google-service-key.json.

Fun fact, you won't start receiving notification yet, because we are yet to configure the sha1 keys for our app builds.

03: Configure SHA-1 Keys (Android)

This is one of those steps that have tendency to go wrong, Android builds have different fingerprints and we have to find the right one, if we want our development build to work.

When you upload a new build remember to use the correct fingerprint for that build, otherwise notifications won't work.

We already ran a build previously, but if you haven't just follow these commands before.

npm install
cd admin npm install
npx expo run:android

or for iOS

npx expo run:ios

After running the project for the first time, it might hit the configuration errors that we expect. You can also run with eas, eas builds are faster but for development I like local development builds. We ran the project to get the actual SHA 1 for the android development build, for each environment it is going to be different

We need to run the java keytool command to find the exact SHA 1 for our android developmetn build. EAS Reference run this inside project and not with ~, we want to get the actual SHA 1 for our builds.

EAS builds have their own SHA 1s, which you can get from EAS dashboard. If you are using EAS for builds,

1. In your project terminal, run

keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android

2. This will reveal a certificate prints both sha 1 & sha 256. copy SHA 1 fingerprint.
3. Go to Firebase Console, Open Settings -> General -> Your Apps, Click Add Fingerprint. .
4. and paste the SHA-1 fingerprint.
5. Repeat the same process for SHA-256 fingerprint (optional for now).
6. On the same screen, we have Download google-services.json
7. Download again & place it in root directory of our project.

At this point, our firebase auth, push notifications and firestore are configured. Before we test notifications, we will need to configure supabase. In this expo react native app template kit we are using supabase by default for enqueuing and sending push notification data using postgres. You can replace it with firebase or other alternatives later.

Checklist

Ensure you followed the instruction and we have now.

1. google-services.json in our boostrapped project root directory.
2. google-service-key.json in admin directory.
3. Redownloaded google-services.json after setting up SHA 1 & SHA 256 fingerprints.
4. eas credentials command used to configure the expo project with firebase.
5. (iOS) we have the GoogleService-Info.plist file placed in root directory.
6. Already setup "iosUrlScheme": "com.googleusercontent.apps.<my-firebase-project-web-url>" in app.json.

Let's move on to the next step, Step 3 - Setting Up Supabase for our Expo React Native App.