Jamming Project 403 Error and 404

Hi Guys,
I really would like some help. I can’t get the Spotify API to work. I got it to work on local host once. But then when I deployed it to GitHub it only worked for me. I would really like some help because I have been working on this for a week now. None of the fixes I saw on the forums have worked so far.
here is my code:

const client id:"",
const redirectUri = process.env.NODE_ENV === ‘development’ ? ‘http://localhost:3000/’ : ‘Jamming’;
let accessToken;

const Spotify = {
getAccessToken() {
console.log(redirectUri);
if (accessToken) {
return accessToken;
}

const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (accessTokenMatch && expiresInMatch) {
  accessToken = accessTokenMatch[1];
  const expiresIn = Number(expiresInMatch[1]);
  window.setTimeout(() => accessToken = '', expiresIn * 1000);
  window.history.pushState('Access Token', null, '/'); // This clears the parameters, allowing us to grab a new access token when it expires.
  return accessToken;
} else {
  const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
  window.location = accessUrl;
}

},

search(term) {
const accessToken = Spotify.getAccessToken();
return fetch(https://api.spotify.com/v1/search?type=track&q=${term}, {
headers: {
Authorization: Bearer ${accessToken}
}
}).then(response => {
return response.json();
}).then(jsonResponse => {
if (!jsonResponse.tracks) {
return ;
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artist: track.artists[0].name,
album: track.album.name,
uri: track.uri
}));
});
},

savePlaylist(name, trackUris) {
if (!name || !trackUris.length) {
return;
}

const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
let userId;

return fetch('https://api.spotify.com/v1/me', {headers: headers}
).then(response => response.json()
).then(jsonResponse => {
  userId = jsonResponse.id;
  return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
    headers: headers,
    method: 'POST',
    body: JSON.stringify({name: name})
  }).then(response => response.json()
  ).then(jsonResponse => {
    const playlistId = jsonResponse.id;
    return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {
      headers: headers,
      method: 'POST',
      body: JSON.stringify({uris: trackUris})
    });
  });
});

}
};

export default Spotify;

Hi Nick,

for future posts, please take a look at this link about how to format code in posts. That makes it easier to read your code and increases your chances of getting help.

If you deployed your app, it probably isn’t running on localhost anymore. You have your local host as the redirect URI for development and ‘Jamming’ for production. I guess you have to use an URL instead.

How did you deploy the App and where is it hosted now?

Hi Mirja! I definitely will format my code like that next time. I am sorry. My code is hosted in GitHub. So now I ran the deployment again with my github url there. The website and all of the css prints. The search bar also works. It prints the value i typed in the search and my url to my github. Then gives me the 403 error

I just developed that project locally and never deployed it, so I am not exactly sure. You had to add the localhost to the Spotify settings. Probably you have to do that with the remote URL, too.

Yea I had the project working remotely. I really want it to work when I deploy it. So I can show the work i put into a Javascript and React project for my Resume.

So what about editing the Spotify settings? Did you do that and no success?

I edited the Spotify Settings but I don’t have a large understanding how authorization stuff works so I am lost.