Issue with the Spotify API

Language Help JavaScript
1

I’m working on the Jammming portfolio project, and I have the display working (It can display mock-data), but I can’t seem to get the Spotify API authorization calls to work, (Using the implicit grant flow). Also I have them set up as helper functions.

function generateRandomString(length) {
  const options = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
  let str = '';
  for (let i = 0; i < length; i++) {
    str += options[Math.floor(Math.random * options.length)];
  }
  return str;
}

async function getToken() {
  const client_id = process.env.CLIENT_ID;
  const redirect_uri = 'http://localhost:3000/';

  const state = generateRandomString(16);
  localStorage.setItem('state', state);

  const scope = 'playlist-modify-public playlist-modify-private';

  let url = 'https://accounts.spotify.com/authorize/';
  url += '?response_type=token';
  url += '&client_id=' + encodeURIComponent(client_id);
  url += '&scope=' + encodeURIComponent(scope);
  url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
  url += '&state=' + encodeURIComponent(state);

  let response = await fetch(url, {
    method: 'GET',
  })
  .then(response => {
    if (response.ok) {
      return response;
    }
    console.log(response)
  });

  console.log(response)
}
1 Like
2

Hey @dyenamite ,

What errors are being logged in the dev tools of your browser?

Michael

3

TypeError: Failed to fetch

4

Hmm, that’s not too helpful. It sounds like your app isn’t even able to make an API call. You can double check this by looking at the network tab.

Do you have a GitHub link to your entire project by chance?

5

I checked the network tab and it gives this error: CORS error: MissingAllowOriginHeader

Repository

6

Okay, so CORS basically means that the Spotify API isn’t allowing you to make the call. There really isn’t a way around this, and I think this is a red flag that maybe you’re using the API incorrectly.

Doing some research, I have seen in the Spotify dev forums that Spotify forces users to make server to server calls versus client to server calls. At least for some routes.

I noticed you’re using the /authorize route. I looked through the docs and I notice that they are using express.js in the example. I think maybe this route only handles server to server calls.

I looked through some other Jammming projects, and I noticed that successful projects are using the /api/token, which you can read more about here.

Is it possible you want to use the /api/token route instead?

Also, right now you’re app is doing an API request every time you enter a character. You’re probably going to fix that latter. It might be best to try and test the Spotify API with Postman, until then since you can easily surpass your call limit.

Let me know what you think!

@jmnewman101 I noticed you had used /api/token in your project. What’s your opinion here?

Michael

1 Like
7

Glancing through the repository the way you went about this is very different from what I did to make this. For your API I’m not seeing where you are bringing in your Client ID or your Client Secret. You will need both of those in order to get the API calls to work.

To be honest though, I got most of my information for how to bring in the API from various Youtube videos - this one is what Really got me to see what to do to get it working. Be aware though - this tutorial is only going to get you to be able to search Artists and get their albums back. You will have to do some research to get anything else working.

Also, the way they get you to bring the API key/Secret in is not secure to upload to GitHub. I would recommend, for a portfolio project only, to store any API keys in a .env file within your root folder. You can add it to the .gitignore file which is also in the root so it will not be pulled to Github. If you need help with setting that up I’m sure we can assist.

If you would like to glance at my (very imperfect) solution for this you can take a look at my repository. I wouldn’t take it as gospel (definitely do not copy, never copy), but it doesn’t hurt to see how someone else solved an issue.

8

Thanks for the help, I took a long break, rewrote the code, and completely forgot about this post, sorry for any inconvenience this may have caused. Also, here’s the final project

9

I’m not sure this is working the way you want it to - it’s only pulling the default ‘Down Below’ Over all I would say you got something going here. I never did get to a point where I could get it to play the song at all, not even a preview. It’s very good work so far! Don’t feel like you have to make it 100% perfect now but it may be something to come back to

10

This is due to the spotify api requiring that each users’ email address are added to an allowlist with a maximum of 25.

1 Like