Token & session security
- Spotify tokens stored in HttpOnly, Secure cookies and cleared on logout
- Refresh flow runs server-side only; client never sees secrets
- Short-lived access tokens; refresh token retained for 30 days
Tech stack
The stack
Key features
Full OAuth flow with cookie-based session management, automatic token refresh, and server-side token caching. Supports both client credentials and user authorization flows.
Beats stream from a private S3 bucket through links signed per request. Links are reused for 40 minutes, requests give up after 10 seconds, and if a link lapses mid-track the player fetches a fresh one and carries on from the same second.
One player drives both HTML5 audio for beats and the Spotify Web Playback SDK for streaming, so the queue, controls, lock screen and media keys work the same whichever is playing.
Play next, add to queue, drag to reorder, shuffle and repeat, kept in a pure reducer with its own tests. Every item has its own id, so the same beat can be queued twice and moves animate cleanly.
The player lives outside React and is mounted once from the root layout, so music carries on across pages. Components subscribe to just the slices they need, so the progress bar ticking doesn’t re-render the page.
Every beat ships with its BPM, so the playhead gives the beat position directly. The LED wall pumps with the kick, the logo flips on the downbeat, and covers pulse in time, without a Web Audio graph.
Backend
/api/beatsReturns all beats with metadata/api/beats/playlistsReturns the beat packs/api/beats/signedUrlGenerates a signed URL for a specific beat/api/spotify/loginInitiates Spotify OAuth 2.0 authorization flow/api/spotify/callbackHandles OAuth callback and exchanges code for tokens/api/spotify/tokenRetrieves or refreshes Spotify access token/api/spotify/logoutClears the Spotify session cookies/api/spotify/playlistsFetches user playlists from Spotify API/api/spotify/playlist/[id]Fetches one playlist with its tracks/api/spotify/stats/topTracksFetches user’s most played tracks/api/spotify/stats/topArtistsFetches user’s top artistsUnder the hood
// A signed S3 link: reused for 40 minutes, shared while it's being
// fetched, and never allowed to hang the player
private linkFor(track: BeatTrack, fresh = false): Promise<string> {
const hit = this.links.get(track.id)
if (!fresh && hit && Date.now() - hit.at < LINK_TTL) return Promise.resolve(hit.url)
const inFlight = this.pending.get(track.id)
if (!fresh && inFlight) return inFlight
const abort = new AbortController()
const timer = window.setTimeout(() => abort.abort(), LINK_TIMEOUT)
const request = getBeatSignedUrl(track.id, abort.signal)
.then(url => {
if (!url) throw new Error('No audio link')
this.links.set(track.id, { url, at: Date.now() })
return url
})
.finally(() => {
window.clearTimeout(timer)
if (this.pending.get(track.id) === request) this.pending.delete(track.id)
})
this.pending.set(track.id, request)
return request
}Performance
Security & best practices
View the full source code, architecture decisions, and implementation details. Clean codebase, full TypeScript, production-ready.