How to limit features to a specific user role
In this Bubble tutorial we explain how you can limit access to features in your app based on Current User's Role.
Unlock user roles: Learn how to limit app features based on user type!
Master Bubble security: Discover how to protect pages and workflows from unauthorized access.
Elevate your Bubble app: Create a powerful user role system using option sets and custom fields.
Limiting Access to App Features
In this Bubble tutorial video, I'm going to show you how you can limit access to certain parts of your app and workflows and buttons, UI elements, that sort of thing. How you can limit access to different users and we're going to be using an option set to create a user role to do that. But before I launch into it, if you're learning Bubble then you can find hundreds of Bubble tutorial videos on our website planetnocode.com. You can't find them all in our YouTube channel but you can find them all at planetnocode.com.
Setting Up a Simple Demo Page
I've got a very simple page here just to demonstrate some techniques. One with two buttons on it and I've got a button for if a user or admin clicks it, it runs a workflow and it shows a toast notification and I've got a button which I only want admins to be able to run. But I'm going to take a slight tangent here which is that currently I am logged out of my app so I actually don't want any logged out users to be able to access this page.
Protecting Pages from Logged Out Users
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 because it could be key to your app that you protect certain UI elements from logged out users. Of course database data should properly be protected and the only best the only way you should do that is by using privacy rules. Again we've got loads of videos on those go and check them out. But how do I ensure that a logged out user can't access this page? Well I'm on the page and I say user is logged out and then go to page and I just say index. So now if I go back to my demo app and I refresh, I'm taken to my index page. That's perfect for redirecting users to registration or login.
Creating User Roles with Option Sets
Right so now I'm going to run as a logged in user and you'll notice that I'm not redirected anymore because current user is logged in. So we're going to use option sets to set up a role and have that as a field on user. Option sets are perfect for this. If you want to learn more about option sets go and check out our other videos because in this video I'm just going to be showing how to create an option set. So we will create a new option set called role and it's going to have two options either a user or an admin. And then I'm going to add that as a field to user. So create new field and that's going to be role and then I'm going to reference my recently created option set.
Setting Default User Roles
And I want to set a default here because it's going to really over complicate things if users can register and their role field is empty and so by setting a default here whether they will always be user unless when I register them I declare them as admin. Now there's one other important change here which is on my privacy rules I need to make sure that current user can access their role field. There we go. Easy to forget there and I also need to by setting a default that is for new users created going forward but it won't have updated the field here so this is blank I need to set it as user. Let's refresh the page.
Implementing Role-Based Access Control
So I am oh and let's just declare in here current user role display. Okay so there you go I'm just using this label to help me debug as I go through it but I'm now logged in and I'm now running as user. So what if I want to hide the admin button? Well one way of doing that would be to go in on conditional statements and to say when current user is, current users role is admin then I make this element visible. Now of course if I'm making the element conditionally visible I actually want it to collapse when his and not be visible on page load. Let's have a look at the demo. You should see the admin button has now gone.
Alternative Approach: Making Buttons Unclickable
Now another approach to this instead of hiding the admin button would be to make it unclickable. So let me bring it back in by default and I'll say that when current user role is not admin then this element isn't clickable. Okay now I've got a nice opacity at 30% set here because in my button style I have a condition. This button isn't clickable it changes it to 30% and I can preview that like that. That's a nice visual cue to the users to say that it isn't clickable.
Enhancing Security with Workflow Conditions
Now technically I'll go back here. Technically this is just a bit of code attached to the button to say that the user can't click on it and if you were to open up the HTML page, if you were to use the browser developer tools there's the potential to get round it. So if you want it to be really conscientious with your security you would also add in a statement on the workflow because then the workflow cannot be run. Obviously that's harmless in this instance because it's just showing a notification but if it's an important thing like creating data or making big changes to your database you will want to add in an only when statement here. So current user role is admin. Let's preview that again.
Final Testing and Conclusion
Okay so it's not changed anything but it's now that little bit extra secure. Now user I've got users redirecting when they visit the page. So actually user is fine as it is. If I wanted to add in more security I could basically do the opposite of what I've done for admin. I mean I think at the very least let's just demonstrate another approach here which is I would just say current user is logged in. Okay that's that's the condition added in. So I'm now going to test it if I change my role to admin. I think it's already taken effect but now I can click the admin one and I can click the user one. So that's it that's how you can get into your app the ability to limit different parts of it and different features depending on who the user is. If you've got any questions on this please leave a comment below we read every single one and if you're still watching this video a like and subscribe really helps us out on YouTube.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.