JAMMING-Invalid redirect URI- After trying to search for an artist I get Invalid redirect URI

Hi everyone, having some trouble with my project, it seams like a few more people are having the same issue, but no concrete answer.

This is the project: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

Everything works…excepts when I search for a song or artist… I get

INVALID_CLIENT: Invalid redirect URI

I think i double check the code, and also followed the video instructions, but there is something I’m missing.

Here is my spotify.js code

const clientId = '*************************************'; 
const redirectUri = 'http://localhost3000/';
let accessToken;



const Spotify = {
   getAccessToken() {
      if (accessToken){
         return accessToken
      }

      //Check for an 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(expiresInMatch[1]);
         //This clears the parameters, allowing us to grab a new access token when it expires.
         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) {
      try {
         const accessToken = Spotify.getAccessToken();
         return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,{headers: {Autorization: `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.artist[0].name,
               album: track.album.name,
               uri: track.uri
            }))
         })
      } catch (error) {
         console.log(error);
      }
   },

   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/user/${userId}/playlists`,
         {
            headers: headers,
            methode: '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;

Thank you for your help

1 Like

If you’re attempting to redirect to a site running on http://localhost:3000, you’ve missed the : out of your const redirectUri.

http://localhost3000/ isn’t a valid web address, which is possibly what the Spotify API is not liking. :slight_smile:

1 Like

Thank you so much, I tottally miss that one out… but it is still not working still gives me the same error
INVALID_CLIENT: Invalid redirect URI

I’m having the same problem when clicking on search.

Check that the URI stored in your code is exactly the same as the one you have entered in the details for your app on the spotify site. I can’t say for sure but I think the instructions may be worded in such a way as to cause you to enter them differently.

I had entered this in my code…

http://localhost:3000

and this on Spotify

http://localhost:3000/

Worth double checking.

2 Likes