Something went wrong, and project didn’t response to my request
let accessToken = "";
export const Spotify = {
getAccessToken() {
if (accessToken) {
return;
}
const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
console.log(accessTokenMatch, expiresInMatch);
if (accessTokenMatch && expiresInMatch) {
accessToken = accessTokenMatch[1];
const expiresIn = Number(expiresInMatch[1]);
console.log(accessToken, expiresIn);
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=e2320425002547288f97327c48755d74&response_type=token&scope=playlist-modify-public&redirect_uri=https%3A%2F%2Fmusic-wibu.surge.sh`;
window.location = accessUrl;
}
},
search(searchTerm) {
let spotifyTracks = fetch(
`https://api.spotify.com/v1/search?q=${searchTerm}&type=track`,
{
headers: { Authorization: `Bearer ${accessToken}` },
}
)
.then((response) => response.json())
.then((jsonResponse) => {
if (!jsonResponse) {
return [{}];
}
let tracks = jsonResponse.tracks.items.map((track) => ({
id: track.id,
name: track.name,
artist: track.artists[0].name,
album: track.album.name,
uri: track.uri,
}));
return tracks;
})
.catch((error) => {
console.log("Spotify search error");
});
return spotifyTracks;
},
async savePlaylist(playlistName, tracksUri) {
if (!(playlistName && tracksUri)) return;
// Get spotify user Id
let userId = await fetch("https://api.spotify.com/v1/me", {
headers: {
Authorization: `Bearer ${accessToken}`,
},
})
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.id)
.catch((error) => {
console.log("User id Fetch error");
});
// Create playlist
let playlistId = await fetch(
`https://api.spotify.com/v1/users/${userId}/playlists`,
{
method: "POST",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
name: playlistName,
}),
json: true,
}
)
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.id)
.catch((error) => {
console.log("Create Playlist error");
});
await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, {
method: "POST",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
uris: tracksUri,
}),
})
.then((response) => {
console.log("Songs added to playlist");
})
.catch((error) => {
console.log("Fetch error while adding songs to the playlist");
});
},
};
It returns status 403 status code at search endpoint. Could anyone help me? Thank