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 only supported for Firebase email/password authentication
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. This method is only supported for Firebase email/password authentication.
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.
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. This setup is only supported for Firebase email/password authentication.
We only recommend using this method in case you're building an MVP or prototype with a limited amount of users, with email-based authentication (the only method supported). 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 behavior 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:
This option allows to control the visibility of the post-login flow in your backend. It's a more robust method and is supported together with all the authentication methods Bravo offers. It requires implementing a conditional logic in the backend, that returns either a success or an error code depending on the desired behavior (show or skip the post-login flow).
- 1.Add the [post-login:action] tag to the screen with the login form. This will enable the possibility to bind an API request to the login action.
2. 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.
3. Create an API endpoint in your backend that returns an HTTP success code (2XX) if the post-login screen needs to be shown, and an error code (4XX) if it needs to be skipped (it can also be the other way around). You'll need to implement this in your backend, so the specific setup will depend on the tool or technology you use. Then, create an API request from Bravo that communicates with this endpoint. This request will be triggered when a user executes the login action.
4. 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. Here, 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.
Last modified 7mo ago