Next.js Discord

Discord Forum

Server side spotify api url parsing issue

Answered
Northern snakehead posted this in #help-forum
Open in Discord
Northern snakeheadOP
Hi everyone,

I’m running into a strange issue with Spotify OAuth in my Next.js app. The flow works perfectly when logging into Spotify with a regular username and password. However, when logging in via Apple or Google, the Spotify auth seems to succeed, but the page either crashes or shows a blank screen. On Vercel, I see the following error in the logs:

TypeError: Body is unusable: Body has already been read
    at c (.next/server/app/api/callback/route.js:1:1837)
while the client reads: 
{"error": "invalid grant"
, "error_description"
: " In
valid authorization code"}}


i think it has something to so with

Authorization codes being reused or becoming invalid
Something different in the redirect URL Spotify sends when using Apple/Google login
Cookie/session state mismatch

I’ve verified that:

The code param is being received from Spotify
The app works fine when logging in the standard way
I’m not re-reading the response body more than once
Any ideas what could cause this issue when using Spotify login via Apple or Google specifically?
Would really appreciate any insight or suggestions.

Thanks in advance!
Answered by joulev
once you have .json() or .text() a response, you cannot consume the response again. so these are forbidden:

await res.json(); // works
await res.json(); // error

await res.json(); // works
await res.text(); // error

await res.text(); // works
await res.json(); // error


you must only consume it once. if you are not certain it is a json, you should have a 
const resText = await res.text();

in one single place and later you can
const resJson = JSON.parse(resText);

if needed
View full answer

4 Replies

Northern snakeheadOP
you can also check out the site here: https://altern.vercel.app
@Northern snakehead Hi everyone, I’m running into a strange issue with Spotify OAuth in my Next.js app. The flow works perfectly when logging into Spotify with a regular username and password. However, when logging in via Apple or Google, the Spotify auth seems to succeed, but the page either crashes or shows a blank screen. On Vercel, I see the following error in the logs: TypeError: Body is unusable: Body has already been read at c (.next/server/app/api/callback/route.js:1:1837) while the client reads: {"error": "invalid grant" , "error_description" : " In valid authorization code"}} i think it has something to so with Authorization codes being reused or becoming invalid Something different in the redirect URL Spotify sends when using Apple/Google login Cookie/session state mismatch I’ve verified that: The code param is being received from Spotify The app works fine when logging in the standard way I’m not re-reading the response body more than once Any ideas what could cause this issue when using Spotify login via Apple or Google specifically? Would really appreciate any insight or suggestions. Thanks in advance!
joulev
once you have .json() or .text() a response, you cannot consume the response again. so these are forbidden:

await res.json(); // works
await res.json(); // error

await res.json(); // works
await res.text(); // error

await res.text(); // works
await res.json(); // error


you must only consume it once. if you are not certain it is a json, you should have a 
const resText = await res.text();

in one single place and later you can
const resJson = JSON.parse(resText);

if needed
Answer