diff --git a/.env.example b/.env.example index 3979783..898f524 100644 --- a/.env.example +++ b/.env.example @@ -4,6 +4,14 @@ PG_PASS= AUTHENTIK_SECRET_KEY= +# ============================================================================== +# HOST CONFIGURATION +# Set this to your machine's IP or domain for mobile/network access +# Examples: localhost, 192.168.1.100, kaboot.example.com +# ============================================================================== +KABOOT_HOST=localhost +KABOOT_FRONTEND_PORT=5173 + # ============================================================================== # OPTIONAL - Authentik Database # ============================================================================== @@ -29,17 +37,6 @@ AUTHENTIK_ERROR_REPORTING=false AUTHENTIK_BOOTSTRAP_PASSWORD= AUTHENTIK_BOOTSTRAP_TOKEN= -# ============================================================================== -# OPTIONAL - OIDC (Override if using custom domain) -# ============================================================================== -OIDC_ISSUER=http://localhost:9000/application/o/kaboot/ -OIDC_JWKS_URI=http://localhost:9000/application/o/kaboot/jwks/ - -# ============================================================================== -# OPTIONAL - CORS (Frontend origin for backend API) -# ============================================================================== -CORS_ORIGIN=http://localhost:5173 - # ============================================================================== # OPTIONAL - Logging # ============================================================================== diff --git a/README.md b/README.md index 80fa546..28d215a 100644 --- a/README.md +++ b/README.md @@ -83,16 +83,35 @@ If you want to run the frontend in development mode with hot-reloading: ``` The frontend will be available at `http://localhost:5173`. +### Mobile/Network Access + +To access the dev server from other devices (phones, tablets): + +1. **Run setup script** - it auto-detects your IP: + ```bash + ./scripts/setup.sh + ``` + +2. **Update Authentik redirect URIs** to include your IP (e.g., `http://192.168.1.100:5173/callback`) + +3. **Start dev server with host binding**: + ```bash + npm run dev -- --host + ``` + +4. **Access from mobile** via `http://:5173` + ## Configuration Kaboot uses environment variables for configuration. Refer to `.env.example` for a complete list. | Variable | Description | Default | |----------|-------------|---------| +| `KABOOT_HOST` | Host IP/domain for network access | `localhost` | +| `KABOOT_FRONTEND_PORT` | Port for the frontend dev server | `5173` | | `KABOOT_BACKEND_PORT` | Port for the Express backend | `3001` | | `AUTHENTIK_PORT_HTTP` | Port for Authentik web interface | `9000` | | `GEMINI_API_KEY` | Your Google Gemini API key | (Required) | -| `CORS_ORIGIN` | Allowed origin for API requests | `http://localhost:5173` | | `PG_PASS` | PostgreSQL password for Authentik | (Generated) | | `AUTHENTIK_SECRET_KEY` | Secret key for Authentik | (Generated) | diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx index f76a3b9..6af93a8 100644 --- a/components/AuthButton.tsx +++ b/components/AuthButton.tsx @@ -14,9 +14,10 @@ export const AuthButton: React.FC = () => { } if (auth.error) { + console.error('Auth error:', auth.error); return ( -
- Auth Error +
+ Auth Error: {auth.error.message}
); } diff --git a/docker-compose.yml b/docker-compose.yml index 1936206..bdad4f3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -108,10 +108,10 @@ services: NODE_ENV: production PORT: 3001 DATABASE_PATH: /data/kaboot.db - OIDC_ISSUER: http://localhost:9000/application/o/kaboot/ - OIDC_JWKS_URI: http://localhost:9000/application/o/kaboot/jwks/ + OIDC_ISSUER: http://${KABOOT_HOST:-localhost}:${AUTHENTIK_PORT_HTTP:-9000}/application/o/kaboot/ + OIDC_JWKS_URI: http://${KABOOT_HOST:-localhost}:${AUTHENTIK_PORT_HTTP:-9000}/application/o/kaboot/jwks/ OIDC_INTERNAL_JWKS_URI: http://authentik-server:9000/application/o/kaboot/jwks/ - CORS_ORIGIN: ${CORS_ORIGIN:-http://localhost:5173} + CORS_ORIGIN: http://localhost:${KABOOT_FRONTEND_PORT:-5173},http://${KABOOT_HOST:-localhost}:${KABOOT_FRONTEND_PORT:-5173} volumes: - ./data:/data ports: diff --git a/docs/AUTHENTIK_SETUP.md b/docs/AUTHENTIK_SETUP.md index 9884bb1..94f4c34 100644 --- a/docs/AUTHENTIK_SETUP.md +++ b/docs/AUTHENTIK_SETUP.md @@ -363,24 +363,33 @@ Create a service account that can obtain tokens programmatically for automated t ## Environment Variables -Ensure your `.env` file has the correct OIDC configuration: +### Development (localhost only) + +For local development on a single machine: ```bash -OIDC_ISSUER=http://localhost:9000/application/o/kaboot/ -OIDC_JWKS_URI=http://localhost:9000/application/o/kaboot/jwks/ +KABOOT_HOST=localhost ``` -For the frontend OIDC config (`src/config/oidc.ts`): +### Development (network/mobile access) -```typescript -export const oidcConfig = { - authority: 'http://localhost:9000/application/o/kaboot/', - client_id: 'kaboot-spa', - redirect_uri: `${window.location.origin}/callback`, - // ... rest of config -}; +To access from other devices (phones, tablets), set `KABOOT_HOST` to your machine's IP: + +```bash +KABOOT_HOST=192.168.1.100 ``` +The setup script (`./scripts/setup.sh`) auto-detects your IP and configures: +- `.env` - Backend CORS and docker-compose variables +- `.env.local` - Frontend Vite environment variables + +**Important**: You must also update redirect URIs in Authentik to include: +- `http://:5173/callback` +- `http://:5173/silent-renew.html` +- `http://:5173` + +Then run the dev server with `npm run dev -- --host` to bind to all interfaces. + ## Troubleshooting ### "Invalid redirect URI" error @@ -401,12 +410,4 @@ export const oidcConfig = { ## Production Notes -For production deployment: - -1. Use HTTPS everywhere -2. Update all URLs from `localhost` to your domain -3. Update redirect URIs in Authentik -4. Update frontend OIDC config with production URLs -5. Update `.env` with production OIDC endpoints -6. Consider enabling Authentik error reporting -7. Configure email settings in Authentik for password recovery +For production deployment, see [PRODUCTION.md](./PRODUCTION.md) for full instructions. diff --git a/features.md b/features.md index 81c7b2c..7322441 100644 --- a/features.md +++ b/features.md @@ -1,2 +1,4 @@ - [ ] Moderation (kick player, lock game, filter names) - [ ] Persistent game urls while game is active + +- Make UI for scoreboard mobile friendly. The badges for the points and extra points are getting cut off and the colored meters are invisible because the width of the board is so small on mobile diff --git a/index.css b/index.css new file mode 100644 index 0000000..e8b64b7 --- /dev/null +++ b/index.css @@ -0,0 +1,16 @@ +html, body, #root { + height: 100%; + min-height: 100dvh; +} + +.h-screen { + height: 100dvh; +} + +.min-h-screen { + min-height: 100dvh; +} + +.max-h-screen { + max-height: 100dvh; +} diff --git a/index.html b/index.html index eba06a2..46b0b5c 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Kaboot