Getting 405 Error when working w/ Spotify API

Hi everyone!

I’m currently considering starting a project that involves the Spotify API and I stumbled across this article that was supposed to help me get started with working with it. There’s also a repo that goes with it and that’s where I’m getting stuck.

When I start the app on my local machine, the screen looks like this:

But when I click on “Login to Spotify” (the authentication part), the screen looks like this:

I’m (struggling with) authenticating to Spotify using Implicit Grant Flow, where I provide a clientId, response_type, redirect_uri (in my case, I have it set to http://localhost:3000), state and scope.

But yet, I get the error. I checked the Network tab on Dev Tools and saw I am getting a 405: Not Allowed Http Error but I can’t understand, if I followed all the directions per the article and README.md, why?

Any ideas on what I’m missing here?

Thank you all in advance!
Brandon

You will need to post a link to your project code. Ideally, something like codesandbox.io would be great. A 405 error means you are trying to make an invalid request to a specific (could be valid) endpoint.

I’ve never used sandbox before but since I’m using the exact same code and file structure as the original repo, I imported that and made this sandbox.

Did you register your application? You need to change the config (and rename it to config).

https://github.com/JoeKarlsson/react-spotify-player/blob/master/src/config_example.js

Yes. I made sure to rename the file.

Did you clone the repo or did you follow the article? Because the article code and repo code is not the same. In the article the config code is written in App.js, in the repo code it is in the config file and is imported into App.js.

Also, remember to set the redirectUri in the spotify app settings (it also won’t work on CodeSandbox).

I just tested it and it works for me. Just be aware that you need to be logged in and have something playing otherwise the app crashes in the getCurrentlyPlaying function (data will be undefined).

Yes, the redirectUri is set in the app settings on Spotify and I double-checked to make sure there are no spelling errors.

Also, I did see the discrepancy between the article-code and the repo-code; my code is in line with the repo-code.

I do have a song currently playing on Spotify and I’m still getting an error:

Here are the steps I took.

  1. Clone the repo, run npm i

  2. Register the spotify app, copy the app id and change the Redirect URIs in the app settings to http://localhost:3000/redirect

  3. Add the id to clientId and rename config_example.js to config.js

  4. Login to spotify in the browser and start playing something.

  5. Start the app and login. Should now show the currently playing track.

Thank you! The problem was in App.js in the render section; the anchor tag with href={'${authEndpoint}... was written wrong on my part. Fixed it. It now works! :smiley:

Good job finding the issue, happy coding!