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.

Limiting access

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. 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 it 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?

Hiding the element

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? Oh that's not worked, why has that not worked? I don't think I've fully cleared it. Okay let me do it differently, I'm going to get rid of my label here. I do like to keep these things in these videos, makes it 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. 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, collapse 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 demo it's disappeared. So there's something else I could do with that, instead of hiding it I could instead make sure that I now make sure it is visible on page load.

Make the button unclickable

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 a default style via Bubble, but I have a condition here which is if the button isn't clickable it reduces the opacity to 30 so it gives me that nice greyed 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. Now this isn't completely secure and let me just talk about a 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 hides this element. That way you've got both levels of protection. 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.

Combine unclickable with Workflow Only When condition

So it would be really strict with it. I would also recommend that on our workflow we also say only run when current user is run1. 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.