# Post-login page (Onboarding)

{% hint style="info" %}
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
  {% endhint %}

{% hint style="warning" %}
This tag is **supported for Firebase and Custom Backend** email/password authentication
{% endhint %}

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

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.&#x20;

**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** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

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.&#x20;

{% hint style="danger" %}
To ensure this working with [Authentication with Custom Backend](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend), the Sign up page should automatically log in the user to the app. This can be achieved by using<mark style="color:red;">`[action:register]`</mark>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](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend#signup-screen).
{% endhint %}

{% hint style="info" %}
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](#example-files).
{% endhint %}

1. Create a post-login page design.

![](/files/R3gRN8mYSGfbxDsaKquY)

2\. Add a container around the design.

![](/files/2FX8OjAgBr0SA6hs0Bjc)

3\. **Paste** the tag <mark style="color:red;">`[post-login:always]`</mark> or <mark style="color:red;">`[post-login:once]`</mark> into the component name of the **top-level app page**, depending on the behaviour you want to implement.

![](/files/s3c9zrDnBv4NScmldYd7)

4\. **Paste** the tag <mark style="color:red;">`[action:close]`</mark> 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](/get-started/your-bravo-app-projects.md) in the Home screen.

![](/files/IuvirFHxahMT1KyrRmsH)

You can duplicate the example file below to get started:

{% embed url="<https://www.figma.com/community/file/1101496157843308166>" %}

## Control visibility of the post-login from the backend <a href="#example-files" id="example-files"></a>

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 <mark style="color:red;">`[post-login:action]`</mark> tag to the screen to the screen with the <mark style="color:red;">`[page:login]`</mark> tag. This will enable the possibility to bind an API request to the login action.

![](/files/liRhOZwDCoxW506Gpsac)

2. &#x20;Add the <mark style="color:red;">`[post-login]`</mark> tag to the post-login screen or to the start of the post-login flow if there are several screens connected.

![](/files/IMmFKMoF449N4MTESD8e)

3. 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.&#x20;
4. Create an API request in Bravo with the post-login endpoint. **This request will be triggered when a user executes the login action.**
5. In the Data Binding section for the login page, you'll be able to bind an API request and <mark style="color:red;">`On Success`</mark> <mark style="color:red;"></mark><mark style="color:red;">/</mark> <mark style="color:red;"></mark><mark style="color:red;">`On Error`</mark> 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 <mark style="color:green;">`On Success`</mark>, and choose the other option for the <mark style="color:red;">`On Error`</mark>.

![](/files/hmBu9hUPbQc1j2UX9ZpE)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/intro-and-onboarding/post-login-page-onboarding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.