Passing Access Token from an api to different pages

Question

So I'm currently using the Spotify API with reactJS and get the access token of a user when the login is authenticated by Spotify, it redirects to the first page that I set it to, ('/') of Component={Home}. But from that Home page, I want to route to a different page with the path '/playlist' onClick of a button in which I push the url by,

this.props.history.push('/playlist/#access_tokens=' + spotifyApi.getAccessTokens())

This is the only way I got it to be with the access token passing in the URL.

Is this bad practice?

Answer 1

it's hard to understand your goals for me, but if you want to pass access_token only by url, you can use state to hide token from the user

this.props.history.push({
  pathname: '/playlist',
  state: {
    accessTokens: spotifyApi.getAccessTokens()
  }
})

and then get it by the next way

const location = useLocation();
const tokens = location.state && location.state.accessTokens;

But i can't understand why do not you pass your token to any management library like redux, mobx or some other browser storage (localStorage, sessionStorage)?