Today we’re going to show you how to use a conditional rendering option in WeWeb and then, based on the user’s authentication status, show or hide content in your Weweb app.
Let’s say that you have a business information app, providing detailed information about different companies to your app users. You want to intrigue your web app visitors by showing them just a small portion of your app, just so they can understand the added value of your app.
But as soon as they want to access a detail page of one company with all the detailed information, you want to hide that info and prompt them to log in.
This can be done with an option in your Weweb project called “Conditional Rendering”. So, let us show you how to do it!
Watch our Youtube tutorial
Hide elements for Non-authenticated users
In order for this feature to work, we have to set up user authentication. We used the Supabase Magic link option. If you are interested in understanding how you can set up Magic link authentication with Supabase, we have a tutorial for that as well, so make sure to check it out.
Once we are ready with that, we have to set up the screens and containers we want to conditionally display based on the user’s authentication status. In our case, we have two pages - the first one is a simple list page, which will be visible to all users and then a detail page, which is conditionally shown to logged-in users only.
Select the element we want to hide for non-authenticated users. On the right menu, navigate to the middle tab and scroll down to find the Conditional Rendering option. Let’s turn it on.
Now we have to bind it. Click on the binding icon, and the formula editor will open. Select the “isAuthenticated” variable under Supabase auth setup variables. This is a boolean variable, so when the user is authenticated, it will have the value “true”, and the element will be visible to the user. When a user is not authenticated, it will have a value of “false”, and the chosen element will be hidden from the user.
The value is set to “false” which means that you are currently not an authenticated user, so the element isn’t visible to you.
Show elements for non-authenticated user
We will do the same thing with the elements we want to show non-authenticated users, but we want the opposite effect.
Select an element, go to the right menu's middle tab, and scroll down to find conditional rendering. Again, we will click on the binding icon and choose the same variable as before.
In this case, however, we will add a “!” exclamation mark in front of the variable. This will apply the opposite statement/value, and the element will be shown to non-authenticated users.
Add the Widget to the Layout
The next step will allow us to add the newly created Widget to one of the pages within our FlutterFlow app.
First, select the page where you would like to insert the custom Bar chart, and in the Widget tree create a child element “Column” to your selected page. Repeat the process for the newly created Column element, only this time insert your Custom Bar chart.
Test it!
Now that we have finished all the necessary steps, we can test the full flow out!
This is how you can allow non-authenticated users to access your app and show them additional content only once they go through the authentication process.
Make sure to subscribe to our Youtube channel for more WeWeb tutorials 🧡!
