INVALID_CLIENT: Invalid redirect URI with Netlify?!

Hey everyone,

Has anyone managed to deploy Jamming on Netlify? I thought it would be easier to do it on that platform due to continuous integration and also because i have more experience in it. I noticed after deployment I got INVALID_CLIENT: Invalid redirect URI after attempting to search- which i’ve noticed is common error amongst other students.

I’ve tried concatenation over interpolation and vice versa and it still hasnt managed to resolve itself. I’ve also tried adding /callback/ in my redirectUri

This is my code in Spotify.js:

const clientId = process.env.REACT_APP_CLIENTID_KEY;

const redirectUri = "http://localhost:3000/";
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 parameters allowing user to grab 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) {
    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 }),
              }
            );
          });
      });
  },

  componentDidMount() {
    window.addEventListener("load", () => {
      Spotify.getAccessToken();
    });
  },
};

export default Spotify;



I resolved my own issue. I added the following:

const redirectUri = "http://localhost:3000/callback";

and proceeded to update my redirectURI in the spotify api settings (located in your dashboard) when i initially set up the project- toops!

Redirect URIs: http://localhost:3000/callback

Seems to all be working!