.png?alt=media&token=e8a8b2ac-a978-4a53-91dc-0cb82165ea72)
📲
User login with Firebase
Set up a user authentication system using 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 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.
- Google & Apple social login: users log in with their existing Google/Apple accounts.
Apple login is only supported on iOS devices.
On May 15, 2023, Firebase will introduce new pricing for phone login. Pricing will vary by region, and will be metered for each SMS sent.
Also, there's an option to allow users to log in anonymously, and restrict their access to certain app pages. You can see how to set this up in the link below.
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
Here are two sample design file that already contain all the necessary tags for the login feature. The first file contains the tags for email and phone login, while the second one contains the tags for social logins (Google and Apple). However, they can also be combined in the same file in case you want to provide all the options.
Bravo Sample: Login with Firebase
Figma
Sample design for email and phone login
Bravo Sample: Firebase Google & Apple login
Figma
Sample design for social login
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).
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.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].
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. - 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.
Use the tags below to set up Google and Apple login
[action:login:firebase-google]: Performs the Google login action, needs to be added in the Google login button.[action:login:firebase-apple]: Performs the Google login action, needs to be added in the Apple login button. Note that Apple login will only work on iOS devices.[ignore:android]: As Apple login is not supported on Android devices, it is recommended to hide the Apple login button there, to provide a good user experience. This tag will hide the UI element attached to it on Android devices.
Social logins will only work on the final apps (test or released), not in Bravo Vision.
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.
For phone and social logins, there's no signup page - the login action will also create new accounts for first-time users.
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.
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.
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.
To allow users to delete their accounts, add the following tag to a UI element in your app:
[action:logout-delete]. When users press this element, their account will be deleted. The user will be logged out as well.Once you have the UI ready, it's time to configure a Firebase project to manage user authentication.
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.
Finally, for social login, activate the Google and/or Apple sign-in providers. There are some additional steps you'll need to follow, you can read them in this section.
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).17. In case you want to set up phone login 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-256 code.
In order to obtain this code, go to the History section after your bundle is generated, and copy the SHA-256 code.
Once this is done, go back to your Firebase project. In the project settings, paste this 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.
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
Integrations.
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.
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.
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)
In case you're using social login (Google and Apple), there are some additional points to consider.
Make sure to check the social login option in Bravo. To activate the social login, go to Integrations > Login > Enable Firebase > Activate Social Login.
Android
To enable Google login on Android final apps (remember Apple login is not supported), you'll need to obtain two SHA-1 codes paste them in your Firebase project.
The first SHA-1 code you need is the one for debug APKs. To obtain this code, request a debug APK. Then, go to the bundle history section inside your Bravo project and copy it from there:
Also, you'll need a SHA-1 code for the published app version. This can only be obtained in Google Play. In order to obtain this code, you need to submit your app to publication first, and have it approved by Google Play.
Once you do that, copy the SHA-1 code in the section indicated below.
Now, go to the corresponding Firebase app inside your project, and paste both SHA-1 codes here:
Once the SHA-1 codes have been copied in the Firebase project, the app will be allowed to log in via Google.
iOS
On iOS, you'll need to set up Apple login in your developer console. Follow the steps indicated in the tutorial below to do so.
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-256 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.
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.
Last modified 10d ago