Learn how to set up the Facebook developer account and Firebase in order for customers to login via Apple, Gmail, and Facebook.
Table of contents
Overview
The custom app is an add-on that allows studios to have their own branded member app in the apple and google play stores. This provides specific marketing and brand awareness to both current and potential customers. The Firebase allows you to select how members can sign into the app.
Pricing
MyStudio: a monthly add-on
For Apple Developer account: an annual add-on
For Google Developer account: a one time fee
Prerequisites
Custom app add-on
In order to set up your custom app, you will need to, first, purchase the custom mobile app add-on in my account > plan and billing.
When you purchase the custom mobile app with MyStudio, we will make sure your app stays up to date and you can get 1-on-1 assistance with our team.
Apple and Google developer
Before setting up Firebase, you will need to have purchased and connected your Apple developer and Google developer information.
For assistance in setting up your Apple developer account, please see our article here:
Custom App: Apple Developer Setup
For assistance in setting up your Google developer account, please see our article here: Custom App: Google Developer Setup
Attention: This process can be confusing as there will be a lot of back and forth between your accounts. We highly recommend that you keep the following tabs open on your device to make it a little easier:
- MyStudio: opened to the custom app setup
- Firebase account: you will set this up in this article
- Google developer account
- Apple developer account
- A notes app of some kind
Remember, if you need assistance with this process, please reach out to our customer support team requesting a 1-on-1 custom app assistance.
Setup and connection
Step 1: setup Firebase
Basics
To begin, go to https://firebase.google.com/ and sign in to your developer Gmail you used to create the Google Developer account. Then select “get started.”
Click “add project.”
Name your project and confirm the terms of service.
Disable Google Analytics.
Add Apple app
Click iOS+ to add your Apple app.
You will then be required to fill out the following:
- Apple bundle ID: this was the reverse-domain name string you created, formatted as com.domainname.appname. This MUST match what you entered in MyStudio.
Then click “register app.” Then just click next for the remaining steps (“download config file,” “add Firebase SDK,” and “add initialization code”) and continue to console.
Add Google app
Select the Android icon to add the Google app.
NOTE: If you do not see these options on the project overview page anymore, hover your mouse over the gear > project settings > scroll down to “your apps” and select “add app.”
You will then be required to fill out the following:
- Android package name: this is the reverse-domain name string you created for the Apple app name, formatted as com.domainname.appname. This MUST match what you entered in MyStudio.
- Debug signing certificate SHA-1: copy and paste the following - 03:df:c5:74:06:2a:63:46:0c:fe:d1:71:38:c3:08:04:db:df:1a:b0
Then click “register app.” Then just click next for the remaining steps (“download config file” and “add Firebase SDK”) and continue to console.
Firebase snippet and dynamic URL
Click the “web” icon to get the Firebase snippet.
NOTE: If you do not see these options on the project overview page anymore, hover your mouse over the gear > project settings > scroll down to “your apps” and select “add app.”
You will then be required to fill out the following:
- App nickname: your app name
- Firebase hosting: leave this unchecked
Then select “register app.” You are going to see code in step 2. Copy only the section that begins with “apiKey…” through the “appID…” as illustrated below in the green box.
Once copied, go into your MyStudio account > sales > member app / portal > custom app setup > Firebase and paste the code in the “Firebase snippet” section.
For the Firebase dynamic URL, enter your domain formatted as: firebase-project-id.page.link.
Example: if your app in Firebase is named "Incourage" you would enter "incourage.page.link"
Then go back to Firebase and click “continue to console.”
Step 2: Google services JSON and Plist files
Google services JSON file
In your Firebase account, click into the project overview, hover your mouse over the Android app you created, and click the settings gear.
Scroll down to “your apps” and click to download the “google-services.json” file under the Android app. Save this in a secure location.
Plist file
Select the Apple app on the left and download the “Googleservice-info.plist.”
Push notification credentials
Scroll back up to the top and click the “service accounts” tab. Click “generate new private key.” This will download another JSON file.
Go back into MyStudio > sales > member app / portal > custom app setup > Firebase and upload the following items:
- Google services JSON file: the first JSON file you downloaded from Android app settings.
- Googleservices-info.plist file: the plist file you downloaded from the Apple app settings
- Push notification credentials: the second JSON file you downloaded from generating the private key.
After submitting your apps from the dashboard, you should be all set! Keep an eye on this page over the next few days to ensure there are no additional actions required from you.