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
- Pricing
- Prerequisites
- Custom app add-on
- Apple and Google developer
- Setup and connection
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: $199 / month
For Apple Developer account: starts at $99 / year
For Google Developer account: $25 one time fee
MyStudio 1-on-1 Custom App Setup Assistance: $19 / Half Hour
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 for $19 / half hour.
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
- Facebook developer account: you will set this up in this article
- 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.
Prep Google sign in
Go back to your console, select “authentication” from the left hand menu under the “build” category, then click “get started.”
Select “Google” from the list.
Enable Google and provide the following:
- Public-facing name for project: the name of your app
- Support email for project: your email for support
Click “save.”
Step 3: Facebook developer
Sign up
You will need a Facebook developer account in order to allow Facebook single sign on. This account is free. To begin, go to http://developers.facebook.com/ and login to your business Facebook account. If you do not have a business Facebook account, we recommend creating one.
Click “get started.” Agree to the terms and policies.
NOTE: If you do not see “get started,” click on “my apps.”
Fill out the contact information if it is not pre-filled and then select which role you are taking for Meta developer. Generally this is “owner/founder.”
Then complete registration.
Add app
After being redirected to the app home page, click “create app.”
Select “other” for what the app does and “consumer” for the app type.
Add your app name, contact email, and connect the app to a Meta business account if desired. Then click “create app.”
Facebook developer - prep Facebook sign in
Select “set up” under the Facebook login option. If you don’t see this on the home page, you can access this from the “add product” option on the left menu. You will be redirected to quickstart, but click on “settings” on the left menu under “Facebook login.”
Here, you will see the client OAuth settings.
Ensure that each of the following buttons are toggled to “yes.”
- Client OAuth login
- Web OAuth login
- Enforce HTTPS
- Force web OAuth reauthentication
- Embedded browser OAuth login
- Use strict mode for redirect URIs
- Login from devices
Once saved, go to app settings > basic on the left menu column.
Copy the app ID and the display name
Firebase - prep Facebook sign in
Go back to your Firebase console, select “authentication” from the left hand menu under the “build” category, then click “get started” and select “Facebook.”
NOTE: If you no longer see this list, scroll to the top of the authentication page, click “sign-in method,” and click “add new provider.”
Enable Facebook and enter the following:
- App ID: this is the number you copied from your Facebook developer account > app settings > basic
- App secret: this is the secret key located in your Facebook developer account > app settings > basic
- Copy the OAuth redirect URI
After copying the OAuth redirect URI, go back into your Facebook developer account > Facebook login > settings and enter the URI under the “valid OAuth redirect URIs” field and save the changes.
Step 4: Prep Apple sign on
In your Firebase console, go to build > authentication > sign-in method > add new provider > Apple.
Copy the authorization callback URL and save it somewhere (like your notes app). Then go to your Apple developer account.
Log into your Apple developer account > identifiers > click the plus button to add an identifier. Then select “services IDs” and continue.
Then enter the following information:
- Description: type “Apple signin serviceID”
- Identifier: type “[yourbundleid].applesignin”
- For example, if your bundle ID is com.incouragemartialarts.incourage, then you would enter “com.incouragemartialarts.incourage.applesignin”
Be sure to copy this identifier and save it somewhere.
- Check the “sign in with Apple” and click “configure.”
Enter your web domain without the http(s)://. In the return URLs field, paste the Apple authorization callback URL you got earlier in this step from your Firebase account.
Then click save and continue.
Step 5: Single sign on
We are back in your MyStudio account!
Google sign in
Go to sales > member app / portal > custom app setup > single sign-on and toggle “sign in with Google” to “yes.” You will not have to add any additional info.
Apple sign in
Toggle the Apple sign in to “yes.” To help ensure a seamless user experience, we recommend entering your Apple service ID as well.
This was the identifier you created in step 5 of this article in your Apple developer account formatted as yourbundle.applesignin.
Facebook sign in
Toggle the Facebook sign in to “yes.” To help ensure a seamless user experience, we recommend entering your Facebook app ID and app name as well.
This was the app ID and display name from the “add app” section of step 4 of this article. It is located in your Facebook developer account > app settings > basic.
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.