Storing client-side state from JavaScript

Question

I've written a game in JavaScript which runs completely client-side. In the game, the player solves puzzles to progress to the next game level. I store the current game level in a cookie, so that they can reload the page and continue from the last level they achieved.

Unfortunately, the user can edit the cookie and thus go directly to any game level. I want to prevent that. What are my options?

Answer 1

Encrypt the cookie with JSON Web Token (JWT). First sign the cookie with a Secret key and store it to the user's browser and in the game decrypt it with your same secret key and get the values. If the user edits the cookie then it will not match your secret key and if secret doesn't match then you can make him play again from the level 1 again as a punishment.

Answer 2

They can just edit your JS code and bypass whatever checks you add in there. This is how I'd do it, provided each level has only 1 solution.

First of all, save each level in json format. Next, calculate hashsum of each level, when it's in the solved state. Finally, encode each next level with a hashsum of a previous one. And store the hashsum in cookie.

This is how it would work:

1. User solves lvl1
2. The app converts lvl1 to json and calculates it's hashsum
3. The app uses it to decrypt lvl2

In case someone changes lvl number, decoding will still fail. And you would be able to determine the "correct" level by trying to decode all of them 1 by 1.