User subscription system | app security

[tgmoron]

Hi community!

I’m trying to make a webapp that offers a subscription - based login system. Basically i want users to log in and then show a dashbord but with different functionalities based on their subscription level (i have a subscription field on each user that can be “free” or “pro”).
So i want pro users to have access to every section in the page and disable some of them to free users.
I found 2 workarounds, but i’m pretty sure that they aren’t good practices:

1. Hide section based on a conditional ('if current user isnt pro => hide/disable) but the thing with this solution is that the elements stay in the DOM and can be shown again changing it’s display attribute.
2. Creating a page for each section (dashboard-free || dashboard-pro) and redirecting users after login & add a “redirect to page: X” to each in case of an user enter to the incorrect page (ie: A free user enters on mywebsite.com/dashboard-pro => ‘on page load check user subscription’ => Redirect to /db-free). The thing with this is that the user is redirected on page load, and i think that the log of the page visited is stored, so maybe someone with some network knowledge can stop the redirect after the page is loaded (and access every section).

Are these redirects being made locally? is there any correct way to redirect the different users server-side and making sure that a free user can’t acces to premium features?

Thank you all!

[cmarchan]

Several ways to do this. In any of them, a combination of functionality must work together.

Some thoughts:

• Build conditionality on page load to only enable users that fit a condition to access the page
• Build privacy rules in your database
• Show/hide content on the page/s upon conditionality that you build

Below a few reference videos on the above:

A great video on privacy rules by the good folks from Airdev @kevin12 > Bubble Privacy Rules Walkthrough

An interesting video on data encryption by Evan Little @evanlitttle > How To Encrypt & Secure Sensitive Data in Bubble.io

A video with interesting tips from @TipLister Bubble: Admin & Privacy Tools & Conditions

Hope the above helps!

[tgmoron]

Hello cmarchan!

I want to do something similar of what’s being done on the last video. I want to hide/disable UI elements to certain users depending on their subscription level. But using conditionals to hide UI elements doesn’t work completely, i still can see them on the network log (so it’s not 100% secure).
Here are some screenshots:

1. I add a conditional to an element: If user is not pro => hide element
   

   

2. Preview login-in as a free user => it doesn’t appear on screen but in the dom i can see the element with display:none
   

   

3. Checking network calls: Item is there, and i can read the info (“this is hidden”)
   

   

Do this happen because i’m on development or in production users can still access this information?

Thanks!

[cmarchan]

It will happen in both dev and pdtn.

The elements will be there but once you set privacy rules correctly the data will not be sent to the front end.