Spotify API

Go to developer.spotify.com, sign in with your Spotify account, and click 'Create an app.' Enter an app name, description, and the redirect URI (if you're using authorization code flow — use your Firebase Cloud Function URL). Under APIs used, select 'Web API.' After creating the app, copy your Client ID (shown on the dashboard) and your Client Secret (click 'Show client secret'). Store the Client Secret in your password manager — it goes into Firebase Secrets, never into FlutterFlow. Now decide on your auth flow. If your app only needs public Spotify catalog data — searching tracks, fetching albums, artist discographies, audio features by track ID — you want client credentials flow. The proxy exchanges your Client ID + Secret for a token without any user account; users of your FlutterFlow app don't log into Spotify at all. If your app needs to read or modify a specific user's Spotify data (their playlists, saved tracks, listening history, currently playing, or play queue), you need the authorization code flow and must list the required OAuth scopes in the Spotify developer dashboard (e.g., user-read-private, playlist-read-private, user-library-read). You can start with client credentials for catalog features and add the authorization code flow later for personalized features.

Your Firebase Cloud Function proxy does two things: it acquires Spotify access tokens (using client credentials or the authorization code exchange) and it forwards FlutterFlow API Calls to the Spotify Web API with a valid Bearer token attached, refreshing the token if it's near the 1-hour expiry. Store your Spotify credentials as Firebase Secrets: firebase functions:secrets:set SPOTIFY_CLIENT_ID and firebase functions:secrets:set SPOTIFY_CLIENT_SECRET. The proxy function (see code below) handles the client credentials token endpoint (https://accounts.spotify.com/api/token) with a Basic Auth header encoded as base64(clientId:clientSecret). It caches the access token in memory (or in Firestore) along with the expires_at timestamp. On every incoming request from FlutterFlow, it checks if the token is still valid (with a 60-second buffer), refreshes if needed, attaches the Bearer token, and proxies the request to api.spotify.com/v1. If you're using authorization code flow for user data, the proxy also needs an /auth/callback endpoint that receives Spotify's redirect with the authorization code, exchanges it for access and refresh tokens, stores them in Firestore keyed to the user ID, and refreshes them using the refresh_token grant type before each user-scoped request. If building this proxy seems like a lot, RapidDev's team handles FlutterFlow integrations like this routinely — book a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function proxy — client credentials flow (Node.js)
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const fetch = require('node-fetch');
5
6const SPOTIFY_CLIENT_ID = defineSecret('SPOTIFY_CLIENT_ID');
7const SPOTIFY_CLIENT_SECRET = defineSecret('SPOTIFY_CLIENT_SECRET');
8
9// In-memory token cache (resets on cold start — use Firestore for persistence)
10let cachedToken = null;
11let tokenExpiresAt = 0;
12
13async function getAccessToken(clientId, clientSecret) {
14  const now = Date.now();
15  if (cachedToken && now < tokenExpiresAt - 60000) return cachedToken;
16
17  const credentials = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');
18  const res = await fetch('https://accounts.spotify.com/api/token', {
19    method: 'POST',
20    headers: {
21      Authorization: `Basic ${credentials}`,
22      'Content-Type': 'application/x-www-form-urlencoded',
23    },
24    body: 'grant_type=client_credentials',
25  });
26  const data = await res.json();
27  cachedToken = data.access_token;
28  tokenExpiresAt = now + data.expires_in * 1000; // expires_in = 3600
29  return cachedToken;
30}
31
32exports.spotifyProxy = onRequest(
33  { secrets: [SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET] },
34  async (req, res) => {
35    res.set('Access-Control-Allow-Origin', '*');
36    if (req.method === 'OPTIONS') return res.status(204).send('');
37
38    const token = await getAccessToken(
39      SPOTIFY_CLIENT_ID.value(),
40      SPOTIFY_CLIENT_SECRET.value()
41    );
42
43    const { endpoint, queryParams } = req.body;
44    const url = new URL(`https://api.spotify.com/v1${endpoint}`);
45    if (queryParams) {
46      Object.entries(queryParams).forEach(([k, v]) => url.searchParams.set(k, v));
47    }
48
49    const spotifyRes = await fetch(url.toString(), {
50      headers: { Authorization: `Bearer ${token}` },
51    });
52
53    if (spotifyRes.status === 429) {
54      const retryAfter = spotifyRes.headers.get('Retry-After') || '10';
55      return res.status(429).json({ error: 'Rate limited', retryAfter });
56    }
57
58    const data = await spotifyRes.json();
59    return res.status(spotifyRes.status).json(data);
60  }
61);

In FlutterFlow, click API Calls in the left nav → + Add → Create API Group. Name it 'SpotifyProxy' and set the Base URL to your Firebase Cloud Function URL (e.g., https://us-central1-your-project.cloudfunctions.net/spotifyProxy). No shared headers needed — the proxy handles Spotify authentication. Add two primary API Calls: 1. 'Search Tracks' — POST to the proxy with a JSON body containing endpoint '/search' and queryParams {q: [variable:searchQuery], type: 'track', limit: '20', market: 'US'}. In the Response & Test tab, paste a sample Spotify search response and auto-generate JSON paths. Key paths: $.tracks.items[*].id, $.tracks.items[*].name, $.tracks.items[*].artists[0].name, $.tracks.items[*].album.images[0].url (album art URL), $.tracks.items[*].preview_url (30s audio clip URL), $.tracks.items[*].duration_ms. Create a FlutterFlow Data Type named 'SpotifyTrack' with these fields. 2. 'Get Audio Features' — POST to the proxy with endpoint '/audio-features' and queryParams {ids: [variable:trackIds]} (comma-separated string of track IDs). Parse $.audio_features[*].tempo (BPM), $.audio_features[*].energy (0-1 float), $.audio_features[*].danceability (0-1), $.audio_features[*].valence (mood positivity 0-1). Add a 'SpotifyAudioFeatures' Data Type. Add a debounce to the search input: in your search TextField's On Change action, use a Timer of 400ms before firing the Search Tracks API Call — this prevents an API Call on every keystroke and protects against rate limiting.

1{
2  "Group Name": "SpotifyProxy",
3  "Base URL": "https://us-central1-your-project.cloudfunctions.net/spotifyProxy",
4  "Calls": [
5    {
6      "Name": "Search Tracks",
7      "Method": "POST",
8      "Body": {
9        "endpoint": "/search",
10        "queryParams": {
11          "q": "[variable:searchQuery]",
12          "type": "track",
13          "limit": "20",
14          "market": "US"
15        }
16      },
17      "JSON Paths": {
18        "id": "$.tracks.items[*].id",
19        "name": "$.tracks.items[*].name",
20        "artist": "$.tracks.items[*].artists[0].name",
21        "albumArtUrl": "$.tracks.items[*].album.images[0].url",
22        "previewUrl": "$.tracks.items[*].preview_url",
23        "durationMs": "$.tracks.items[*].duration_ms"
24      }
25    },
26    {
27      "Name": "Get Audio Features",
28      "Method": "POST",
29      "Body": {
30        "endpoint": "/audio-features",
31        "queryParams": { "ids": "[variable:trackIds]" }
32      },
33      "JSON Paths": {
34        "trackId": "$.audio_features[*].id",
35        "tempo": "$.audio_features[*].tempo",
36        "energy": "$.audio_features[*].energy",
37        "danceability": "$.audio_features[*].danceability",
38        "valence": "$.audio_features[*].valence"
39      }
40    }
41  ]
42}

With the API Calls configured, build the track search screen in FlutterFlow. Add a TextField widget at the top of the screen for the search query, bound to a Page State variable called searchQuery (String). Add an On Change action with a 400ms debounce (use a Timer Action in the Action Flow Editor) that calls the Search Tracks API and stores the result list in a Page State variable called tracks (list of SpotifyTrack Data Type). Add a ListView widget below the search field. In Generate Dynamic Children, select the tracks Page State variable as the data source. For each item, add a Row widget containing: a 48x48 Network Image bound to SpotifyTrack.albumArtUrl; a Column with two Text widgets (track name bold, artist name muted); and a Row of Chip widgets showing energy and tempo if audio features have been loaded for that track. To load audio features alongside search results: after the Search Tracks API Call completes and updates the tracks list, chain an action that builds a comma-separated string of the returned track IDs and calls Get Audio Features. Store the audio features in a second Page State variable keyed by track ID. In each list item's chip row, look up the audio features by the track's ID to display BPM and energy. This two-step pattern (search → then batch fetch audio features) is more efficient than calling audio features per track individually.

The Spotify Web API returns a preview_url field on most tracks — a 30-second MP3 clip hosted on Spotify's CDN that can be played without Premium and without the Spotify SDK. This is the standard playback approach for FlutterFlow music apps using the Web API. In FlutterFlow, go to Custom Code → + Add → Action. Name it 'PlaySpotifyPreview'. In the Dependencies field, add just_audio (check pub.dev for the current version). The Custom Action takes a String parameter previewUrl and an optional boolean parameter isPlaying. The Dart code creates an AudioPlayer, loads the URL, and plays it — or pauses if isPlaying is true. Manage the player instance at the page level using a Custom Function that holds the player as a singleton to avoid creating multiple players when the user taps different tracks. On each track card's play button, wire the On Tap action to PlaySpotifyPreview with the track's previewUrl. Show a Page State variable currentlyPlayingTrackId to highlight the active track in the list. Note: Custom Actions do not run in FlutterFlow's web Test Mode (the preview canvas) — test playback on a real device or in Run mode. Add a kIsWeb guard in the Dart code if you're also deploying a web version, since audio behavior differs between mobile and web Flutter targets.

1import 'package:just_audio/just_audio.dart';
2import 'package:flutter/foundation.dart' show kIsWeb;
3
4// Singleton player — call this from a Custom Function or Action
5AudioPlayer? _spotifyPlayer;
6
7Future<void> playSpotifyPreview(String previewUrl, bool stopCurrent) async {
8  if (previewUrl.isEmpty) return;
9
10  _spotifyPlayer ??= AudioPlayer();
11
12  if (stopCurrent) {
13    await _spotifyPlayer!.stop();
14    return;
15  }
16
17  try {
18    await _spotifyPlayer!.stop();
19    await _spotifyPlayer!.setUrl(previewUrl);
20    await _spotifyPlayer!.play();
21  } catch (e) {
22    // Handle playback errors (network, invalid URL, DRM)
23    debugPrint('Spotify preview playback error: $e');
24  }
25}
26
27Future<void> stopSpotifyPreview() async {
28  await _spotifyPlayer?.stop();
29}