Overview

I wanted a simple way to share the last track I listened to without babysitting tokens. The setup below uses Spotify OAuth once, stores a refresh token, and then keeps the site updated automatically.

What you get:

a tiny setup page for the OAuth flow (optional but convenient)

a callback endpoint that exchanges the code for a refresh token (required)

a server utility that refreshes access tokens on demand (required)

Everything here uses HTTPS and your real domain. No localhost required.

Setup Steps

These are the only required building blocks:

/spotify-setup page (optional, just to generate the authorize link)

/api/spotify/callback API route (required)

server helper that refreshes tokens and fetches Spotify data (required)

Create a Spotify app

Go to the Spotify Developer Dashboard, create a new app, and add redirect URIs.

Spotify Dashboard:

https://developer.spotify.com/dashboard

Redirect URI to add (use your real domain with HTTPS):

https://your-domain.com/callback

Add environment variables

SPOTIFY_CLIENT_ID=your_client_id_here
SPOTIFY_CLIENT_SECRET=your_client_secret_here
SPOTIFY_REDIRECT_URI=https://your-domain.com/callback
SPOTIFY_REFRESH_TOKEN=your_refresh_token_here

Get your refresh token

Visit /spotify-setup, authorize the app, and copy the refresh token from the /callback page.

Add the callback API route

This exchanges the authorization code for a refresh token.

// app/api/spotify/callback/route.ts
export async function POST(request: Request) {
  const { code } = await request.json();
 
  const response = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`,
    },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: redirectUri,
    }),
  });
 
  const data = await response.json();
  return Response.json({
    refreshToken: data.refresh_token,
    accessToken: data.access_token,
    expiresIn: data.expires_in,
  });
}

Refresh access tokens on the server

Use your refresh token server-side to refresh access tokens and call the Spotify API:

const response = await fetch("https://accounts.spotify.com/api/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`,
  },
  body: new URLSearchParams({
    grant_type: "refresh_token",
    refresh_token: refreshToken,
  }),
});

Optional example: Top 5 tracks

Top 5 tracks:

What I'm Listening To

Show your latest Spotify track with a clean OAuth flow and a tiny setup UI.

Overview

I wanted a simple way to share the last track I listened to without babysitting tokens. The setup below uses Spotify OAuth once, stores a refresh token, and then keeps the site updated automatically.

What you get:

a tiny setup page for the OAuth flow (optional but convenient)
a callback endpoint that exchanges the code for a refresh token (required)
a server utility that refreshes access tokens on demand (required)

Everything here uses HTTPS and your real domain. No localhost required.

The Setup UI (optional, but nice)

You can generate the authorize URL manually, but a small setup page keeps it repeatable and easy to share. This is the component I added on /spotify-setup.

Spotify OAuth Setup

Generate your refresh token in two clicks.

Authorize once, save the token, and your "last listened" line stays live without manual updates.

Client ID set

Redirect URI set

Scope: user-read-recently-played

Authorize Spotify

Opens Spotify, then redirects to `/callback`.

Current Redirect URI

http://localhost:1408/callback

Finish Setup

Copy the refresh token into `.env.local`.

Approve access to recently played tracks.
Copy the refresh token from `/callback`.
Save as `SPOTIFY_REFRESH_TOKEN` and restart.