Redirect URI not allowing localhost prevents me from testing locally

[Daniel-Ha]

My Question or Issue

I’m building a Next.js app with NextAuth and Spotify OAuth and I’m stuck on the local redirect. Spotify no longer allows redirect URIs with http://localhost:3000, so I configured their dashboard to allow http://127.0.0.1:3000/api/auth/callback/spotify. My app also runs on http://127.0.0.1:3000.

When I start the flow from http://127.0.0.1:3000/login, Spotify shows the authorize URL with the correct redirect_uri=http://127.0.0.1:3000/api/auth/callback/spotify.

However, after I sign in, the browser gets sent to http://localhost:3000/api/auth/callback/spotify?code=…, so Spotify’s token endpoint returns “Invalid redirect URI” because the host no longer matches.

Env vars (AUTH_URL, NEXTAUTH_URL) are set to http://127.0.0.1:3000, the dev server is started with next dev --hostname 127.0.0.1 --port 3000, and cookies are cleared, but the callback still ends up on localhost.

Has anyone else hit this? How did you keep the entire local flow on 127.0.0.1 so PKCE and redirect validation work?

[drew4675]

you need to use a https link rather than http. Since you're using next.js try:
npx next dev --experimental-https
then set the redirect uri to https://127.0.0.1:3000