Jammming project - invalid client error after Deploy section

I’ve almost finished Jammming project, i;m on step 99.

I’ve managed to deploy my project using surge, but when i click “search” i get this error:
INVALID_CLIENT: Invalid redirect URI

before deploying everyting was working fine, so i guess it has something to do with changing the redirectUri, I just can’t figure out what.

here’s my Spotify.js code and screenshots:

const clientId = '' ; //not published

const redirectURI = 'http://polite-plough.surge.sh/';

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) {



        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;

Have you already changed or added your surge domain in the Spotify API redirect uri from your Spotify Dashboard?

I got to depploy my jamming web but, when I changed to localhost and tryed to depploy again I couldn’t change the redirect uri in Spotify API Dashboard. It seems it doesn’t admit many words.

I’ll try to clean my cookies in my browser and try again.

I ran into the same problem. Have you found a solution?

Same here, did you figure it out?

Unfortunately, no. I stopped trying.

I managed to fix it; you have to change the redirect URI on both the online Spotify app and at the top of Spotify.js to ‘http://localhost:3000/callback/

No it doesn’t work…

that’s a shame :frowning_face:
good luck!

I have also encountered this error - has anybody solved this, or can they explain what is going wrong?

Frustrating to get to end of the course and spend all this time on a Capstone project only to discover that it doesn’t work.

I need closure!

try using concatenation instead of interpolation in url