Full-stack Bun + React app with a YouTube OAuth flow and minimal APIs.
- Bun 1.2+
- A Google Cloud project with OAuth consent screen configured
- Go to Google Cloud Console → APIs & Services → Credentials → Create Credentials → OAuth client ID
- Choose Web application
- Authorized redirect URI:
http://localhost:3000/api/oauth/google/callback(or your host) - Copy Client ID and Client Secret
- Enable YouTube Data API v3 in APIs & Services → Library
Bun loads .env automatically. Create a .env file in the repo root with:
GOOGLE_OAUTH_CLIENT_ID=your_client_id
GOOGLE_OAUTH_CLIENT_SECRET=your_client_secret
# Optional: override when not using localhost:3000
# GOOGLE_OAUTH_REDIRECT_URI=http://localhost:3000/api/oauth/google/callback
# Where to store the token JSON (optional)
# YT_TOKEN_PATH=.yt-oauth-token.json
bun install
bun devApp will be at http://localhost:3000
- Open the app in your browser
- Click "Connect YouTube" → complete Google consent
- Back on the app, click "Get Stream Key" to fetch (and create if needed) a reusable stream key
Previously, livestream status and stream key were proxied through server routes under /api/livestream/*. These proxy endpoints have been removed. The client now calls the YouTube Data API directly using the authenticated access token via React Query hooks:
useLivestreamStreamKey– retrieves the current stream key (cdn.ingestionInfo.streamName)useLivestreamStatus– polls the livestream status and normalizes it (e.g.active→streaming)
See src/hooks/useLivestream.tsx for implementation. This mirrors the existing useBroadcast pattern and reduces server surface area.