diff --git a/src/routes/services/spotify/+page.svelte b/src/routes/services/spotify/+page.svelte index 89b0855..6a9e09c 100644 --- a/src/routes/services/spotify/+page.svelte +++ b/src/routes/services/spotify/+page.svelte @@ -18,6 +18,7 @@ // OAuth state let isWaitingForCallback = $state(false); + let oauthUnlisten: (() => void) | null = $state(null); onMount(async () => { await loadSpotifyAuth(); @@ -50,13 +51,84 @@ // Save credentials await saveClientCredentials(clientIdInput.trim(), clientSecretInput.trim()); - // Set up OAuth callback listener first - onUrl((callbackUrl) => { + // Clean up any existing OAuth listener + if (oauthUnlisten) { + oauthUnlisten(); + } + + // Set up OAuth callback listener and store unlisten function + oauthUnlisten = await onUrl((callbackUrl) => { handleOAuthCallback(callbackUrl); }); - // Start OAuth server on fixed port - const port = await start({ ports: [OAUTH_PORT] }); + // Start OAuth server on fixed port with custom styled response + const port = await start({ + ports: [OAUTH_PORT], + response: ` + + + + + Spotify Authorization Complete + + + +
+
+ Spotify Authorization +
+
+

Authorization Complete

+

You have successfully authorized Shark with your Spotify account.

+

You can close this window and return to the app.

+
+
+ + + ` + }); console.log(`[Spotify] OAuth server started on port ${port}`); // Generate authorization URL @@ -81,6 +153,12 @@ } async function handleOAuthCallback(callbackUrl: string) { + // Immediately remove the listener to prevent duplicate calls from hot reload + if (oauthUnlisten) { + oauthUnlisten(); + oauthUnlisten = null; + } + try { // Parse the callback URL const url = new URL(callbackUrl);