# Anonymous Login with Firebase

With the Firebase anonymous login option, you can allow users to enter your app without authenticating or creating an account. You can choose which screens can be accessed with anonymous login, and which ones require the user to be authenticated.

This functionality is executed by assigning roles to users, supporting two roles in Firebase:

1. **Logged**: Users who have logged in using email/password, phone login or social login.
2. **Anonymous**: Users who enter the app without logging in, utilizing the anonymous login option, thereby operating without a user account.

{% hint style="info" %}
This feature needs to be set up together with any of the Firebase authentication methods (email/password, phone or social login). Therefore, you'll need to create a Firebase project and follow the steps indicated in the [Firebase authentication guide](https://docs.bravostudio.app/integrations/user-authentication/app-login-firebase).
{% endhint %}

## 🏷 The tags

The following Bravo tags are needed to set it up.

* <mark style="color:red;">`[action:login:firebase-anonymous]`</mark>. This tag is used to specify an anonymous login action on a UI element. For example, it can be applied to a link or button, enabling users to enter the app anonymously (without requiring user credentials) upon pressing it.
* <mark style="color:red;">`[require:scope:<list of roles, separated by commas>]`</mark>. This tag needs to be added at **page level**. It sets the roles a user needs to have in order to access an app page. For Firebase anonymous login, there are the following two options:
  * <mark style="color:red;">`[require:scope:anonymous,logged]`</mark> - both anonymous and authenticated users can view the page.
  * <mark style="color:red;">`[require:scope:logged]`</mark> - only authenticated users can view the page.
* <mark style="color:red;">`[scopes-error]`</mark>. Specifies a default error page displayed when a user attempts to access a restricted page without the necessary permissions. This page will be shown when an anonymous user tries to enter a page with the <mark style="color:red;">`[require:scope:logged]`</mark> tag. It's a good place to add a button to redirect the user to the login page, so anonymous users can authenticate.
* <mark style="color:red;">`[state:error-scope:<name>]`</mark>. Defines a specific state page that will show when the user try to access a private page without the right access. There should be a <mark style="color:red;">`[state:default:<name>]`</mark> page, which is the private page where only authorised users can access. Same as previous tag, but allows to create custom error pages for each private page. You need to replace <mark style="color:red;">`<name>`</mark> for any word of your choice. This will be used to link each default-error page pair.

You can duplicate our example design below to get started. It also includes email/password and phone authentication.

{% embed url="<https://www.figma.com/community/file/1119178635735720047?fuid=735161339401487360>" %}

## ⚒️ Enabling the anonymous login in Firebase

As indicated before, the anonymous login feature needs to be set up together with a Firebase login method. Therefore, you need to have a Firebase project and complete the setup required for those login methods.

To enable anonymous login, you need to add this method inside your Firebase project:

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FqC1vxurXlyPvagogCKY4%2Fimage.png?alt=media\&token=9ea960fe-e2cd-477c-8b71-14cf1f2b28c3)

After setting this up, download the corresponding Firebase assets (Google Services plist for iOS, and Google Services JSON for Android) and upload them into Bravo as indicated [here](https://docs.bravostudio.app/app-login-firebase#id-2.2-upload-the-firebase-config-files-in-bravo).&#x20;

In case you had done this in the past already, but you didn't include the anonymous login method in your Firebase projects, download the assets again and re-upload them to your Bravo project.&#x20;