Welcome back! In our last lesson, you successfully built the front door to your application: the sign-up and login workflows. This was a huge step, laying the groundwork for all the user-specific features you plan to build for your multi-tool platform.
Today, we'll complete the authentication cycle by implementing the "back door"—the logout function. A secure and clear logout process is just as important as a smooth login. It gives users control over their accounts and is essential for managing who has access to what on your platform. We will also touch on how Bubble manages user sessions, which will give you a better understanding of what happens behind the scenes when a user logs in and out.
Part 1: The "Log the user out" Action
Just like signing up and logging in, logging a user out in Bubble is handled by a single, powerful workflow action. The logic is straightforward: when a user clicks a "Logout" button, we need a workflow that tells Bubble to end their current session.
The action is found in the same place as its counterparts: under the Account category in the action menu.
A forum discussion on the Bubble website provides a quick, clear confirmation of this process. It's a good example of how to find answers within the Bubble community.
How to make log out in the app? - Need help - Bubble Forum
This Bubble forum post quickly demonstrates the core steps for creating a logout function.
Read the short exchange, paying attention to the accepted answer. Notice how it combines two actions: the logout action and a navigation step. This is a standard pattern you'll use frequently.
As the forum post highlights, logging the user out is usually not the only step. What should the user see after they've been logged out? Leaving them on a page that might contain user-specific information would be confusing. Therefore, the standard practice is to immediately follow the Log the user out action with a Navigation > Go to page... action, redirecting them to a public page like your homepage or a dedicated login page.
Your two-step logout workflow will look like this:
- Step 1:
Account > Log the user out - Step 2:
Navigation > Go to page...(e.g., Destination:index)
Part 2: Understanding User Sessions
Implementing the logout action is a good opportunity to briefly discuss what a "session" is. When a user logs in, Bubble creates a session by placing a secure cookie in their browser. This cookie is how your app remembers the user as they navigate from page to page. The Log the user out action essentially just tells Bubble to invalidate that cookie, ending the session.
But how long does a session last if the user doesn't log out? The Bubble documentation provides a clear answer.
This section from the official Bubble documentation answers common questions about user accounts, including session duration.
Navigate to the "User account FAQ" section. Read the answers to two key questions: session duration and logging out other sessions.
As you've just read, the duration of a user's session depends on the settings you chose in the Log the user in action from our last lesson.
- If "Keep the user logged in" is unchecked, the session expires after 24 hours.
- If "Keep the user logged in" is checked, the session lasts for 12 months.
This is a crucial detail for designing your user experience. For a platform with sensitive data, you might want shorter sessions. For a utility platform like yours, longer sessions offer more convenience for returning users. For now, the default behavior is perfectly fine.
Part 3: A Dynamic Button for Authentication
Now for the practical part. Where do we put the logout workflow? You could have three separate buttons in your header: "Sign Up," "Log In," and "Log Out." A more elegant and common solution is to have a single button that changes its text and function depending on the user's status.
- If the user is logged out, the button says "Sign Up / Log In" and opens your authentication popup.
- If the user is logged in, the same button says "Log Out" and triggers the logout workflow.
This requires using Conditionals, a concept we'll explore more deeply in the next lesson. A conditional changes an element's properties (like its text) when a certain condition is met. The condition we care about is Current user is logged in.
The following video provides an excellent walkthrough of setting up exactly this dynamic button and its corresponding workflows.
How to do user authentication with Bubble.io | Bubble.io Tutorial for Beginners 2022
This video by James NoCode demonstrates how to use conditionals to create a dynamic button for both logging in and logging out.
First, watch the section where the presenter adds a conditional to the button. This is the key to changing the button's appearance based on the user's login status. Creating the conditional button Next, see how this conditional logic is translated into workflows. The presenter creates two separate workflow events for the same button, one that runs only when the user is logged in, and one that runs when they are not. Building the conditional workflows
This technique is fundamental to building responsive user interfaces in Bubble. It allows you to create a clean and intuitive experience without cluttering your page with redundant elements.
Your Task: Implement the Logout Flow (20 minutes)
It's time to integrate this into your app. Your task is to modify your header to include a complete and dynamic authentication control.
- If you currently have separate "Sign Up" and "Login" buttons in your header, consolidate them into a single button. You can label it "Sign Up / Log In".
- Configure this button's workflow to show your main sign-up/login popup when clicked. (This part should already be familiar from the last lesson).
- Go to the Conditional tab for this button in the Property Editor.
- Add a new conditional:
When Current user is logged in. - Set the property to change to
Text, and enter "Log Out" as the value. - Navigate to the Workflow tab. Create a new workflow event that triggers when your button is clicked, but add a condition to it:
Only when Current user is logged in. - In this new workflow, add the two actions we discussed:
Account > Log the user outNavigation > Go to page...and set the destination to yourindex(homepage).
Test it out! Sign up or log in with a test user. The button text should change to "Log Out." Click it, and you should be logged out and returned to your homepage.
Conclusion
Well done. You have now fully implemented the core user authentication cycle: sign-up, login, and logout. This is a non-negotiable feature for any modern web application and a cornerstone of your multi-tool platform.
Let's summarize the key takeaways:
- The
Log the user outaction is the simple, one-click way to end a user's session. - A complete logout workflow should also redirect the user to a non-private page.
- Bubble manages user sessions with cookies, and their duration can be configured during the login process.
- Using conditionals allows you to create dynamic UI elements, like a button that serves for both login and logout, providing a cleaner user experience.
This last point is especially important. You've just had your first taste of using the user's logged-in status to control your app's behavior. In the next lesson, we will expand on this powerful concept to show and hide different elements, which will be the key to building user-specific dashboards and personalized features.