Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 25

Conditional Rendering for User Authentication

Recommended resources

Hello! In our last lesson, you built a complete authentication cycle, including a dynamic button that cleverly changes from "Sign Up / Log In" to "Log Out" depending on the user's status. That was your first practical dive into using Bubble's conditionals.

Today, we're going to take that concept much further. Instead of just changing the text on a button, you'll learn how to show or hide entire sections of your application based on whether a user is logged in. This is the cornerstone of building personalized experiences and is essential for your goal of offering special perks to registered users on your multi-tool platform. By the end of this lesson, you will be able to create distinct views for guests and members, making your app feel more dynamic and professional.

The Foundation of Conditional Visibility

In Bubble, controlling an element's visibility isn't typically done with workflows that say "when this is clicked, hide that." Instead, it's a declarative process. You set rules directly on an element, telling it when it should be visible. Bubble then takes care of showing or hiding it automatically as conditions change.

This is managed in two places in the Property Editor:

  1. The Layout Tab: Here you find the "This element is visible on page load" checkbox. This sets the default state. You uncheck this for elements that should start hidden, like a welcome message for a logged-in user.
  2. The Conditional Tab: This is where you define the rules that override the default state. For example, "When Current User is logged in, this element is visible."

A crucial companion to visibility is the "Collapse when hidden" setting, also in the Layout tab. When an element is hidden, this option ensures the space it occupied is removed, preventing awkward gaps in your design.

The following article from RapidDev gives a concise overview of this system.

How to use conditional visibility in Bubble | RapidDev

This guide clearly explains the core mechanics of conditional visibility in Bubble.

Read the sections titled How to use conditional visibility and How Conditional Visibility Works. Pay close attention to the roles of the Layout and Conditional tabs. Then, review the Tips That Avoid Common Mistakes to understand some common pitfalls.

Building Your Conditions

Now that you understand the basic mechanics, let's look at how to construct the conditions themselves. A condition is a logical statement that Bubble evaluates in real-time. If the statement is true, the property change you specified (like making an element visible) is applied.

This screenshot shows a practical example in the 'Conditional' tab. Two rules are set for a "Login / Sign up" button: one to make it visible when the user *isn't* logged in, and another to make it not visible and not clickable when the user *is* logged in.

The condition we are most interested in today is Current User is logged in or its opposite, Current User isn't logged in. This simple expression is the key to unlocking user-specific content.

Let's walk through a detailed practical example of how to implement this.

Conditional visibility: A beginner guide to dynamic elements in ...

This guide provides a perfect, step-by-step walkthrough for creating separate views for logged-in and logged-out users.

Find the section Example 2: User States. Follow the author's process for setting up two groups: "Group Logged Out" and "Group Logged In Welcome". The key takeaway is how one group is hidden and the other is shown using the exact same condition: When Current User is logged in.

Your Task: Create a Dynamic Header (25 minutes)

It's time to apply this to your own application. You're going to enhance the header you've been working on. Right now, you likely have a single button that changes its text. We're going to create two distinct versions of your header navigation.

Objective:

  • Logged-out users should see "Sign Up" and "Log In" options.
  • Logged-in users should see a "Welcome, [User's Email]" message and a "Log Out" button.

Steps:

  1. Group Your Elements:

    • Go to your header. Create a Group and place your "Sign Up" and "Log In" buttons/links inside it. Name this group something descriptive, like Group - Nav Logged Out.
    • Create a second Group. Inside this one, add a Text element and a Button.
      • Configure the Text element to display: Welcome, and then add dynamic data: Current User's email.
      • Configure the Button element with the text "Log Out".
    • Name this second group Group - Nav Logged In.

  2. Set Default Visibility:

    • Select Group - Nav Logged Out. In its Layout tab, make sure "This element is visible on page load" is checked. Also check "Collapse when hidden".
    • Select Group - Nav Logged In. In its Layout tab, uncheck "This element is visible on page load". This is crucial. Also check "Collapse when hidden".

  3. Add the Conditionals:

    • Select Group - Nav Logged Out. Go to the Conditional tab.

    • Define a new condition: When Current User is logged in.

    • Select the property to change: This element is visible.

    • Uncheck the box (set the value to "no"). Your rule should be: "When the user is logged in, this group is NOT visible."

    • Select Group - Nav Logged In. Go to the Conditional tab.

    • Define the same condition: When Current User is logged in.

    • Select the property to change: This element is visible.

    • Check the box (set the value to "yes"). Your rule is: "When the user is logged in, this group IS visible."

  4. Configure the Logout Workflow:

    • Select the "Log Out" button inside Group - Nav Logged In.
    • Go to the Workflow tab and add a workflow for this button. It should perform the Account > Log the user out action, followed by a Navigation > Go to page... action to send them back to your homepage.

Now, preview your application. When you are logged out, you should see the Sign Up/Log In group. After you log in, that group should disappear and be replaced by the Welcome message and Logout button.

A Glimpse Ahead: Current User vs. Current Page User

You've mastered using Current User to control visibility. This refers to the person who is currently logged into your app and viewing the page. But Bubble provides another important piece of context: Current Page User.

This distinction becomes critical when you start building features like user profiles. Imagine you are logged in (you are the Current User) and you are viewing someone else's profile page (they are the Current Page User). You would want an "Edit Profile" button to be visible only when you are viewing your own profile—that is, when the Current User is the Current Page User.

This concept might seem a bit abstract now, but it's a powerful tool for building the user dashboard and other personalized features you have planned. The following video explains this difference perfectly.

The Difference Between ‘Current User’ & ‘Current Page User’ In Bubble.io

This "Building With Bubble" video provides an exceptionally clear explanation of the difference between Current User and Current Page User.

First, watch the introduction where the presenter uses a profile page example to explain the core difference: the core concept. Next, skip to the practical application. See how a conditional is used to show an "Edit Profile" button only when the Current Page User is the same as the Current User: restricting features. Finally, watch the short demo to see this logic in action: the live preview.

You don't need to implement this just yet, but keep this concept in mind. It will become invaluable as we build out more complex user-specific functionality.

Conclusion

Excellent work today. You've moved beyond simple property changes and can now control the entire structure of a page based on a user's authentication status. This is a fundamental skill in no-code development and a massive step toward building a truly dynamic web application.

Let's recap the key takeaways:

  • Element visibility is controlled declaratively via the Conditional tab.
  • Always set a default visibility in the Layout tab and use conditionals to create exceptions.
  • The "Collapse when hidden" option is essential for maintaining a clean and responsive layout.
  • The condition Current User is logged in is your primary tool for creating different experiences for guests versus registered users.
  • Understanding the difference between Current User and Current Page User unlocks more advanced, context-aware features.

In our next lesson, we will put this new skill to immediate use. We'll begin building the "favorites" system for your platform by adding a "favorite tool" button that is, you guessed it, only visible to logged-in users.