Limiting Features for Logged-in Users
How can you limit features in your Bubble app to just logged-in users? This question is thanks to a comment in one of our previous videos. We read every single one of them, so please like and subscribe, leave a comment if you've got any questions and if you are looking for more Bubble tutorial videos then look no further than our website planetnocode.com where we've got hundreds of Bubble tutorial videos from beginning all the way through to advance. Let's dive into this question though about how we can limit what a logged out user or even a logged in user can do and I'm going to show you a number of different methods and talk you through each of them.
Setting Up a Simple Page with Toast Notifications
So I've got a very simple page here and all I've done is set up a toast notification, check out an earlier video for those, but basically I click this button and I get a notification it runs a workflow and I click this button and it runs a different workflow. So how can I set up so that I don't get the logged out user button if I am logged in and I don't get the logged in user button if I'm logged out?
Checking User Login Status
Well let's get rid of the logged in user button if I'm logged out and to check that I am just going to update this text field here to say logged in and then current user is logged in and that should return. Okay because I just want to make sure in this demo am I logged in or logged out? Well that's not what why something that worked. I don't think I fully cleared it. Okay let me do it differently I'm gonna get rid of my label here. I do like to keep these things in these videos makes it a bit more a bit more rough but it shows how I would go about doing it. So I'll say logged in because that's the yes statement and I'll say logged out. Let's try that. Okay so I am logged out so if I'm logged out I don't want to see the logged in button.
Hiding Elements Based on User Status
So there's a couple of things I can do with this one is I can disable the button. No I don't want to see it. So one is I can hide the button so I could do something like it is a visible page load collapsed when hidden and then it is only visible when current user is logged in this element is visible. So now if I go back to my my demo it's disappeared.
Making Elements Unclickable
So there's nothing else I could do that instead of hiding it I could instead making sure that I now make sure it is visible on page load. I can say current users logged out. This element is not clickable and so now if I go back here. Okay now this is because I have a style I'm using it I'm using a default style by Bubble but I have a condition here which is if the bus isn't clickable it reduces the opacity to 30 so it gives me that nice grayed out look and also notice I'm not sure this shows up on the screen recording but I'm getting my normal pointer mouse rather than my I can click on this element kind of hand with a that sort of thing.
Security Considerations
Now this isn't completely secure and let me just talk about number of reasons why. First of all if I hide the element like I did before you shouldn't be putting like static data that you need to protect and just relying on not rendering it on the page that's not very secure. Of course if it's dynamic data brought from your database you should be using privacy rules to protect the data taken from your database and displayed on the page and you could use that in combination with is the user logged out hide this element that way you've got both levels of protection.
Securing Workflows
The other thing worth pointing out is that it's basically just a bit in the HTML that's saying this element isn't clickable so I could right click on it and I could edit it in the browser developer tools and make sure that it's clickable so it's to be really strict with it I would also recommend that on our workflow we also say only run when current user is logged in so that way the workflow is actually protected as well as disabling the button now maybe that's a bit overkill if you think so leave a comment below but I think that that is technically covering both bases you make the button unclickable in the design tab and you make the workflow unrunnable using an only when statement.