Completely stuck with "Obtain a Spotify Access Token" step

Language Help React.js
1

So this is a question about the Jammming Project.

As I understand it, at the step “Obtain a Spotify Access Token”, you need to give the user the opportuntiy to log in to their Spotify account so as to be able to upload saved playlists to their Spotify account.

I have read the documentation on the Spotify Developers website including about Implicit Grant Flow which is the authentication method recommended by the project (but which the Spotify website explicitly states you should not use, in favour of PKCE).

I have also watched (or started watching) several YouTube videos to try to get my head around what I need to do. The only one I could follow was this one, though here the app uses read-only access to the API, so does not require a login.

The other videos either got in too deep too quickly, or used libraries that I was not familiar with, so I could not follow what was happening, and what I should do in React if I don’t use those libraries.

As I said, I have read the Spotify documentation on implicit grant flow, and even though the page is short, I do not understand how I could incorporate the code there into my React code. It talks about how to set things up for the GET request, but does not provide any code for actually making the GET request. The documentation on the PKCE method is more lengthy and even more confusing for me at the moment.

I don’t recall anything in the previous part of the Full Stack Developer course dealing with site authentication, and I feel completely lost. I do not feel preparared to tackle this part of the project on my own, which is the first time I have had this feeling in the six months I have been learning on Codecademy.

So my concrete question is, how can I integrate the code given on the Spotify documentation for Implicit Grant Flow (or possibly PKCE if that is a better way) into my React App, and move on with the project? My general understanding is that you would want the authorization to happen with useEffect when the site loads, and then have the token to make API requests, but I am at a loss as to how to do this.

Edit: I have now found this video, which is the closest to what I need in terms of just using React for the authentication (though he does start using axios later on). I am still stuck at making the link between the documentation and what you have to do in this step, though.

2

Hi,

Have you tried going through the spotify walk-through? https://github.com/spotify/web-api-examples/tree/master/get_user_profile

React is just a framework, and this is just a GET request (albeit with special procedures unique to spotify), they shouldn’t get in the way of each other. You mention that there’s a video that uses react and axios. You can do that as well, axios is a very common HTTP requests library so it’s good to know either way (just install axios with whatever package manager you use). What are you currently using for the HTTP requests? If it’s the fetch library, anything you see done in axios can be done similarly (give or take some different syntax and steps etc.).

2 Likes
3

Hi, thank you so much for your quick reply, and sorry mine was so slow - I was away for a long weekend. Thank you for the link to the walk through, I’ll check it out. This one appears to be using a server? I was hoping to do things serverless for now, as the project write up suggests, but I will look at this way too now.

4

In the end I worked through the last video I mentioned, installed axios as you suggested, and I am able to get an access token and search for tracks as per the project requirements. Still can’t follow the Spotify API documentation, but I suppose I don’t need to now, as I have the code I need to move on with the project.

1 Like