Important

• In the Spotify Developer Dashboard (Edit Settings → Redirect URIs), add:

  • http://localhost:3000/api/integrations/spotify/callback
  • Your production URL: https://your-domain.vercel.app/api/integrations/spotify/callback
• Do not use https://localhost:3000/callback — it must exactly match the route path we implemented and typically http in local dev.
• After updating env vars, restart your dev server so Next.js picks them up.

Test the flow

• Go to /integrations/spotify and click Connect Spotify.
• After authorizing, you should be redirected back and your account/recents should load. If you see redirect_uri_mismatch, double-check both the Spotify dashboard and SPOTIFY_REDIRECT_URI values.

Security note

• Since you shared secrets here, consider rotating them in the Spotify Dashboard if they were exposed beyond your team. Set fresh values in Vercel → Project Settings → Environment Variables.

Result

• Sidebar is rendered in a fixed, non-collapsible state on all breakpoints.
• No trigger button or rail is present, so users can’t toggle the sidebar 1.

If you prefer the sidebar to remain collapsible on mobile only, say the word and I’ll set collapsible="offcanvas" and keep the desktop fixed.

[References]

• The shadcn/ui Sidebar supports collapsible="none" to render a non-collapsible sidebar and uses SidebarTrigger/SidebarRail for toggling 1.