Error - INVALID_CLIENT: Invalid redirect URI

[cmorbaab]

Hi, I'm currently going through the Spotify Web API tutorial. I have set up everything and then tried to run the application. I am able to get to Login Link, but then after I login I am redirected to a page with the error "INVALID_CLIENT: Invalid redirect URI". I have set up my application on My Dashboard and created the redirect URI: "http://spotifysentiment.com/callback/". However, after setting my redirect_uri to 'http://spotifysentiment.com/callback' in app.js I still get the same error. Am I doing something wrong?

[wandarkaf]

Hi there @cmorbaab . Remember that this redirect need to be handle by your app. In the particular case of authorization_code, the callback is taking care of by the context of your localhost, in specific by a express route defined as http://localhost:8888/callback. In your spotify developer dashboard, the redirect URI needs to be defined as http://localhost:8888/callback. Otherwise, node won't understand the route and will display INVALID_CLIENT: Invalid redirect URI. Hope it helps.

[CajetanRodrigues]

Well, I have done the same @wandarkaf and it still says the same, any idea why?

[CajetanRodrigues]

Well, I have done the same @wandarkaf and it still says the same, any idea why?

Solved!, all I had to do is go to the Spotify app and edit settings, then add the callback URL there as well

[avacordero90]

would be nice to update the instructions to include this step.

[Samantha-fu]

@CajetanRodrigues Hi ,I also met the problem . how could i solve the "INVALID_CLIENT: Invalid redirect URI ".I have edited settings in Spotify . but still show wrong.can you show the details to solve the problem?

[zuha-khalid-au3]

@Samantha-fu
Put const redirectUri = 'http://localhost:8888/callback'; in your app.js and same in Spotify dashboard settings as well. It will work

[kirildobrev919]

Hi Guys,
i had the same problem. I've put my redirect uri in my Spotify app and added it to my request and now I'm getting: Missing required parameter: client_id.

My redirect uri in the code and app settings is: http://localhost:3000/
My request url is: const accessUrl = https://accounts.spotify.com/authorize? client_id=${clientID}&response_type=token& scope=playlist-modify-public&redirect_uri=${redirectURI}
I have client_id but still getting this - Missing required parameter: client_id.
Does anybody know what could be wrong?

[Blazer-007]

@kirildobrev919 I don't know whether it will work for you or not .

Just try changing string interpolation to string concatenation in const accessUrl line.

It worked for me.

[kirildobrev919]

@Blazer-007 I tried your way and it worked. Then I tried interpolation again and it was fine. Then I realized that I accidentally inserted white space in my URL while doing it in several readable lines. Looks like the problem was there.

[Blazer-007]

@kirildobrev919 Glad to know that it works but for me when I rechanged it to interpolation it didn't work and neither I had spaces in url. I don't know why.

[kirildobrev919]

@Blazer-007 Very strange, there should be a logical explanation but nothing comes to mind. Did you checked your backticks or if something is written wrong while using interpolation.

[Haoui-Hamza]

@Blazer-007 Very strange, there should be a logical explanation but nothing comes to mind. Did you checked your backticks or if something is written wrong while using interpolation.

export const authEndpoint =
"https://accounts.spotify.com/authorize" ;

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

const clientId = "xxxxxxxx" ;

const scopes = [
"user-read-currently-playing",
"user-read-recently-played",
"user-read-playback-state",
"user-top-read",
"user-modify-playback-state",
] ;

export const loginUrl = ${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true

it's not working for me

[kirildobrev919]

@Haoui-Hamza Did you put your url in backticks while using interpolation like:
export const loginUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`
You can try first only with one scope and when it starts working add the rest. I mean try it with less parameters and add the rest of them when you see that it is works.
Also never share information like your clientId.

[sumitInovate]

Ya thanks everyone! I have edited the redirect Uri after uploading to the firebase to get the link and then copied the link to the spotify redirected Uri and also then edited the redirected uri link in my code. Then, I have reuploaded it which made it running without and Problem!
https://spotify-clone-e60e9.web.app/

[jesse45]

I am having similar issues regarding the redirect Uri. I am running my project on an android simulator and my redirect uri isn't work. what would be the redirect uri if im running on a simulator. I am able to enter my username and password of the spotify login and then after that it gives a message of "Something went wrong trying to finish signing in. Please close the screen to go back to the app". I think it has something to do with the redirect uri but i can't figure it out

[cgi1]

If you come around here with problems in connecting openhab:

I added

http://192.168.178.30:8080/connectspotify

as Redirect URI in Spotify Developer Dashboard and it worked perfect.

[tyagi2141]

Hi Guys,
i had the same problem. I've put my redirect uri in my Spotify app and added it to my request and now I'm getting: Missing required parameter: client_id.

My redirect uri in the code and app settings is: http://localhost:3000/
My request url is: const accessUrl = https://accounts.spotify.com/authorize? client_id=${clientID}&response_type=token& scope=playlist-modify-public&redirect_uri=${redirectURI}
I have client_id but still getting this - Missing required parameter: client_id.
Does anybody know what could be wrong?

you just need to look at the URI in https://developer.spotify.com/dashboard/ which you have added while editing the info of the URL it should be the same which you are passing as a parameter i

[itsmesonia]

Well, I have done the same @wandarkaf and it still says the same, any idea why?

Solved!, all I had to do is go to the Spotify app and edit settings, then add the callback URL there as well

This helped me so much thank you!

[saltcod]

My issue was forgetting a trailing slash in the request url.

On spotify:
http://localhost:3005/

Request
https://accounts.spotify.com/authorize?client_id=XXXXXXXXXXXXXXXXX&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3005/&scope=user-read-currently-playing%20user-top-read

Note the trailing slash in both places.

[Kumar2106]

I am getting the same issue guys, i have put the redirectUri as this

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

in the react app and i have put the same redirectUri in the dashboard of the spotify. I am encountering the same issue. Any idea what is going wrong.

[Kumar2106]

Hi Guys,
i had the same problem. I've put my redirect uri in my Spotify app and added it to my request and now I'm getting: Missing required parameter: client_id.

My redirect uri in the code and app settings is: http://localhost:3000/
My request url is: const accessUrl = https://accounts.spotify.com/authorize? client_id=${clientID}&response_type=token& scope=playlist-modify-public&redirect_uri=${redirectURI}
I have client_id but still getting this - Missing required parameter: client_id.
Does anybody know what could be wrong?

There is one mistake tha you did is that you gave space between the question mark and client_id, just remove it and the code will run perfectly fine

[cdeeran]

I just encountered this error today as well. I was able to get around it by going into my dashboard, removing the uri, saving and then adding the uri back in and saving. I don't know why, but it seemed like the uri "expired" if that makes sense.

[HARrrrisoon39]

If still the error occurs simply delete the Spotify app in the dashboard and recreate the new app with a new client id.
This thing solved my problem.

[vishwavrat2802]

Ya thanks everyone! I have edited the redirect Uri after uploading to the firebase to get the link and then copied the link to the spotify redirected Uri and also then edited the redirected uri link in my code. Then, I have reuploaded it which made it running without and Problem!
https://spotify-clone-e60e9.web.app/

please help us with the steps

[ouiam-dot]

@vishwavrat2802
The tricky part is clicking "add" after writing the callback url in the dashboard's app. I used to save without clicking add and that's why I kept getting the error.

[qunm00]

Another thing to check is the redirect_uri when you request code/token from Spotify must be the same as redirect_uri when you send code/token to Spotify. That's what helped me.

[einartech]

My issue was forgetting a trailing slash in the request url.

On spotify:
http://localhost:3005/

Request
https://accounts.spotify.com/authorize?client_id=XXXXXXXXXXXXXXXXX&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3005/&scope=user-read-currently-playing%20user-top-read

Note the trailing slash in both places.

This worked fine for me. Thank u so much!!!
Also added some parameters:

const loginURL="https://accounts.spotify.com/authorize?client_id=XXXXXXXXXXXXXXXXX&response_type=code&redirect_uri=http%3A%2F%2Flocalhost:3000/&scope=user-read-currently-playing%20user-read-recently-played%20user-read-playback-state%20user-top-read%20user-modify-playback-state"

And in spotify:

http://localhost:3000/

[patricksousamacedo]

What worked for me was editing the settings on the spotify panel and adding the url: http://localhost:3000/callback/
On the dashboard and in the application I'm developing

[davidseek]

My problem was, my URI was different for the call to get the "code", then it was from getting the "token". Just adding this to remind readers to double check such small variables.

[teymurov27]

just make sure redirectURLs both are the same. worked for me thanks @patricksousamacedo

[ghl0pes]

this problem was available to me and I noticed that I accidentally registered in the dashboard the redirect to 'https://localhost:xxxx/callback', with https. It was my mistake, but it could be happening to someone else.

[sdfgeoff]

After debugging this for a rather long time, I discovered that the POST to /api/token has the parameter redirect_uri rather than redirect_url 😄

[shourya28]

What worked for me.

• Adding a trailing slash to http://localhost:8888/callback/.
• Using http://localhost:8888/callback/ instead of https://localhost:8888/callback/ in the Dashboard. (HTTP instead of HTTPS)