Search code examples
apiauthenticationherokuoauthspotify

Authorizing with Spotify API


I've set up authorization through Spotify on my project, it works locally and on my Heroku staging environment but not my Heroku production environment. It either times out or remains on a blank page. Was able to get it to Spotify Login through Facebook once, but upon submission it times out. Have no idea what may be causing this, wondering if its because a custom domain was added to the app.

   
   onSuccess = (response, mutation) => {
     this.setState({error: false, loading: true})
     mutation({
       variables: { accessToken: response.access_token}
     })
     .then((res) => {
       this.setState({loading: false})
       this.props.history.push(`/`)
       window.location.reload();
     })
     .catch((error) => {
       this.setState({loading: false})
       this.setState({error: true, errorMsg: "Something went wrong, please try again"})
     })
   }

  onFailure = (response) => {
    this.setState({click: false, error: true, errorMsg: "Something went wrong, please try again"})
  }
   
   
   
   <SpotifyLogin
      clientId={process.env.REACT_APP_SPOTIFY_ID}
      onClick={() => this.setState({click: true})}
      redirectUri={process.env.REACT_APP_SPOTIFY_URL || "http://localhost:3000/"}
      onSuccess={(data) => this.onSuccess(data, mutation)}
      onFailure={this.onFailure}
      scope="user-read-private user-top-read user-read-email user-read-playback-state"
      className="onboarding__spotify-cta"
    />

blank page upon login


Solution

  • If the problem are not in you dev environnement but on your prod, it's cause you have a probleme with your redirect uri, check your process.env.REACT_APP_SPOTIFY_URL if it's the good one