How to handle authentication with callback uri in react router

Viewed 1285

I created my first react app that use spotify api to display data but i have problem with deploying it to netlify or any server Te authentication flow: 1. User click the button on my app that redirects him to spotify/auth 2. Spotify auth check permissions and prompt login button, when succesful its redirect user to url of my app with /localhost at the end 3. i use react router and switch component to handle that /callback route and save token and eveything On localhost it works just fine but on live-server or netlify there is when error when spotify sends user to /callback

This is my react routes set up

It says "Cannot GET /callback"

 <Router>
    <Provider store={store}
        <Switch>
          <Route exact path="/" component={LoginView} />
          <Route exact path="/callback" component={CallBack} />
          <PrivateRoute path="/app">
            <AppView />
          </PrivateRoute>
        </Switch>
    </Provider>
  </Router>

And this is the function that launches when user click loggin button :

  handleLogin = () => {
// redirect user to spotify to authenticate them
const params = queryString.stringify({
  client_id: "client_id,
  response_type: "token",
  redirect_uri: `${window.location.origin}/callback`,
  scope: "user-top-read playlist-modify-public playlist-modify-private",
});
window.location = `https://accounts.spotify.com/authorize?${params}`;

I really cant figure out why is it working that way

0 Answers
Related