Spotify OAuth flow broken when app is embedded in an iframe (e.g. Home Assistant dashboard)

[Badbeef1]

Problem

When the app is embedded as an iframe (e.g. in a Home Assistant Webpage card), clicking Connect Spotify fails because:

1. CreateSessionForm.tsx does window.location.href = .../auth/spotify — this redirects the iframe itself to Spotify's login page.
2. Spotify enforces frame-ancestors 'self' *.spotify.com *.spotify.net via CSP, so their login page is blocked from loading inside any third-party iframe.

Framing 'https://accounts.spotify.com/' violates the following Content Security Policy directive:
"frame-ancestors 'self' http://*.spotify.net http://*.spotify.com https://*.spotify.net https://*.spotify.com".
The request has been blocked.

Workaround (current)

Create the session from a phone/direct browser tab, then use the HA dashboard iframe to monitor and manage the queue.

Proposed fix

Detect when the app is running inside an iframe and open the OAuth flow in a new tab instead of redirecting the iframe itself:

// apps/web/src/components/CreateSessionForm.tsx
- window.location.href = `${SERVER_URL}/auth/spotify?${params}`
+ const inIframe = window !== window.top
+ if (inIframe) {
+   window.open(`${SERVER_URL}/auth/spotify?${params}`, '_blank')
+ } else {
+   window.location.href = `${SERVER_URL}/auth/spotify?${params}`
+ }

UX flow with the fix

1. User clicks Connect Spotify in the iframe → new tab opens with the Spotify OAuth flow
2. User authorizes in the new tab → server redirects to /session/:id
3. The HA iframe picks up the new session automatically within ~10 seconds (home page already polls session.list every 10s)
4. User closes the extra tab — session is now visible and manageable from the dashboard

Why this works

• Spotify auth runs in a real top-level tab, bypassing their iframe CSP restriction
• No changes needed to the server or OAuth callback logic
• Preserves the existing redirect behavior when the app is accessed directly (not in an iframe)