📲
App login email & password with Firebase

App login: email & password

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.
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. Follow the steps below to learn how to add the tags to your UI.
Figma Sample
Bravo Sample: Login with email & password
Figma
Adobe XD Sample Coming soon!
Make sure to place the starting frame (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. There can only be one login page in the app.
  1. 1.
    [page:login]: The tag that we add to the page that we want to use as the login page.
  2. 2.
    [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.
  3. 3.
    [component:input-password]: Indicates which field will be used as a password input. Needs to be at least 6 characters.
  4. 4.
    [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].

Signup page (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. 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. 2.
    [component:input-password]: Indicates which field will be used as a password.
  3. 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 (optional)

You can add a container or a page that will send an email to your users to reset their password.
  1. 1.
    [component:input-email]: Indicates which field to be used to enter the email from the user to send the reset password instructions.
  2. 2.
    [action:reset-password:firebase]: Action of the button to send the reset instructions.

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. 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 Firebase to store your users.
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. 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.
7. Next, enable the type of Authentication we want to use in our Firebase (Bravo currently support Email/Password).
Enable the first toggle. The email link (passwordless sign-in) is currently not supported. Click Save.
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).

3. Set up in Bravo Studio

1. Once you have these 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.
If you only have a login page, make sure you first create a user in Firebase so that you have an account to test with.
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 Bravo variables will be created: user.id and user.email. These variables can be sent as part of an API request, to store user-specific data in the database.

Bravo Vision:

4. Activate user account mgmt emails

There are two emails you can have for the login process:
1. Reset password email This email is sent if you added a reset password page (or container) in your app. When users enter their email and click the UI element with the email trigger, they will receive this email.
2. Email verification When a user signs up using an email address and password, you can send them a confirmation email to verify their registered email address. To activate this email, check this option in the Login settings in Bravo Studio.
You can edit the format and content for both in Firebase. Go to Authentication > Templates.

5. Configuring iOS and Android for 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)
In terms of the users base, we have two choices:
  1. 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. 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! 🤓
Last modified 2mo ago