INVALID_CLIENT: Invalid client

jeffhenrichs — Tue, 07 Nov 2023 04:04:35 GMT

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.

Re: INVALID_CLIENT: Invalid client

Ximzend — Tue, 07 Nov 2023 16:02:30 GMT

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

Re: INVALID_CLIENT: Invalid client

jeffhenrichs — Tue, 07 Nov 2023 19:51:27 GMT

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

Re: INVALID_CLIENT: Invalid client

Ximzend — Tue, 07 Nov 2023 20:24:32 GMT

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.

Re: INVALID_CLIENT: Invalid client

jeffhenrichs — Tue, 07 Nov 2023 20:37:20 GMT

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

Re: INVALID_CLIENT: Invalid client

jeffhenrichs — Tue, 07 Nov 2023 20:39:26 GMT

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

topic Re: INVALID_CLIENT: Invalid client in Spotify for Developers

INVALID_CLIENT: Invalid client

Re: INVALID_CLIENT: Invalid client

Re: INVALID_CLIENT: Invalid client

Re: INVALID_CLIENT: Invalid client

Re: INVALID_CLIENT: Invalid client

Re: INVALID_CLIENT: Invalid client