User login with Firebase

This guide covers how to set up a login page in Bravo. The login utilizes Firebase as the user management service. There are several steps involved so bear with us! We'll walk you through setting up the UI in the design tool and configuring Firebase to store and manage your users.
Currently, we support the two following login types with Firebase:
Email & password login: users log in with the email and password they provided when registering.
Phone login: users introduce their phone number, and get a SMS with a code they need to use to log in.
What is Firebase? Firebase is a backend-as-a-service (Baas) from Google that provides features for building mobile apps.
Follow along below or watch this tutorial
1. Setting up the UI
💾 Sample design files
Here are sample design file that already contains all the necessary Tags for the login pages (both email/password and phone login options). Follow the steps below to learn how to add the tags to your UI.
Figma Sample
Bravo Sample: Login with Firebase
Figma
Adobe XD Sample
Coming soon!
Make sure to place the flow start point (Figma) or Home icon (XD) on the "Home" screen of your app (i.e. the first screen users will see after they have logged in).
​
Login page
The login page will appear when the user is not logged in when the app starts, or when the user has just logged out. This screen will appear after the intro page, in case you have one.
There can only be one login page in the app. In order to set the login page, add the [page:login] tag in the page-level component (1st level). 
Tip: in case you have several login options, you can set the [page:login] tag in a screen where the user can choose among those login options, and then navigate to separate pages to log in. See our example design to see how to do it.
Email & password login
In order to set up the email & password login, use the tags below.
1.[component:input-email]: Indicates which field will be used as the user email input, needs to be a valid email, as is required by Firebase.
2.[component:input-password]: Indicates which field will be used as a password input. Needs to be at least 6 characters.
3.[action:login:firebase-email-password]: Action of the button that does the login action with the filled information in the previous fields.
Make sure the email field, password field, and the login button are all in the same [container].
Phone login
In order to set up the phone login, use the tags below.
1.[component:input-tel]: Indicates which field will be used as the user phone input. It needs to be a valid phone number, or a test phone number provided in Firebase (more about this here, step 7).
2.[action:login:firebase-phone]: performs the login action, needs to be added in the login button.
After the login screen, the user will navigate to a screen where they need to input a confirmation code sent by email. See here how to set it up.
For phone login, there's no signup page - the login action will also create new accounts for first-time users.
Signup page (email & password login - optional)
You can either allow news users to register in your app or only allow access to a specific list of users defined in Firebase. So the signup page (or a signup container) is an optional screen.
1.[component:input-email]: Indicates which field will be used as the username login, needs to be a valid email, as is required by Firebase.
2.[component:input-password]: Indicates which field will be used as a password.
3.[action:register:firebase-email-password]: Action of the button that does the register action with the filled information in the previous fields.
Reset password page (email & password login - optional)
You can add a container or a page that will send an email to your users to reset their password.
1.[component:input-email]: Indicates which field to be used to enter the email from the user to send the reset password instructions.
2.[action:reset-password:firebase]: Action of the button to send the reset instructions.
Confirmation code page (phone login - mandatory)
In case you set up phone login, you'll need to create a page where the user will introduce a confirmation code received via SMS. The user will automatically navigate to this page after the login screen.
To set it up, add the following tags:
[page:login:verify-phone]: add this tag in the page-level component.
[component:input-number]: This will create a numeric input field for the confirmation code.
[action:verify-phone:firebase]: this action sends the confirmation code. If the code is correct, the user will navigate to the home page. Otherwise, an error message will be displayed, and the user will need to log in again.
Log out action (optional)
To allow your users to log out (once they have logged in), add this action Tag to a UI element.
1.[action:logout:firebase]: Log out action, can be added to any UI element inside the app.
2. Set up in Firebase
Once you have the UI ready, it's time to configure a Firebase project to manage user authentication.
1. Log in or create a Firebase account in the Firebase Console. 
2. Once in the Firebase Console, create a new project or select an existing project you want to use.
3. If creating a new project, first fill in a project name.
4. Next, choose if you want Google Analytics support. If you do, keep it enabled (it's optional). You will need to link it to a Google Analytics account in the 3rd step. If not, disable it.
5. Finally, we create the project, it takes some seconds.
6. After the project is created, click Develop > Authentication from the left menu.
Here is where your user accounts will be created and stored. 
For email-based login: If you have a signup page in your app, users will appear here once they have registered. If you want to limit access to a specific list of users, you will create their accounts here.
For phone-based login: the user accounts (with their phone number) will appear here after they log in successfully.
7. Next, enable the type of Authentication we want to use in our Firebase.
For email login, enable the first toggle. The email link (passwordless sign-in) is currently not supported. Click Save.
Note that Bravo does not currently support Firebase email verification
For phone login, enable the phone toggle. As you'll see, you can add here some test phone numbers to log in - you'll need to provide a test confirmation code as well, that you'll be able to introduce in the login flow.
​
8. Now you need to obtain the Firebase configuration files and upload them to Bravo.
The goal of this configuration file is to create a link between our app and this Firebase project. So if you want to connect to another Firebase project in the future, you can do it by uploading a new Firebase configuration file in Bravo. You will generate one file for each mobile platform (iOS and Android).
9. Configuring iOS to activate login in Bravo Vision
Go to Project Overview (from the left menu), click the iOS symbol
10. In step 1, fill in the iOS Bundle ID for Bravo Vision: com.codelesslabs.app Leave the rest blank, and click Register app.
11. In step 2, download the file GoogleService-Info.plist.
12. Click Next. The rest of the steps are not needed, so click Next for steps 3 & 4. In the final step, click Skip this step (or Continue to console if it's enabled).
13. Configuring Android to activate login in Bravo Vision
Go to Project Overview (from the left menu), click the Android symbol or Add an app
14. In step 1, fill in the Android package name for Bravo Vision: com.appfoundry.previewer Leave the rest blank, and click Register app.
15. In step 2, download the file google-services.json.
16. Click Next. The rest of the steps are not needed, so click Next for steps 3. In the final step, click Skip this step (or Continue to console if it's enabled).
Phone login setup
In case you want to set up phone login, there's some additional steps you'll need to follow. These steps will be different for Android and iOS.
Android
For Android, there are some security steps you need to complete in Firebase.
First, you'll need to request an app bundle (the easiest will be to request a debug APK), in the Publish section. Even if you don't want to publish your app yet, you'll need this to obtain a valid SHA code.
In order to obtain this code, go to the History section after your bundle is generated, and copy the SHA code.
Once this is done, go back to your Firebase project. In the project settings, paste this SHA code in the section shown below, inside the Android app you previously created.
Finally, you'll need to set up the SafetyNet option. To do that, go to Build -> App Check in the side menu. Then, select SafetyNet, enable the checkbox (the SHA code should already be there), and click Save.
iOS
For iOS, you don't need to add any extra settings in Firebase for now. You'll need to configure additional settings when you want to generate an IPA bundle. This is covered in the last section of this guide.
3. Configure Firebase login for Bravo Vision
1.  Once you have the Firebase configuration files, go to Bravo Studio. Open the app project that has the login (or import your design file if you haven't yet). Click Settings.
2. Activate the Firebase toggle. Under Activate Firebase services in Bravo Vision, upload the two Firebase files in the corresponding fields.
3. Your app is ready to test! Open Bravo Vision to test out the login pages.
4. In case you're using phone login, remember that you'll need to provide a SHA code for an app bundle in the Firebase settings, even if you'll only test in Bravo Vision for now. You can see here how to do that. This SHA can be added in Firebase after downloading the google-services.json.
On Bravo Vision, every time the app is opened, login will be required. This won't happen on the published app, where the session will be maintained until the user chooses to log out.
After the user has logged in, two special variables will be created: user.id and user.email (only for email-based login). These built-in variables can be sent as part of an API request, to handle user-specific data in the database.
Bravo Vision:
4. Configure iOS and Android publication
Once you are ready to publish your app to the stores, you need to create new Firebase configuration files with the final bundle ID (for iOS) and package name (for Android) and upload them to Bravo Studio.
1. Where do I find the final package name (for Android)?
In the Publish tab of your app project, go to Android > Publication. The package name is automatically generated for your app, use this for your final Firebase file.
2. Where do I find the final Bundle ID (for iOS)?
When you have the necessary files for publication, use the same Bundle ID from the Bravo publication form for the final Firebase file. (Check how to set up the Bundle ID on the app publication process)
Settings for phone login
In case you're using phone login, there are some additional points to consider.
Android
Once you generate your debug APK or AAB bundle, you'll need to add its SHA code to the Firebase settings as indicated here. Even if you did this before to test the app in Bravo Vision, you'll need to do it again for each app bundle you create and want to test (you can add many SHA codes to the same Firebase project). 
So, for instance, in case you decide to have both a debug APK and a publishable AAB, you'll need to add the two SHA codes for those bundles to the Firebase project settings. Remember that you can add the SHA codes after downloading the corresponding google-services.json file - you don't need to generate a new one for every new SHA code.
After doing this, your app bundle will have a functional phone login in place! 🥳
iOS
For iOS, you'll need to set up Cloud Messaging in Firebase. This is found under Project Settings > Cloud Messaging > Apple App configuration.
Cloud messaging allows to be configured using an APNs Authentication Key or using APNs Certificates. Using authentication key is recommended, and also easier to set up.
To do this, iInside the Developer Central, go to Keys and create a new one, of type Apple Push Notifications service (APNs):
Fill the KeyID, TeamID and upload the p8 file in Firebase settings, and that's it. The TeamID is displayed in the Membership page.
Managing your users base
In terms of the users base, we have two choices:
1.Have a separate list of users for the published apps.
If you want to have a separate list of users, you need to create a new Firebase project and repeat the steps to configure the project, but this time adding the final package name and bundle ID.
2.Or maintain the same users that we have in Bravo Vision.
If you want to maintain the users, simply add extra apps in the same Firebase project but with the final bundle ID and package name.
And there you have a native login! 🤓
In case you already have a published app bundle, and you change these Firebase assets, you'll need to generate a new bundle and publish an update to the stores.
​