Attract Mode / Developers
Keep your Phaser scene in play. Add account controls.
Connect optional Attract Mode sign-in to a Phaser game with a DOM account panel, scene cleanup and a reviewed backend account flow.
How do I add Attract Mode sign-in to a Phaser game?
The kit’s Phaser wiring example attaches a DOM account panel beside your canvas. It uses your game’s same-origin account routes and ties panel cleanup to the scene lifecycle. Your Phaser scenes, physics and input remain yours to manage.
This helper does not create a Phaser game or run authentication inside a scene. The frontend reads session status and starts same-origin POST forms. The backend performs the OpenID Connect exchange.
Attach the panel once per scene
Read docs/phaser.md in the kit. Import attachPhaserAccountUI from integrations/phaser.mjs and pass your scene plus an options object containing the DOM element for the panel. Mount it from your scene setup, not from update.
The helper disposes the account panel when the scene emits shutdown, including a normal scene stop or restart. Call the returned accountUI.dispose() explicitly when tearing down the application. If the panel lives across scenes, give it a matching application lifecycle instead of attaching it to every scene.
Keep HTML controls above the canvas only where players can reach them without stealing the game’s touch targets. Test scene restarts, keyboard focus, browser resizing and orientation changes in your actual build.
Connect the server before real sign-in
Your backend must provide /api/me and the /auth/login, /auth/callback and /auth/logout routes on the same origin as the game. Keep provider credentials and tokens off the frontend. A static Phaser build needs a backend-for-frontend for these routes.
Run the offline simulation first. Reviewed client registration, exact callbacks, third-party consent and production storage are required for real accounts. Account identity does not include a shared score, achievement, purchase or save API.
Check your scene and session together
The kit’s DOM and HTTP tests cover the account wiring and sample account flow. They are not a full Phaser runtime test or a registered integration review.
Check signed-out play, declined consent, successful return, session expiry and local logout. Restart the scene or dispose the panel while a session request is pending, and confirm that only the current panel is updated. Decide how the game returns after a full-page redirect without assuming local progress has been uploaded.