How to limit user to login to just one or two devices at a time?

Hi,
I have designed a platform that is subscription based, and I want to limit users to just one device. It means that if the user has bought a basic plan then he could only log in to one device at a time, if he is login it to his laptop then he should not be able to log in to any other device.

Similarly, for the premium plan, users can just log in to two devices at a time.

How can I achieve that in a bubble? Does bubble have any plugin for that?

There are plugins that allow you to store things in a user’s browser’s storage or to manipulate cookies. I wonder if you could generate a random string and store that in your user’s profile as their “access token” and also store it in their browser’s storage (in a somewhat encrypted fashion; it’s not bullet proof). Only devices that have this token could be allowed to log in. When trying to access on another device, prompt to log them out of all other devices, generate a new string, save it to their profile, and store it in their browser.

Thanks for your response, can u recommend any plugin or name any plugin for that??

It’s my pleasure! I’m sure there are other ways to accomplish what you asked for but it’s similar to what I do in my app: I built a point-of-sale (POS) system with Bubble and I use browser storage for the POS computer to “remember” which store location in a chain of stores the register is at even if they close the browser or reboot the computer.

I felt that the “Browser Session or Local Storage” by Zeroqode was easy to work with, although there are several plugins with similar functionality so please research what fits your needs. You have the choice of session storage, cookie storage, or browser storage - it’s nice to have the flexibility to use whichever one is most appropriate to your needs. In your case, since you’re “registering” a device to kind of lock it in, then I think using the local browser storage to “remember” its registration across sessions (even if they reboot their device) would make the most sense (but I’m no expert on the matter so if anyone else has a better recommendation then I’m all ears).

Interesting use-case :clap:
Will write a short tutorial for you later today :wink:

1 Like

Interesting use-case :clap:
Here’s a solution among many others, using our plugin Fingerprint

https://plugbee.dev/plugin/fingerprint


Preview

ezgif-2-8e408a5a77


Try it by yourself

LINK DEMO LINK EDITOR


1. Detect the current user’s device fingerprint

Start by detecting the current user’s device fingerprint ID when the page is loaded.
Depending on your use case and where the regulation should apply, you may have to introduce it on every page of your app, to do so we use a reusable element that we will add on these pages or in the header.

Creating the reusable element:

image


2. Set the device that loads the page as the current device

Inside the reusable element, we save the user’s device fingerprint ID when it’s ready as the Device ID - Current

If the previously saved and authorized device is not the current device and depending on how many simultaneous devices you want to authorize, we then move the old device(s) to a Device IDs - Closed sessions

:information_source:
The Device ID - Current field helps us to differentiate the current device from the authorized device

:information_source:
The Device IDs - Closed sessions will help to determine which device is “the new one” later on when the user connects from a new device. Otherwise it will trigger the security on page load, even from a new device.

:information_source:
The if statement avoids unnecessary operations on the database and avoids kicking the user out by adding it to the Device IDs - Closed sessions list


3. Kick the other devices if added to the Closed sessions list

If the current device suddenly appears to be in the Device IDs - Closed sessions list, this means the user connected from another device and triggered the workflow from the step above.

Therefore, we want to block access to the user, and then remove ourselves from the list.

:exclamation:
Keep in mind that a popup can easily be removed using the inspect element tool from the browsers. Therefore, it shouldn’t be the only security layer for sensitive apps.
A more secure option would be to make the entire page/groups invisible.


4. Restore access

To give the user access to the app again, you only need to refresh the page so the other devices will be kicked out from the step 2 workflow.

Advanced: In step 2 we also want to remove the current device from the Closed session list to avoid showing the alert if the user didn’t click the reset button (example)


Hope that helps! :upside_down_face:
Victor

1 Like

There is a Bubble Native Worflow solution
Look for:

#Log out other user’s sessions

This action lets you log out all sessions of the current user, except the one where the user triggers this action. This is a useful action for security, when you want to make sure no other devices have a logged-in session. If you need to log out the user from the current session as well, you can use a Log the user out action after this action.

Note: This action will not automatically refresh the pages of the logged out sessions. Expired sessions will only redirect back to the login page after a user takes some sort of action.

2 Likes