Completely stuck with "Obtain a Spotify Access Token" step

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.

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

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.

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

Hola Harlandski.
How is going your project? Im stuck in the same part. I gonna see the video you suggest and also install axios.

Hey, I don’t want to be discouraging, but I couldn’t solve this problem, so I decided to leave the project and move on, tellilng myself I’d come back to it when I had more time and/or more understanding of how to use APIs. Let me know if you manage to crack it, and how!

thanks for the replay. In this moment I can get the token and create a new playlist, and Im ready to start working in the sending that playlist to the spotify account. I think with a simple POST request I can get it, but its just an assumption. I gonna write you back if I achieve some advance.

1 Like

hey, if it helps here is how I solved the project:

2 Likes

Hi again @harlandski i think a made it. If you want, look at my repo GitHub - diosDeNada/jamming-react-spotify-api
And I dont know if its part of the limitation of the project, but just work with the user that I used to register the appa (in the dashboard). So, if you wanna try it in your machine, create a new app in the Spotify dashboard, and change de client id value.

1 Like

Gracias dude. I gonna look it better soon. If you want, You can check my repo too GitHub - diosDeNada/jamming-react-spotify-api

Hi, I will look at some stage. I’m on some kind of sidequest at the moment learning Java & Powershell, but I will definitely come back to this project, probably over the summer, and then I’ll be grateful for the insights from your & java’s solution.

1 Like

Cool. I want to learn some Java too!
Here You can check the project deployed:

2 Likes