Getting 405 Error when working w/ Spotify API

1

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:

08%20PM
08%20PM2880×1800 264 KB

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

52%20PM
52%20PM2880×1800 252 KB

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

3

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.

4

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

5

Yes. I made sure to rename the file.

6

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).

7

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:

18%20PM
18%20PM2880×1800 682 KB

8

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.

playing
playing1914×834 226 KB

9

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:

10

Good job finding the issue, happy coding!