I am working on integrating Spotify authentication using the implicit grant method as outlined in their documentation. I have implemented the relevant code into a React component and successfully logged into Spotify. However, I am facing an issue where the page does not redirect back to the specified redirect URI after authentication.
Even though I have added the URI to the list in the web console, there is no error displayed when using an unregistered URI. The page simply does not attempt to redirect at all.
How can I fix this issue and ensure that the redirection occurs after successful authentication?
The only thing being rendered on the page is the following component:
import React from "react";
const stateKey = "spotify_auth_state";
const SpotifyLogin = class extends React.Component {
ComponentDidMount() {
localStorage.removeItem(stateKey);
}
handleClick = () => {
const client_id = "e5abbee6e0fd4e4bbd080c6d212ca520";
const redirect_uri = "http://localhost:3000";
const scope = "user-read-private user-read-email";
const state = generateRandomString(16);
localStorage.setItem(stateKey, state);
const url = `https://accounts.spotify.com/authorize
?response_type=token
&client_id=${encodeURIComponent(client_id)}
&scope=${encodeURIComponent(scope)}
&redirect_uri=${encodeURIComponent(redirect_uri)}
&state=${encodeURIComponent(state)}`;
window.location = url;
};
render() {
return <button onClick={this.handleClick}>Log in</button>;
}
};
const generateRandomString = length => {
let text = "";
const possible =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
while (text.length <= length) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
};
export default SpotifyLogin;