How to limit features to a specific user role

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.