If you need basic integration with Firebase, expo’s got you covered.
To avoid the elaborate setup required to connect your app with Firebase’s platform specific integrations (web, ios, and android), Expo relies on the Web SDK to authenticate users, store data on Firebase, or connect to analytics.
However, there may come the time you will need to make use of some more platform-specific features, such as, in my case, listening and interpreting dynamic links.
Sure, you may decide to spend time writing custom code to resolve dynamic links similarly to how react-native-firebase does it, but that would be a huge waste of your time, and even if you did that, there will come the time, most likely, that you’ll need another custom function to do something else, which react-native-firebase already does brilliantly.
So how do you integrate react-native-firebase with your Expo project?
The instructions on their documentation page are really just the tip of the iceberg. Instead of suggesting an immense edit to their docs, I thought it’s best to just document things in a blog post.
To make things easier to cope with, I’m going to split this article into two parts. The first will explain how to set authentication up, and the second will explain how to get dynamic links up and running.
Warning: You must be using an Expo custom client, and since you will need to run a custom command during build, it is highly recommended you get a paid EAS account. Totally worth it. Great service, and I’m not affiliated with Expo in any way.
Removing Expo modules
You most likely already installed some expo firebase modules:
Remove these from your package.json and let’s go over Expo’s installation guide to reverse everything you have set up so far.
Firebase SDK Setup
First thing we’ll get rid of is the Firebase SDK setup, which is using the Web SDK. We will be connecting to platform specific SDK soon.
Personally, I don’t store data on Firebase directly from the app. All my calls go through a GraphQL running as a cloud function on Firebase, so I will skip the part about storing data.
Authentication
Now comes the fun part.
So far, you have been using the Web SDK to authenticate users. It’s a nice workaround, but we want to start using platform specific authentication. So when on an iOS, we will want to authenticate with the Firebase iOS app credentials, and on Android, the Firebase Android app. You will need to have these apps set up on Firebase, obviously, under Project Settings > General > Your apps.
Download the GoogleService-Info.plist and google-service.json settings files after you update the SHA-1 and SHA-256 certificates which Expo EAS most likely generated and stored for you, which it also uses when building and submitting your app to the Google Play Store. You can find these on expo.dev or by running eas credentials as explained here.
As for iOS, add your App Store ID and Team ID.
Have a look at Encoded App ID. There’s a question mark next to it. When you hover on top you’ll see “Use this as a custom URL scheme in your Apple app”. We’re gonna meet this soon…
Point to GoogleService-Info.plist in your app.json under expo > ios > googleServicesFile and google-service.json under expo > android > googleServicesFile.
We are going to use a more “advanced” type of ReCaptcha authentication with Firebase. One that first sends a token directly to your app, verify it is received, and if it fails, then it will revert to the classic invisible/visible ReCaptcha verification with the fun images.
In order to be able to receive this code, you must enable two permissions with your iOS app. Add “UIBackgroundModes”: [“remote-notification”, “fetch”] under expo > ios > infoPlist. If you don’t build your app with these permissions in place, your app will crash and just show you the splash screen.
But that’s not it. There’s one more step we need to do. Remember the Encoded App ID? We need to add this custom URL scheme to our Expo app, and that’s no fun. Currently, Expo has no way (that I know of) to add custom URL schemes other than the single one you have under expo > scheme. So how do we do this?
While you build your app locally with eas build, run npx uri-scheme add [your Encoded App ID] right before Expo asks you to select a connected phone. Then you can continue building with Expo, or if you prefer, build with xCode.
Pro tip: One of the benefits to building and running with xCode, is the access to native log. Any native errors you get that cause your app to crash without any javascript logs, will appear under your native debugger in xCode. For instance, the missing URL scheme.
When building the app via EAS, we will execute npx uri-scheme add during build time via “eas-build-pre-upload-artifacts”: “npx uri-scheme add app-1–xxxxxx-ios-xxxxxxxxxxxx”
Installing Firebase Modules
Follow the instructions for setting up your phone authentication on react-native-firebase and build your own user onboarding experience.
Remember to add @react-native-firebase/app to your config plugins array as instructed in the docs.
And that’s it, you should be good to go with authentication.
Installing additional services
Now that you have authentication enabled with Expo and react-native-firebase, feel free to add additional modules and set them up. Adjusting to these should not be too complicated and often it only requires swapping a few lines here and there to make it work with your existing code.
In part two, we’ll look at setting up Dynamic Links with Firebase and Expo.
