👻Anonymous Login with Firebase

Let app users enter some app sections without creating an account

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.

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.

🏷 The tags

The following Bravo tags are needed to set it up.

• [action:login:firebase-anonymous]. 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.

• [require:scope:<list of roles, separated by commas>]. 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:

  • [require:scope:anonymous,logged] - both anonymous and authenticated users can view the page.

  • [require:scope:logged] - only authenticated users can view the page.

• [scopes-error]. 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 [require:scope:logged] tag. It's a good place to add a button to redirect the user to the login page, so anonymous users can authenticate.

• [state:error-scope:<name>]. 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 [state:default:<name>] 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 <name> 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.

Bravo Sample: Login with FirebaseFigma

⚒️ 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:

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.

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.