Post-login page (Onboarding)

Add a page that will be displayed after a user logs in or registers

Some examples of what you can do using this tag:

• Show a form to complete the user’s profile after signing up

• Show a page to ask for notification permissions

• Show a one-time welcome screen

This tag is supported for Firebase and Custom Backend email/password authentication

👉 The Tag

Displays a post-login screen after a login or register action. It will be displayed after the login or register action, and before the home screen.

This tag will allow you to show a permanent screen after a user logs in and before they navigate to the home, or create an onboarding for first-time users.

There are two different ways to add this tag:

a) Control with different tags whether we want to show the post-login page only upon user registration, or every time users log in.

b) Control from the backend when to show the post-login flow to each user. This method requires advanced backend setup, where the backend returns either a success or an error HTTP code, which controls the post-login visibility.

These two setups are detailed below.

Control visibility of the post-login with tags

This setup allows to control whether the post-login page will be displayed after a user registers (first-time login), or every time a user logs in.

To ensure this working with Authentication with Custom Backend, the Sign up page should automatically log in the user to the app. This can be achieved by using[action:register]tag in the Sign in button and using Set Access Token as form response action. Detailed instructions on how to set this up can be found here.

It's recommended for MVPs or prototypes with a limited user base, specifically those using email-based authentication. Otherwise, we recommend using the setup shown in the next section.

1. Create a post-login page design.

2. Add a container around the design.

3. Paste the tag [post-login:always] or [post-login:once] into the component name of the top-level app page, depending on the behaviour you want to implement.

4. Paste the tag [action:close] into the component name of a visual element to close the post-login screen and navigate to the home page. Make sure you've specified the start of the prototyping flow in the Home screen.

You can duplicate the example file below to get started:

Bravo Sample: Post-login PagesFigma

Control visibility of the post-login from the backend

This method offers a more robust approach and supports all the authentication methods provided by Bravo. It involves implementing a conditional logic in the backend to determine whether the post-login screen should be displayed. It could return either a success or an error code depending on the desired behaviour to show or skip the post-login flow.

1. Add the [post-login:action] tag to the screen to the screen with the [page:login] tag. This will enable the possibility to bind an API request to the login action.

1. Add the [post-login] tag to the post-login screen or to the start of the post-login flow if there are several screens connected.

1. Set up an API endpoint in your backend that returns an HTTP success code (2XX) to show the post-login screen, or an error code (4XX) to skip it (or the other way around). This implementation is backend-specific and requires integration with your chosen tool or technology.

2. Create an API request in Bravo with the post-login endpoint. This request will be triggered when a user executes the login action.

3. In the Data Binding section for the login page, you'll be able to bind an API request and On Success / On Error response actions. Select the API request that communicates with the endpoint you created in the previous step. Then, choose whether you want to skip or show the post-login flow if the request returns a success code On Success, and choose the other option for the On Error.

5. That's it! You can now test your post-login flow.