How Do I Lock a Page to only be Available to a Logged In User?

Hello,

I am trying to simply have all the pages on my site be only available to the End User when they are Logged In.

Once they Authenticate their Username / Password and or Sign Up they will be redirected to a Dashboard.

I only want this Dashboard accessible to a Logged in User.

When User would be logged out the page URL will be blocked.

Please Advise.

Thank You,

Gabriel

1 Like

Firstly, make sure everything on the page is hidden by default, and use a condition to only show it to logged in Users.

Secondly, add a Go To Page action on page load (only when current user is logged out) to redirect Users who aren’t logged in away from the page.

And, obviously, don’t display any links/buttons for the dashboard to logged out users.

And also, of course, you should also use appropriate privacy rules to protect any data from being seen by Users who aren’t logged in,

4 Likes

Hello,

Pardon my ignorance as I am relatively new to bubble.

Is there a way to hide all elements at the page level ? I am not seeing it available.

I envisioned this being easy as clicking a setting to make the page a server side page only accessible to “Current User Logged In”

Is there not an easier way then setting up conditions on entire element tree / groups ?

Please let me know.

Thanks,

Gabriel

The easiest thing for this is to pull all your elements on the page into one group. That way you can hide/show the content from one group.

That’s a nice idea, but not possible in Bubble at the moment. You’ll need to do as @adamhholmes mentioned

I am shocked that you can’t easily secure a server side page at the “Page Level” for the End User visibility and that this is not a baked in feature to Bubble as it would seem somewhat fundamental to application security.

It feels somewhat hacky but what do I know because I am just a newbie here.

I am sure it is insanely complex to automate.

I will give your guys suggestion a try shortly… I appreciate the help !

Thanks,

Jibby

2 Likes

Assuming all your elements are inside a main container element, then just make that container element not visible unless the User is logged in.

If your elements aren’t inside a main container, then (aside from learning a good lessons about how to go about building pages - especially ones you know you don’t want to be publicly visible), then you’ll have to do it for each top-level container (at least those you don’t want people to see when not logged in).

1 Like

@adamhholmes @Jibbystyle Redirecting logged out users on page load to a public page is a fairly common practice.

A word of caution about “hiding groups”, when you hide a group you are basically sending the group to the browser and telling the browser not to render it. That’s not the same as not sending the data to the browser when the user is logged out. a knowledgable user can easily hit “inspect” and see all the hidden data.

Hiding/showing groups is meant of usability not for security. This is probably why you won’t see this function in the page level. It is not a very user friendly practice to show a blank page. instead you may want to display an “empty state” telling the user they are not logged- in and they will automatically be redirected to the home page.

Data protection is done through privacy rules in the tables, here you need to make sure that your data is not set as public, and that only logged in users can view & query the data itself.

Don’t have it be visible at first. Literally your answer is in your own explication of your issue. Also you’re incorrect about show/hide in the Bubble context. I’m not going to explain why as you can easily confirm that.

Instead of hiding elements couldn’t you just use Page Load (only when current user is not logged in) > go to page “home”

Technically yes, but you would display the page for a brief moment until redirection, which would happen only once all the elemnts are loaded. You would do this in combination with having the elements is a group that is invisible by default.

This sounds like a more secure and best practice option.

When I create the custom state. Do I do it on the page itself or the group of all the elements ?

It doesn’t seem like I can setup a Workflow on the page itself but I can create a custom state for the page.

Sorry I am trying to work on the sequence.

Also when you say “empty state” do you mean keep the default value blank ?

Thanks for your help.

Gabe

Empty State is a graphic or text you show on the page so not to leave it blank. It can be the whole page… or just a portion for it… for example if you have a repeating group that doesn’t have any data

For example, this is from gmail… they didn’t just leave the component empty They let the user know why there is no data.

Hello,

Thanks again. I got this to work.

It was easy as creating a new “On Page Load” Workflow event → navigate to my home page if current user is logged out

Hopefully this will help save somebody time as this took me a few days to fiddle with but it works quick and clean.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.