✉️Email and password Login with Firebase
Set up a user authentication system using Email and Password with Firebase
Last updated
Set up a user authentication system using Email and Password with Firebase
Last updated
This guide covers how to set up a login page with the email and password using Firebase as the user management service.
Follow along below or watch this tutorial
Here's a sample design file that already contains all the necessary tags for the login feature. It contains the tags for email and phone login. They can also be combined with Firebase's 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.
[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.
[component:input-password]: Indicates which field will be used as a password input. Needs to be at least 6 characters.
[action:login:firebase-email-password]: Action of the button that does the login action with the filled information in the previous fields.
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.
[component:input-email]: Indicates which field will be used as the username login, needs to be a valid email, as is required by Firebase.
[component:input-password]: Indicates which field will be used as a password.
[action:register:firebase-email-password]: Action of the button that does the register action with the filled information in the previous fields.
You can add a container or a page that will send an email to your users to reset their password.
[component:input-email]: Indicates which field to be used to enter the email from the user to send the reset password instructions.
[action:reset-password:firebase]: Action of the button to send the reset instructions.
To allow your users to log out (once they have logged in), add this action Tag to a UI element.
[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 manage user authentication in your existing Firebase project.
If you haven't created your Firebase project yet, follow the steps provided here.
After the project is created, click on Build > 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.
Go to Sign-in method tab and enable the type of Authentication we want to use in our Firebase.
For email login, enable the first toggle Email/Password. The email link (passwordless sign-in) is currently not supported.
Note that Bravo does not currently support Firebase email verification.
To confirm, click Save.
Enable Firebase Email/Password & Social login from the app's Integrations tab and Login section.
Complete the Firebase Configuration process to enable Firebase Integrations and manage user email and password authentication.
Once completed, your app's login is ready to test! 🎉 Open Bravo Vision or your Published app to test out the login pages.
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.
In terms of the users base, we have two choices:
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.
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.
