Issue with connecting to Spotify API (not happening locally)
Hi,
I have deployed my app frontend react app deployed using one service and backend express using another service.
The app connects to the Spotify API without issue locally however, since deploying it, I'm getting an error saying a param is missing - it's definitely there in the code as its tested and working correctly locally.
Does anyone have any advice on how to diagnose?
This is my first time building and deploying my own app, so really confused as to how/why its working without issue locally.
Thanks
Response Data: {
error: 'unsupported_grant_type',
error_description: 'grant_type parameter is missing'
}
23 Replies
Project ID:
34f17a45-feb3-4ab0-a644-8b2f5580738234f17a45-feb3-4ab0-a644-8b2f55807382
I'm also getting this message in the console and not sure if it's related
VM10:5 crbug/1173575, non-JS module files deprecated.
do you think you can share your repo?
https://github.com/casey-turner/jams-playlist-generator/tree/deploy
sure - it's here ^^^ I'm working on this deploy branch as I have been trying to debug and don't want to mess with things too much when I know it's been working locally
GitHub
GitHub - casey-turner/jams-playlist-generator at deploy
JAMS is a playlist creation tool powered by AI. With just a few simple steps, you can create and save your perfect playlist directly to your Spotify account. - GitHub - casey-turner/jams-playlist-g...
I know with the Spotify API you need to register your redirect URI, which I've done
http://localhost:3000/callback
https://jams-playlist-generator-production.up.railway.app/callback <= this is my backend url
i assume the backend talks to Spotify?
yea, thats right
its failing on connecting the users account to Spotify - so the very first step really
just to cut down on my search, where would the code that does that be?
https://github.com/casey-turner/jams-playlist-generator/blob/deploy/packages/server/src/controllers/spotifyAuthController.ts
this is where I'm doing the Spotify Auth
https://github.com/casey-turner/jams-playlist-generator/blob/deploy/packages/server/src/apis/spotifyApi.ts
and this is where I've created the axios instance
so here you set the content type to
application/x-www-form-urlencoded
https://github.com/casey-turner/jams-playlist-generator/blob/main/packages/server/src/apis/spotifyApi.ts#L14
but then here, doesn't this encode the body as json?
https://github.com/casey-turner/jams-playlist-generator/blob/main/packages/server/src/controllers/spotifyAuthController.ts#L39
as for why it works locally, zero clue lolsorry which bit are you saying encodes the body as json?
(still really new to coding and obvs quite confused)
you passed an object into
spotifyTokenApi.post doesn't that encode that object into a json string for the body of that post request?
this is also a question, since im not familiar with axios
if im right, this would be an issue since you cant post a json body to an endpoint that expects x-www-form-urlencodedamazing, thanks for your help -I'll give that a shot now
let me know how it goes
IT WORKED!! thanks so much !!
oh wow that was easy
I'm happy I could help!
really appreciate it - was going down all sorts of un related rabbit holes 
haha you'll have that with software development
and out of curiosity, where did you come up with your frontends start command?
oh some hunting through docs - I was struggling with that too - its mostly about CRA but theres line for using Vite under "The solution"
https://help.railway.app/project-help/f9v3gkPQRy4UShk5SnoPDH/getting-your-create-react-app-running-on-railway/qHRsgxa5n57xLp1yVgk9fP
haha that's awesome, I'm glad my guide came in handy
ahaha yea - it certainly did
well happy coding! and if you have any more questions you can come back here
cheers, thanks