Im using the spotify PKCE authentication for my website. However, no matter if I press agree or cancel, it just keeps redirecting back to the authentication page. I am trying to make a website that will recommend music based on certain criteria and play said music, should I even be using the PKCE authentication or a different one? I’m very new to this stuff.
const clientId = '';
const code = undefined;
if (!code) {
redirectToAuthCodeFlow(clientId);
} else {
const accessToken = getAccessToken(clientId, code);
const profile = fetchProfile(accessToken);
populateUI(profile);
}
async function redirectToAuthCodeFlow(clientId) {
// TODO: Redirect to Spotify authorization page
const verifier = generateCodeVerifier(128);
const challenge = await generateCodeChallenge(verifier);
localStorage.setItem("verifier", verifier);
const params = new URLSearchParams();
params.append("client_id", clientId);
params.append("response_type", "code");
params.append("redirect_uri", "http://127.0.0.1:3000/index.html");
params.append("scope", "user-read-private user-read-email");
params.append("code_challenge_method", "S256");
params.append("code_challenge", challenge);
document.location = `https://accounts.spotify.com/authorize?${params.toString()}`;
}
function generateCodeVerifier(length) {
let text = '';
let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < length; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
async function generateCodeChallenge(codeVerifier) {
const data = new TextEncoder().encode(codeVerifier);
const digest = await window.crypto.subtle.digest('SHA-256', data);
return btoa(String.fromCharCode.apply(null, [...new Uint8Array(digest)]))
.replace(/+/g, '-')
.replace(///g, '_')
.replace(/=+$/, '');
}
async function getAccessToken(clientId, code) {
// TODO: Get access token for code
const verifier = localStorage.getItem("verifier");
const params = new URLSearchParams();
params.append("client_id", clientId);
params.append("grant_type", "authorization_code");
params.append("code", code);
params.append("redirect_uri", "http://localhost:5173/callback");
params.append("code_verifier", verifier);
const result = await fetch("https://accounts.spotify.com/api/token", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: params
});
const { access_token } = await result.json();
return access_token;
console.log(access_token);
}
Most of the code is copied from spotify’s website.