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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f66a8df-c2e8-451c-ab71-ef5529d7f910/firebase-final1.gif

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

https://www.youtube.com/watch?v=lUfmXFRiEX4&feature=youtu.be

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

Figma - Bravo Sample: Login with email & password | Made for Bravo Studio. Add an email & password login page to your Bravo app with this sample ...

👉 Adobe XD Sample

💾 Login (email & password)

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).

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4b609a64-9aee-470c-a6f1-50892fa349ea/Screenshot_2021-02-11_at_12.41.23.png