Access hash params in React ( /callback#token=1234&...etc)

Question

I'm trying to fetch a Oauth token from an API using password grant. When I get redirected back to the /callback, React is converting/redirecting the ?..query to a #..query:

For example:

http://localhost:3000/callback#access_token=eyJ0eXAiOi...&token_type=Bearer&expires_in=31535999

How do I access these params in my components then? I can see that there is a full value of the hash param string in props.location.hash ... should I just slice up the string, or is there a React way of doing this?

Answer 1

Try query-string:

import queryString from 'query-string';

queryString.parse(props.location.hash)

// { access_token: '...', token_type: '...' }

there are also similar packages: querystring, qs.

Answer 2

Esiest way:

let params = new URLSearchParams(window.location.hash);
let token = params.get('access_token');