Home > Net >  How can I Ensure a User can only Vote Once on my ReactJS App Without any User Authentication?
How can I Ensure a User can only Vote Once on my ReactJS App Without any User Authentication?

Time:12-23

I am creating a web app for a DJ where users can open up the site by QR code and request songs. Another section displays the current lineup, with up and downvoting capabilities. I current have it set so when the player votes, they can only upvote or downvote while on the page, and this is reflected in my database. I am using firebase as my database.

The issue is when the user refreshes the page, if the request is still there, they can vote again in any way as the previous is not stored through sessions based on device ID, or maybe IP address.

My ideas to go about this is:

  1. Track user IP address using Axios as I found online, save the IP-Address as the key along with their vote as the value in my database. If they don't leave the area before the request is played, there shouldn't be an issue. Issues if the users IP address changes:
  • Can't track the vote anymore and they can vote again.
  • Aother user who may be assigned that previous IP address now has a vote they didn't assign.
  1. Use local storage to hold a value for the vote based on the request ID, if they have the website open and the request is removed I could run code to clear the local storage of this information in the onUpdate handler I have on for the database reference. Not sure if this is great either because I'm not sure how well this works on mobile as that will be the target audience.

Is there a proper way that other websites go about this tack without user authentication?

CodePudding user response:

The common approach I'd take for that is to sign the user in with anonymous authentication, which gives them a unique UID that persists when they reload the page without requiring them to enter any credentials. So if you then associate the vote with that UID, each user can only vote once.

CodePudding user response:

There isn't any effective solution for this. Storing something in localhost or cookies will not work as that can be deleted by user to vote again.

As Frank answered, Anonymous authentication might be the way to go its much easier to clear auth state in webs than in native application. As I commented earlier, even if you decide to use a authentication service, users may still create multiple accounts unless you have a list of guests beforehand and restrict voting to those accounts similar to what universities do for online tests.
IP based filters may not work in your use case as there may be many users in the same network.

The best you can do is to make it harder for the end user to figure out the factor that you use to distinguish the users (using multiple factors like IP, browser, some fingerprint, etc). You can also use a managed service like Fingerprint (has an open source version) for that.

This still however doesn't restrict users from using multiple devices now however it might help reduce number of duplicate votes. Now that you have multiple other factors in place, you can also restrict votes to the location of event (or even better, the local network at that place) only so users cannot simply share the link somewhere else for some bots to cast votes.

  • Related