Ask a question
In this Bubble tutorial video, I'm going to show you how you can limit access to certain parts of your app. This includes workflows, buttons, UI elements, and that sort of thing. You can limit access to different users, and we're going to be using an option set to create a user role to achieve this.
I've got a button that, if a user or admin clicks it, runs a workflow and shows a toast notification. I've also got another button which I only want admins to be able to run.
Redirect logged out users
But I'm going to take a slight tangent here, as I am currently logged out of my app. I actually don't want any logged out users to be able to access this page. So, how do I do that? Well, we've got a more detailed video on that, and it is very important that you get this bit right. It could be key to your app to protect certain UI elements from logged out users. Of course, database data should properly be protected and the only best way to do that is by using privacy rules. We've got loads of videos on those, so go and check them out!
So, how do I ensure a logged out user can't access this page? I am on the page, I set the condition "user is logged out" and then go to "No go to Page," and I'll just direct it to my index page. If I go back to my demo app and refresh, I am taken to my index page. This is perfect for redirecting users to registration or login.
Right, so now I'm going to run as a logged-in user.
Creating a Role Option Set
I am no longer redirected because the current user is logged in. We're going to use option sets to create a role and assign it as a field on each user. Option sets are perfect for this. If you want to learn more about option sets, go and check out our other videos. In this video, I'm only going to show how to create an option set.
We will create a new option set called "role", and it will have two options: "user" or "admin". I will add that as a field to the user's profile. I will create a new field called "role" and assign my recently created option set to it.
I also wish to set a default here because things could get complicated if users are allowed to register and their role field is empty. So, by setting default here, everyone will be considered a "user" unless declared as "admin" during registration. One other important change here is that I need to make sure the current user can access their role field – easy to forget this. And I also need to update the role for existing users, as setting a default only affects new users.
Let me refresh the page. Now, I'm logged in and running as a "user". What if I want to hide the admin button? One way of doing that would be to use conditional statements; when the current user's role is "admin", then this element would be visible.
I've made a few more changes, but these are the core details. Hopefully, you've got a good sense of how you can limit different parts of your application and different features depending on who the user is. If you have any questions, please leave a comment below. We read every single one, and if you're still watching this video, a like and subscribe on YouTube would really help us out.