feat(frontend): scaffold login and My Games pages with auth#1
Open
feat(frontend): scaffold login and My Games pages with auth#1
Conversation
![capy-ai[bot]](https://avatars.githubusercontent.com/in/1915919?s=60&v=4){kind=small}
…in boosteroid_auth, fix favicon and focus styles - Add Vite proxy for /api -> cloud.boosteroid.com so login avoids cross-origin 403 - Default API base URL to empty (relative paths) in dev; absolute only for deploys - Store user_data from login response as boosteroid_auth instead of placeholder 'true' - Make response parsing envelope-resilient (handles data wrapper or flat shape) - Handle 403/140306 error responses in login error extraction - Replace broken &:focus inline styles with CSS module (LoginPage.module.css) - Replace /vite.svg favicon with /favicon.svg (branded OS gradient icon) - Pass user_data through token refresh interceptor - Update README with proxy documentation and .env.example Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
The official client sends four fields in POST /api/v1/auth/login:
email, password, remember_me, cf-turnstile-response
Our code only sent {email, password}, causing error 140306
('Something wrong with your data') on correct credentials. The server
validates credentials first (wrong creds → 142299), then checks the
Turnstile token (missing token → 140306).
Changes:
- Add react-turnstile dependency for Cloudflare Turnstile widget
- Add Turnstile captcha widget to LoginPage with dark theme
- Add 'Remember me' checkbox matching the official form
- Include cf-turnstile-response and remember_me in login payload
- Lowercase email before sending (matching official client)
- Update password minimum length from 4 to 8 (matching official)
- Make Turnstile site key configurable via VITE_TURNSTILE_SITE_KEY
- Add cookieDomainRewrite to Vite proxy for server-set cookies
- Reset Turnstile widget after failed login attempts
- Disable submit button until Turnstile verification completes
- Update README and .env.example with Turnstile configuration
For local development, set VITE_TURNSTILE_SITE_KEY=1x00000000000000000000AA
in .env to use the Cloudflare always-pass test key.
Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR scaffolds the first usable OpenStroid frontend from scratch, delivering a production-quality login experience and authenticated game library. The app uses Mantine for polished dark UI, implements robust auth with token refresh, and wires to the Boosteroid API endpoints.
Authentication
src/api/config.ts) with configurable origin (defaults tohttps://cloud.boosteroid.com)src/api/client.ts) with automatic token refresh, request queuing, and rawAuthorizationheaderaccess_token,refresh_token,boosteroid_auth)src/auth/login-adapter.ts) for easy field-name adjustmentsgetCurrentUser()validation; stale tokens are clearedPages
src/pages/LoginPage.tsx): premium gradient branding, client-side validation, 422 error handling with dismissible alert, disabled/loading states, network error messagingsrc/pages/LibraryPage.tsx): cards with 3:4 aspect ratio covers, skeleton loading grid, empty state, error recovery with retry, responsive gridsrc/components/RequireAuth.tsx): redirects unauthenticated to/login, shows loading spinner during bootstrapArchitecture
src/auth/AuthContext.tsx) managesuser,isAuthenticated,isLoading,isBootstrappingsrc/layouts/AuthenticatedLayout.tsx) with frosted-glass header and branded logosrc/components/AppHeader.tsx) with user menu, avatar, and logout actionsrc/theme/theme.ts) with brand/accent colors, Inter font, tuned radiisrc/types/index.ts) forAuthTokens,LoginCredentials,User,InstalledGame,ApiError