Phaser JWT example

[VedranT]

Hello,

I am pretty new to Phaser and web in general (coming from desktop dev background) and I am making my first HTML5 game using Phaser. I already have Auth REST service, but I am not sure how to implement JWT authentication on front end of my game/app. Google didn't provide any useful results. Could someone point me to some tutorial or example?

Thanks.

[Nesh108]

Hey @VedranT, this seems to be what you are looking for: https://stackoverflow.com/questions/36751304/jwt-token-strategy-for-frontend-and-backend

[VedranT]

@Nesh108 Thanks mate. This isn't quite what I was looking for, but it helped me to google right things.

[mattstyles]

Auth isn't something that Phaser handles and I haven't heard of a plugin that would help (one might exist though?). You'd be best off on Stack Overflow for this sort of problem rather than here.

JWT is just a standardised way of returning an authenticated token, it contains data which you could unpack on the client but really shouldn't. Once you've generated a JWT (by passing auth credentials from your client) the best way is to use that token as is in subsequent requests to your services, its up to the services to understand the claims contained by the JWT and respond appropriately.

If you want it as an auth gateway to your application then you'd just need some code that displays your login screen (this could be a separate url or part of a single-page app) and proceeds to the rest of your app once a token is generated. Ideally your api would be locked down behind a generated token but it all depends how deep you want to go, you could keep your api open and the client would only call it after generating a token and proceeding to the rest of your app/game, this isn't very secure as any hits on the api would return data but if you return no sensitive data (i.e. nothing associated with an account and certainly no private data that lives against an account or otherwise) then you might say that is fine.

Again, some sources say you should never store the token locally (outside of memory, i.e. local or session storage), others say its fine and some popular libraries (such as well-used Angular libraries) store this as a convenience to the user. It's up to you to decide if this is secure enough for you and your users and should probably tie in with your token revocation and token renewal processes.

[VedranT]

@mattstyles Thanks, that was very comprehensive answer. I already worked with JWT with my desktop app and I am familiar with it. The part I was missing is how to structure SPA regarding login page and game(s), but you're right - it has nothing to do with Phaser. My biggest problem is that I am very experienced with desktop and backend development so any learning curve with fronted is not smooth enough for me  .

My idea now is to create SPA with React which would handle authentication and "host" games built with Phaser. Do you think that's good structure?

[mattstyles]

Yeah, I think thats great, could possibly be overkill depending on what you want to do with authentication but I've done something fairly similar before, where React handles the 'top-level' flow in the app/game, and then when you get to the 'main' section you just render the canvas, set up Phaser/pixi/create/whatever and it hands over to the 'game' framework to handle updating the canvas. React takes over again when you hit a 'win/lose' condition. I had no issue using a game framework 'inside' or React (other than wishing it had the same functional-style update loop!).

I've also done this with UI a couple of times, in my case I just used Pixi rather than all of Phaser but the 'game' bit had its own update loop and updated the canvas element whilst the UI overlay was all React. I've heard of a couple of examples of people here using Angular to handle that UI layer in a similar fashion.

[VedranT]

@mattstyles I want to have single login page, but then multiple games on same page. You login once and then play games as you wish. Every game would communicate with backed on it's own (points and logic to prevent cheating). 

We already have platform with users and their wallets implemented. We are payment provider and other companies provide content using  our users wallets via our platform. Now as our users number is rising every day we want to also provide services/games for our users. Only problem is my lack of experience on front-end side