1

I have a HashRouter, which makes the URL add #, resulting in # to be added after the URL callback response_type query parameter.

If you change # to %23, it will lead to Invalid redirect URI.

How can I combine the use of HashRouter, and the Spotify Implicit Grant Flow?

I put my application on the github page: githubpage

agatheblues
  • 219
  • 1
  • 9
Jiang Wen
  • 57
  • 7

1 Answers1

1

A quick solution to fix this is, assuming your redirect URI is http://localhost:8000/#/callback, to add a Route to your HashRouter with a regex:

<Route path="/:access_token(access_token=.*)" component={ComponentWhichParsesTheURLAndExtractTheToken} />

This will direct any url of the type http://localhost:8000/#/access_token=to the desired component. The desired component should be the one where you parse the url to capture the token.

If you use the Spotify function getHashParams() from their implicit grant example to capture the hash params also change this line :

q = window.location.hash.substring(1);

to

q = window.location.hash.substring(2);

in order to remove the first character / from the window.location.hash path.

There is probably a better solution (see this answer for angular) for this problem, although I figured this is a quick hack that works for modest applications.

agatheblues
  • 219
  • 1
  • 9