Hi! So I managed to get to almost the end of the Jamming project and I am having issues when try to use the search bar. I can load the page normally but when I search for any artists the console says gives back a 401 error that when I expand says that the token is not defined.
I rewrote the spotify.js file according to the video but without luck. Seems to me that the issue is within my search function, in particular the line that is marked as code. My Spotify.js is as follows
const clientID = 'myID'
const redirectURI = 'http://localhost:3000/'
let accessToken
const Spotify={
getAccessToken(){
if(accessToken){
return accessToken
}
// check for access token match
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(accessTokenMatch[1])
window.setTimeout(() => accessToken = '', expiresIn *1000);
window.history.pushState('Access Token', null, '/')
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 accToken = Spotify.getAccessToken();
**return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,**
{header: {Authorization: `Bearer ${accToken}`
}}
).then(response => {
return response.json()
}).then(jsonResponse => {
if (!jsonResponse.tracks){
return [];
}
return jsonResponse.tracks.items.map( track=> ({
id: track.id,
name: track.name,
artists: 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
For futher info here is the link to the whole project. GitHub - GiselaCA/Jamming.
I have seen other threads talking about the same issue but I never seem to find a definite answer. Also would like to mention that I did redirected to the localhost address in the spotify settings.
Thanks in advance!