INVALID_CLIENT: Invalid client

[jeffhenrichs]

Plan

Premium

Country

'Merica

Device

Computer

Operating System

Windows 10

My Question or Issue

I have been getting this annoyingly persistent INVALID_CLIENT: Invalid client erroe.

This is my code

const client_id = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

const redirect_uri = "https://jammming-jjhenrichs.netlify.app";

let url = "https://accounts.spotify.com/authorize";

url += "?response_type=token";

url += `&client_id=${client_id}`;

url += "&scope=playlist-modify-public";

url += `&redirect_uri=${redirect_uri}`;

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, "/"); // This clears the parameters, allowing us to grab a new access token when it expires.

      return accessToken;

    } else {

      window.location = url;

    }

  },

  async search(term) {

    const response = await fetch(

      `https://api.spotify.com/v1/search?type=track&q=${term}`,

      {

        headers: {

          Authorization: `Bearer ${accessToken}`,

        },

      }

    );

    const data = await response.json();

    return data.tracks.items.map((track) => ({

      id: track.id,

      album: track.album.name,

      artist: track.artists[0].name,

      song: track.name,

      uri: track.uri,

    }));

  },

  async savePlaylist(name, trackUris) {

    if (!name || !trackUris.length) {

      return;

    }

    const headers = {

      Authorization: `Bearer ${accessToken}`,

      "Content-Type": `application/json`,

    };

    // Get the current user's id

    const response = await fetch("https://api.spotify.com/v1/me", {

      headers: headers,

    });

    const data = await response.json();

    const user_id = data.id;

    // Create the playlist

    const response_2 = await fetch(

      `https://api.spotify.com/v1/users/${user_id}/playlists`,

      {

        method: "POST",

        headers: headers,

        body: JSON.stringify({ name: name }),

      }

    );

    const data_2 = await response_2.json();

    const playlist_id = data_2.id;

    // Add the tracks to the playlist

    const response_3 = await fetch(

      `https://api.spotify.com/v1/playlists/${playlist_id}/tracks`,

      {

        headers: headers,

        method: "POST",

        body: JSON.stringify({ uris: trackUris }),

      }

    );

    const data_3 = await response_3.json();

    return data_3;

  },

};

export default Spotify;

Thank you for reading my code. I have built my app using React and everything works. However, I can't seem to host my app on Netlify all because of this INVALID _CLIENT: Invalid client error.

I made sure that my client_id and redirect_url on my app (the code) and in my project's dashboard are the same.

I even hardcoded my client id into my app so that the app will know that the client_id is well defined but no matter what I do this error shows up.

[Ximzend]

Have you added the redirect URI to the dashboard of your app, and clicked save?

[jeffhenrichs]

I have updated both the client id and the redirect uri in the dashboard and in my project

[Ximzend]

Thank you for the screenshot.

I see one difference: the URI in your code ends with a slash, but the URI in your dashboard doesn't have a slash.

Also, the URL when I go to your website shows client_id=undefined.

[jeffhenrichs]

For some reason, my client id no matter what I do comes out as undefined.

[jeffhenrichs]

I fixed the URI to include a backslash (/) at the end.