How to Integrate Spotify API with V0

Before writing any code, you need to register your application in the Spotify Developer Dashboard. This is how Spotify knows which apps are allowed to access its API and which redirect URIs are permitted for OAuth. Go to developer.spotify.com and log in with your Spotify account. Click on your profile name in the top-right corner and select Dashboard. Then click Create App. Give your app a name (e.g., 'My V0 Music App'), a description, and set the Redirect URI to http://localhost:3000/api/spotify/callback for local development. You will add your production Vercel URL later. Accept the terms and click Save. Once the app is created, you will see your Client ID on the app overview page. Click Show Client Secret to reveal your secret key. Copy both values — you will need them as environment variables. Important: the Client Secret must never appear in client-side code or be committed to your Git repository. Treat it like a password. For production, come back to the Spotify Dashboard after you deploy to Vercel and add your production callback URL (e.g., https://your-project.vercel.app/api/spotify/callback) to the Redirect URIs list. Spotify will reject OAuth callbacks to any URL not on this allowlist, so this step is required before your deployed app can authenticate users.

With your Spotify app credentials ready, use V0 to generate the front-end components for your music feature. V0 excels at creating visually polished music interfaces — album art grids, track lists, waveform-style progress bars, and artist cards — all styled with Tailwind CSS. When prompting V0, describe exactly what data each component should display and where it fetches that data from. Be specific about the API endpoint paths you plan to create (like /api/spotify/playlists or /api/spotify/search) so V0 wires the fetch calls to the right routes. Also tell V0 to include loading states (skeleton screens) and error states, since music API calls can take a second or two. For the OAuth flow, you also want V0 to generate a Login with Spotify button that redirects to /api/spotify/login — this is the endpoint that will kick off the Authorization Code flow. Once authentication is complete, the user lands back on your app and the music UI can start fetching their data. If you are building a public search feature without user login (Client Credentials flow), you do not need the login button — just the search bar and results display. Ask V0 to generate a search input that posts to /api/spotify/search with a query parameter and renders the results.

The Spotify OAuth2 flow requires two server-side routes: one to redirect the user to Spotify's authorization page, and one to handle the callback and exchange the code for an access token. The login route (app/api/spotify/login/route.ts) builds the Spotify authorization URL with your Client ID, the scopes (permissions) your app needs, and the redirect URI. Scopes are space-separated strings like 'user-read-private user-top-read playlist-read-private'. You redirect the user to this URL and Spotify handles the login form. After the user approves, Spotify sends them back to your callback route (app/api/spotify/callback/route.ts) with a code parameter in the URL. Your callback route exchanges this code for an access token by making a POST request to Spotify's token endpoint. The response includes an access_token (short-lived, 1 hour) and a refresh_token (long-lived). You store these in a secure HTTP-only cookie and redirect the user back to your app's home page. Storing tokens in HTTP-only cookies is the correct security pattern for Next.js — the token never touches client-side JavaScript, preventing XSS attacks from stealing it. When your other API routes need to call Spotify, they read the token from the cookie using the cookies() function from next/headers. For apps not requiring user authentication (public search only), you skip these two routes entirely and instead fetch a Client Credentials token directly in your search route using your Client ID and Secret with a basic auth header.

1// app/api/spotify/login/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const scopes = [
6    'user-read-private',
7    'user-top-read',
8    'playlist-read-private',
9    'user-read-recently-played',
10  ].join(' ');
11
12  const params = new URLSearchParams({
13    response_type: 'code',
14    client_id: process.env.SPOTIFY_CLIENT_ID!,
15    scope: scopes,
16    redirect_uri: process.env.SPOTIFY_REDIRECT_URI!,
17  });
18
19  return NextResponse.redirect(
20    `https://accounts.spotify.com/authorize?${params.toString()}`
21  );
22}

With authentication working, create the API routes that fetch music data from Spotify and return it to your V0-generated components. Each route reads the access token from the HTTP-only cookie set during OAuth, then calls the appropriate Spotify Web API endpoint. For example, to fetch the current user's playlists, your route reads the token from cookies, then calls GET https://api.spotify.com/v1/me/playlists with an Authorization: Bearer TOKEN header. The Spotify API returns a JSON object with an items array of playlist objects, each containing the playlist name, description, cover image, and track count. For top tracks and artists, the endpoint is https://api.spotify.com/v1/me/top/tracks (or /artists) with a time_range query parameter (short_term = 4 weeks, medium_term = 6 months, long_term = all time). For recently played tracks it is https://api.spotify.com/v1/me/player/recently-played. Handle token expiration gracefully: if Spotify returns a 401 Unauthorized response, the access token has expired and you need to use the refresh token to get a new one. You can add a helper function that calls POST https://accounts.spotify.com/api/token with the refresh token and your client credentials, then updates the cookie with the new access token and retries the original request. Return only the data your components need — do not pass the entire Spotify response object. Extract just the fields like name, images, artists, and external_urls to keep your API responses lean and your components simple.

1// app/api/spotify/playlists/route.ts
2import { NextResponse } from 'next/server';
3import { cookies } from 'next/headers';
4
5export async function GET() {
6  const cookieStore = await cookies();
7  const accessToken = cookieStore.get('spotify_access_token')?.value;
8
9  if (!accessToken) {
10    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
11  }
12
13  const response = await fetch(
14    'https://api.spotify.com/v1/me/playlists?limit=20',
15    {
16      headers: {
17        Authorization: `Bearer ${accessToken}`,
18      },
19    }
20  );
21
22  if (response.status === 401) {
23    return NextResponse.json({ error: 'Token expired' }, { status: 401 });
24  }
25
26  if (!response.ok) {
27    return NextResponse.json(
28      { error: 'Failed to fetch playlists' },
29      { status: response.status }
30    );
31  }
32
33  const data = await response.json();
34  const playlists = data.items.map((p: any) => ({
35    id: p.id,
36    name: p.name,
37    images: p.images,
38    trackCount: p.tracks.total,
39    externalUrl: p.external_urls.spotify,
40  }));
41
42  return NextResponse.json({ playlists });
43}

Your Spotify API routes read three environment variables: SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, and SPOTIFY_REDIRECT_URI. These must be added to Vercel's environment configuration so they are available when your serverless functions run. Open your Vercel Dashboard, select your project, click the Settings tab, then Environment Variables in the left sidebar. Add each variable with its value and set the environment scope to Production, Preview, and Development. SPOTIFY_CLIENT_ID: your app's Client ID from the Spotify Developer Dashboard. This is not a secret — it appears in OAuth URLs that users can see — but adding it as an environment variable keeps your code flexible. SPOTIFY_CLIENT_SECRET: your app's Client Secret. This MUST be kept server-side only. Never add the NEXT_PUBLIC_ prefix to this variable. If this leaks, anyone can make API calls as your app. SPOTIFY_REDIRECT_URI: for production, set this to https://your-project.vercel.app/api/spotify/callback. This must exactly match one of the redirect URIs you registered in the Spotify Developer Dashboard — even a trailing slash difference will cause an OAuth error. For local development, create a .env.local file with the same variables set to their development values (http://localhost:3000/api/spotify/callback for the redirect URI). Vercel does not read .env files during deployment, so the Vercel Dashboard variables are the only source for production. After adding variables, trigger a redeployment by pushing a commit to GitHub. Then go back to the Spotify Developer Dashboard and add your production callback URL to the app's Redirect URIs list.