How to password protect a page?

Hi guys,

This is probably a fairly simple thing to do, but I want to make sure I do it correctly without sacrificing security. I have pages with content that I want to unlock only for people who have the password.

Note - My users don’t create an account, so that’s why I go this route.

Thank you for your help!

To make it simple, what you can do is to create a giant white shape above the entire page.
After que page is loaded (do it thru workflow), display a pop up asking for a password.
If the password is correct, you hide the pop up and the giant white shape.

Of, for a more complex alternative, you can hide every element in the page and make them visible only when the password is correct.

3 Likes

This guy knows the score…

Thanks for the solution! I in another post that this could lead to a potential issue where you can read the password. Obviously, I don’t want that to happen.

Am I too concerned about this, huh?

1 Like

Hummm… I don’t know how you will able to read the password… :thinking:

But, if you want something deeper than this, you can create a database called “MyPassword”. With only one data: your password.

So, when someone writes the password, you can perform a “Search for” in your database MyPassword to compare the stored value with the written value.

Make sense?

Unless you retrieve data from the dB once a correct password is entered, users will still be able to see the data if they read the page source?

Sure.

So to solve this, you would need to send them to a page created just for submitting the password and when correct, direct them to the actual content?

The way Bubble works you cannot lock a person out of a page completely. On page load allows some of the page to load before triggering so even then static data is not safe.

That is why you should cover it with a white shape first, so none object will be seen.

You can do as I said.
Performing a “Search for” in your database do compare the values…

I understand. How can I solve it then? Because each page varies a ton, I don’t see how I could use dynamic data, without unnecessary setup (all the pages are already built).

@rpetribu I also think this should work - also if you apply display: none, it shouldn’t show in the code itself.

Will do.

Your solution is to set a password query against dB as suggested. If correct set a state and if this state is x then read the sensitive data out of the dB into the page. Unfortunately no shortcuts I’m aware of. Ie. Every text you do not want unauthenticated users to see must move to dB.

I would love for bubble to have a ‘before page load’ condition. It would solve a lot of security issues.

2 Likes

I’m not sure what level of security you’re looking for. If you just want most users to not be able to see something, and aren’t that concerned if someone with skills breaks through, then approaches where you hide things on a page are OK. Even though something on a page is “hidden”, my understanding is that Bubble still loads it, so someone with technical skills could see it.

However, if you need to protect data, then you need to do so in the privacy rules. Protecting Data - Bubble Docs This stops Bubble from sending the data to the page (and also from users searching your database without permission). Since you have only 1 password – I think you’ll need to set up a single “user” that has a login and password, and everyone uses that.

Another option is applying a password to the app in the Settings tab. This will apply to the entire website however.

1 Like

I second that advice. Ideally one would use the Privacy Data Tab to protect the data going to the pages long before any page is viewed. “It’s not about the page, it’s about the data rendered on the page”

@dehacked79 that would be helpful for sure. I’ll try out the stuff and see.

@ed727 would the approach change when I have multiple passwords (each unique to the page)? It’s for a paid product, so security is needed.

@aaronsheldon it’s kinda wild, that bubble created it this way considering many no-coders probably have no idea about the security part.

Not sure what you mean… Do you mean that each page has its own password? Or that each page has multiple passwords, any of which would work?

Each page has its own password.

Bubble’s data privacy is set up at the user level. So, you tell Bubble… if a user isn’t logged in, then this is what they can/can’t see. If they are logged in, they this is what they can/can’t see. And so on. That only applies to protecting data that gets called from the database. Anything on the page (elements, text, option sets) – hidden or not – can technically be accessed and can’t be secured.

You could fiddle around with setting up a bunch of generic users, one for each page, and when your clients log into a page they are going in under that generic user that has access to the page’s data. Your setup sounds unconventional however. There may be a better way. If you post some info on what your app does and why you have this setup, someone may have an answer.