How to Integrate Lovable with Spotify API

Before writing any code in Lovable, you need a Spotify App registered in the Spotify Developer Dashboard. The Spotify App defines your client ID, client secret, allowed redirect URIs, and the API scopes your app can request. Go to developer.spotify.com and log in with your Spotify account. Click 'Create app'. Fill in: - App name: your Lovable app's name (shown to users during authorization) - App description: a brief description of what your app does - Redirect URIs: this is critical. Add your Lovable app's deployed URL + /spotify-callback (e.g., https://myapp.lovable.app/spotify-callback). Also add https://localhost:3000/spotify-callback for local development. The redirect URI must match exactly what your app sends in the OAuth request — any mismatch results in an error. - APIs used: check 'Web API' (and 'Web Playback SDK' if you want in-browser playback) Click Save. On the app's settings page, find and copy the Client ID. Click 'View client secret' and copy that too. Think through the OAuth scopes your app will need. Common scopes: user-top-read (top tracks/artists), user-read-recently-played, playlist-read-private, playlist-modify-public, user-library-read, user-read-playback-state, user-modify-playback-state (for playback control). Only request scopes your app actually uses — users see a list of requested permissions during authorization.

Store your Spotify credentials in Lovable's Cloud Secrets panel. The client secret is sensitive — it is used to verify that token exchange requests come from your app, not from an impersonator. In Lovable, click '+' → Cloud panel → Secrets tab. Add these secrets: SPOTIFY_CLIENT_ID: your Spotify App's client ID (a 32-character hex string) SPOTIFY_CLIENT_SECRET: your Spotify App's client secret (also a 32-character hex string). This should always stay server-side in your Edge Function. SPOTIFY_REDIRECT_URI: your deployed app's callback URL (e.g., https://myapp.lovable.app/spotify-callback). This must match exactly one of the URIs registered in your Spotify App. With these secrets set, your Edge Function can handle the OAuth token exchange securely.

The Spotify OAuth2 PKCE flow has two parts: the frontend generates the PKCE code challenge and redirects the user to Spotify, and the Edge Function handles the callback by exchanging the authorization code for tokens. For the frontend: generate a cryptographically random code verifier (43-128 characters), compute its SHA-256 hash, base64url-encode the hash to create the code challenge, store the code verifier in sessionStorage (not localStorage — it should only last the session), and redirect the user to Spotify's authorization endpoint with your client ID, redirect URI, scopes, code challenge, and code_challenge_method=S256. For the Edge Function callback: receive the authorization code from Spotify's redirect, retrieve the code verifier from the request (your frontend should include it in the request to the callback Edge Function), POST to Spotify's token endpoint with the code, code verifier, client ID, client secret, and redirect URI, and store the returned access token and refresh token in Supabase for the current user. The code below shows the Edge Function callback handler. The React component that initiates the flow (PKCE code generation and Spotify redirect) is generated by Lovable's chat interface.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  try {
15    const { code, codeVerifier, userId } = await req.json()
16
17    const clientId = Deno.env.get('SPOTIFY_CLIENT_ID')!
18    const clientSecret = Deno.env.get('SPOTIFY_CLIENT_SECRET')!
19    const redirectUri = Deno.env.get('SPOTIFY_REDIRECT_URI')!
20
21    // Exchange authorization code for tokens
22    const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
23      method: 'POST',
24      headers: {
25        'Content-Type': 'application/x-www-form-urlencoded',
26        Authorization: 'Basic ' + btoa(`${clientId}:${clientSecret}`),
27      },
28      body: new URLSearchParams({
29        grant_type: 'authorization_code',
30        code,
31        redirect_uri: redirectUri,
32        code_verifier: codeVerifier,
33      }),
34    })
35
36    const tokenData = await tokenResponse.json()
37    if (!tokenResponse.ok) {
38      throw new Error(`Spotify token exchange failed: ${tokenData.error}: ${tokenData.error_description}`)
39    }
40
41    // Store tokens in Supabase
42    const supabase = createClient(
43      Deno.env.get('SUPABASE_URL')!,
44      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
45    )
46
47    const expiresAt = new Date(Date.now() + tokenData.expires_in * 1000).toISOString()
48
49    await supabase.from('spotify_tokens').upsert({
50      user_id: userId,
51      access_token: tokenData.access_token,
52      refresh_token: tokenData.refresh_token,
53      expires_at: expiresAt,
54    }, { onConflict: 'user_id' })
55
56    return new Response(
57      JSON.stringify({ success: true }),
58      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
59    )
60  } catch (error) {
61    return new Response(
62      JSON.stringify({ error: error.message }),
63      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64    )
65  }
66})

With tokens stored, create Edge Functions that retrieve the user's stored access token from Supabase and proxy Spotify API calls. Each music feature (top tracks, playlists, recommendations) can use a shared helper that fetches the token, handles expiry-triggered refresh, and makes the Spotify API call. Spotify API endpoints return rich data objects. For top tracks, the response includes track name, artists array, album name, album art URLs at multiple sizes, duration, preview_url (30-second clip), and external_urls for linking to Spotify. Your Edge Functions should normalize this data to the shape your React components need rather than passing the raw Spotify response through. For rate limit handling: Spotify returns 429 Too Many Requests when limits are exceeded, with a Retry-After header indicating how many seconds to wait. For production apps with many users, implement per-user caching — store recently fetched top tracks in Supabase with a timestamp and only re-fetch from Spotify if the cached data is older than 24 hours.