Hi just finish the project but I am not getting authenticated on Spotify.
When I inspect the page I get this error:
Couldn’t find authed_user when parsing the JSON for PasswordVault Field Checker.
no search results show.
any help is much appreciated.
thanks
Hey, just one last try: Can you post the code with the corrections you did yesterday here, too? Let’s check if you missed a correction or if that code works on my end.
I recommend that you go back to your post from yesterday: When you corrected the formatting, you forgot to edit your sensitive accessToken it seems…
thank you so much I am frustrated with this exercise is too hard for me, but i guess good practice.
const clientId = ‘x’;
//const redirectUri = 'http://razzJamming.surge.sh';
const redirectUri = 'http://localhost:3000/';
let accessToken;
const Spotify = {
getAccessToken() {
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, '/');
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;
Ok, I try that, but with my own client id. Please remove yours from this post (and from the one from yesterday. That is sensitive data and should not be exposed publicly.
The code is fine. This is what I see if I replace my code in Spotify.js with yours (except the client id):
ok, I followed the video and create an account then created an app, then change the redirect to localhost. do I need to do anything else like create a token manually?
Yes, but I only use the Cliend ID in the code what about the client secret ? Do I use it in the code too?
I think the client secret is generated by Spotify. You should see it when you click show ‘client secret’. Nothing you need in the app.
Looking at the error message: Maybe you did not authorize your computer to use the saved Spotify password for this app? I assume that has something to do with the security settings on your computer.
What is this file: password-vault-file-checker.js? That is not part of the Jammming setup in the node modules. Where do you use that?
It may be then one of the other files like search
I don’t know how to authorize my computer the password is saved I go strait on the website so the password must be saved.
not seeing this file anywhere is not part of the project.
password-vault-file-checker.js
There is something odd, because there should not be a file named password-vault-file-checker.js. I wonder why there is a log from that file in your console.
What does your package.js look like?
Did you install the app by downloading it from Codecademy and then running ‘npm install’?
no I have not download any package from codecademy?
So how do you develop the app?
I download it form node then install node on terminal
Did you run ‘npx create-react-app jammming’?
yes, I use ‘npx create-react-app jammming’
