# Keep your Three.js game moving. Add a way to sign in.

Add optional Attract Mode sign-in beside a Three.js canvas using a DOM account panel and a reviewed server-side OpenID Connect integration.

## How do I add Attract Mode sign-in to a Three.js game?

Keep your renderer, scene and game loop. The kit’s Three.js wiring example mounts an account panel into a DOM element outside the canvas. It reads the game’s same-origin /api/me route and uses native POST forms for login and logout. Your backend handles the account flow.

This is account-interface wiring, not a Three.js game engine plugin. The example does not add a renderer, change your scene, award XP or save game progress. Guest play can continue while the player is signed out.

## Connect the panel to your existing page

Run the kit locally first. Then read docs/threejs.md and import mountThreeAccountUI from integrations/threejs.mjs into your game’s frontend. Pass a real DOM element as element, positioned beside or over your existing canvas using your own layout.

Keep the account controls reachable without covering movement controls or blocking the canvas. Use normal HTML focus order and visible labels. Test the panel at your smallest supported viewport and with the keyboard before shipping it.

Keep the accountUI object returned by the mounting helper and call accountUI.dispose() when the surrounding page or game UI is removed. The controller guards against responses arriving after disposal. Do not mount another panel every animation frame.

## Keep the account exchange on your backend

Serve /api/me and the /auth/login, /auth/callback and /auth/logout routes from the game’s origin through a backend-for-frontend. The browser receives session status; provider tokens, client secrets and the PKCE verifier stay on the server.

Real account integration requires an approved OAuth client and exact registered callbacks. Third-party consent remains part of the flow. Use the account guide and kit go-live checklist before replacing the offline simulation with real credentials.

## What the example tests establish

The kit tests the account controller’s DOM behavior and the sample backend’s HTTP authentication flow. Those checks do not prove that your Three.js scene, input controls, deployment or registered client work together.

In your actual game, check guest play, sign-in cancellation, returning from the callback, expired sessions, sign-out and removal of the panel. Check touch controls on mobile and restore an appropriate game screen after the full-page sign-in redirect.

- [Three.js wiring guide](https://github.com/AttractMode-io/browser-game-kit/blob/main/docs/threejs.md)
- [Three.js account-panel helper](https://github.com/AttractMode-io/browser-game-kit/blob/main/integrations/threejs.mjs)

## Resources

- [Agent setup guide](https://github.com/AttractMode-io/browser-game-kit/blob/main/agents/README.md)
- [Local MCP guide](https://github.com/AttractMode-io/browser-game-kit/blob/main/mcp/README.md)
- [Integration skill](https://github.com/AttractMode-io/browser-game-kit/tree/main/skills/attract-mode-integration)
- [Developer workspace](https://attractmode.io/developers)
- [Source code](https://github.com/AttractMode-io/browser-game-kit)
- [Download the starter kit (.zip)](https://github.com/AttractMode-io/browser-game-kit/releases/latest/download/attract-mode-browser-game-kit.zip)
- [Developer docs](https://attractmode.io/docs)