Jamming - INVALID_CLIENT: Invalid client error

Get Help React.js
#1

Hi,
I’m working though the final steps of the Jamming React project. I’ve followed the video pretty much line for line at the end. However, I’m getting an error every time I try to search. Spotify redirects me to a blank page with the message ‘INVALID_CLIENT: Invalid client’.

My code looks exactly like the video as far as I can tell. I’ve checked my client ID and redirect Uri and they all match. Using breakpoints in the console on chrome, it looks like the access token is coming back undefined every time I try to search.

Has anyone had this issue before and resolved it?

I’ve put the relevant section of my code below:

let accessToken;
const clientID = 'MY CLIENT ID'
const redirectUri = 'http://localhost:3000'

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            console.log('found an access token')
            return accessToken;
        }

        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
        console.log('Access token match:  ' + accessTokenMatch)
        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if (accessTokenMatch !== null && expiresInMatch !== null) {
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiresInMatch[1]);

            // Clear parameters to get 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}`
            }
#2

Hello, you didn’t include the full code for your search() method so I can’t verify if there are any other issues, but it’s probably this:

Since you’re using a template literal on multiple lines, that means all the line-breaks and spaces from your indentation also get included in the final string. The browser most likely will ignore the line-breaks, but the spaces usually get encoded to be a series of %20 for each of them (hex of 32, which is the code for space). You can check for it by examining the URL you’re redirected to when you attempt to search.

You could either put the template literal on one line or you could switch to concatenation instead.

1 Like
#3

Thanks for the help! I’d never have guessed that the template literal would include the line breaks and spaces… It works now.

1 Like