INVALID_CLIENT: Invalid redirect URI

[KeirAnsell]

Hi,

Unfortunately I seem to be getting the INVALID_CLIENT: Invalid redirect URI error when clicking the Login with Spotify button.

I've had a look at a couple of other issues filed here, double checked what I have configured but I'm still getting this error so I'm hoping you might be able to spot something that I'm just not seeing! :)

Spotify Keys:

Spotify Redirect URI:

Netlify Environment Variables:

Netlify Site URL:

Regarding the Redirect URI, I've tried it with and without the /callout/ on the end and with/without a trailing /

If anyone is able to let me know if there's anything obvious I'm doing wrong or has any suggestions, that'd be awesome 🙇

[vwillcox]

Please see my pull request. You can fix this by changing two lines

Authorise.vue line 94: (fetchData.redirect_uri = window.location.origin +'/')

line 184:

searchParams.append('redirect_uri', window.location.origin + '/')

This took me HOURS to find LOL! But my pain is your gain!

[KeirAnsell]

@vwillcox

Hey there! Thanks for the quick reply! 🙇

I've made the two changes you mentioned but unfortunately I'm still getting an error (a new one at least 😅)

response_type must be code or token

I have tried with and without /callback on the end of the Redirect URI but no joy 😬

[vwillcox]

Just as a test, try forking my version and see if that works (same instructions)

https://github.com/vwillcox/Nowify

[KeirAnsell]

@vwillcox I'll give it a try, thanks! :)

[KeirAnsell]

@vwillcox I've forked your version and set it up under a new site in Netlify. Now I'm getting INVALID_CLIENT: Invalid client 😬

I've added the Spotify Key's as the Variables in Netlify and setup the callback URL as the main site URL provided by Netlify so I'm not sure what I've missed here haha

[vwillcox]

is that before or after authrorisation (or during)?

[KeirAnsell]

@vwillcox that’s after clicking the Login to Spotify button

[vwillcox]

Have you confirmed you are using the correct Spotify development ID's and have refreshed your Netlify site? On the admin panel in Spotify developer is a section to add authorized accounts. If your dev account is not in live mode, you need to add your account there.

[KeirAnsell]

@vwillcox Apologies - I hadn't redeployed after entering the Variables 🤦 I've redeployed now and everything is working perfectly!

I've no idea what differs between what I had previously (with your changes) and what you have but yours is definitely working so thank you so much for the help! 🙇

[vwillcox]

I've put a pull request in, so hopefully, @jonashcroft will be able to test, confirm and merge soon!

[KeirAnsell]

Fingers crossed! 🤞 Great work figuring out a fix for it! :)

[jonashcroft]

Hey @KeirAnsell - apologies for getting back to you quite late on this.

Can I confirm if your Redirect URI had a trailing slash in the URL, and if your environment does also?

I've only been able to recreate this issue when the URLs don't match because one has a trailing slash and one doesn't.

Link for reference https://github.com/jonashcroft/Nowify/pull/32#issuecomment-1090815744

Thanks!

[KeirAnsell]

@jonashcroft No problem at all! I tried with and without the trailing slash but unfortunately got the same error through unfortunately!

@vwillcox has managed to fix the issue so I do have it working and he's done a Pull Request here so that should hopefully help pinpoint the exact cause of the issue! :)

[LeMikoo97]

@vwillcox I have had the same issue but every fix mentioned in this thread didn't resolve it for me. I even forked your repository and included redirect URIs with '/' and 'callout' in every configuration. I authorized my spotify account and double checked keys.

[KeirAnsell]

@vwillcox I have had the same issue but every fix mentioned in this thread didn't resolve it for me. I even forked your repository and included redirect URIs with '/' and 'callout' in every configuration. I authorized my spotify account and double checked keys.

Have you tried forking my one? Mine is all up and running after @vwillcox helped! Might be worth a try?

[LeMikoo97]

@vwillcox I have had the same issue but every fix mentioned in this thread didn't resolve it for me. I even forked your repository and included redirect URIs with '/' and 'callout' in every configuration. I authorized my spotify account and double checked keys.

Have you tried forking my one? Mine is all up and running after @vwillcox helped! Might be worth a try?

Ill give that a try

[LeMikoo97]

@vwillcox I have had the same issue but every fix mentioned in this thread didn't resolve it for me. I even forked your repository and included redirect URIs with '/' and 'callout' in every configuration. I authorized my spotify account and double checked keys.

Have you tried forking my one? Mine is all up and running after @vwillcox helped! Might be worth a try?

Ill give that a try

Still the same error code - INVALID_CLIENT: Invalid redirect URI

[jonashcroft]

@vwillcox I have had the same issue but every fix mentioned in this thread didn't resolve it for me. I even forked your repository and included redirect URIs with '/' and 'callout' in every configuration. I authorized my spotify account and double checked keys.

Have you tried forking my one? Mine is all up and running after @vwillcox helped! Might be worth a try?

Ill give that a try

Still the same error code - INVALID_CLIENT: Invalid redirect URI

Can you please share the URLs that you're working with?

The URL that you've added in your Spotify Dashboard and the URL of your local environment? They need to match exactly - this includes protocol and any trailing slashes in the URL.

Regarding your earlier post - the '/callback' that Spotify adds to the dashboard is an example URL.

Regarding the issue in the OP/PR, I'm still away from my machine so haven't had time to investigate/merge (sorry!), though I haven't been able to recreate it.

[jonashcroft]

Coming back to this - looks like the Spotify Developer dashboard will apparently automatically add a trailing slash to the URL upon saving. This would makes sense as I see some people have issues with the URL and cannot authorise, whereas others have no issues.

More than happy to come back to this if the issue is something else, but for now I've Updated the README. to reflect this.

[KeirAnsell]

@jonashcroft Thanks for looking in to this! Next time I come to do a new installation I'll see how it goes with the updated instructions :)