Im following the sample very closely but Im facing a loading error for authorisation token. https://developer.spotify.com/documentation/web-api/tutorials/code-pkce-flow
const generateRandomString = (length) => {
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const values = crypto.getRandomValues(new Uint8Array(length));
return values.reduce((acc, x) => acc + possible[x % possible.length], "");
}
const codeVerifier = generateRandomString(64);
const sha256 = async (plain) => {
const encoder = new TextEncoder()
const data = encoder.encode(plain)
return window.crypto.subtle.digest('SHA-256', data)
}
const base64encode = (input) => {
return btoa(String.fromCharCode(...new Uint8Array(input)))
.replace(/=/g, '')
.replace(/\+/g, '-')
.replace(/\//g, '_');
}
const hashed = await sha256(codeVerifier)
const codeChallenge = base64encode(hashed);
const clientId = 'CLIENTIDHERE';
const redirectUri = 'http://localhost:3000';
const scope = 'user-read-private user-read-email';
const authUrl = new URL("https://accounts.spotify.com/authorize");
const url = "https://accounts.spotify.com/api/token";
// generated in the previous step
window.localStorage.setItem('code_verifier', codeVerifier);
const params = {
response_type: 'code',
client_id: clientId,
scope,
code_challenge_method: 'S256',
code_challenge: codeChallenge,
redirect_uri: redirectUri,
}
authUrl.search = new URLSearchParams(params).toString();
window.location.href = authUrl.toString();
const urlParams = new URLSearchParams(window.location.search);
let code = urlParams.get('code');
const getToken = async code => {
// stored in the previous step
let codeVerifier = localStorage.getItem('code_verifier');
const payload = {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
client_id: clientId,
grant_type: 'authorization_code',
code,
redirect_uri: redirectUri,
code_verifier: codeVerifier,
}),
}
try {
const body = (await fetch(url, payload)).json();
//alert(JSON.stringify(response))
localStorage.setItem('access_token', body.access_token);
} catch (error) {
alert(error)
}
}
async function getProfile() {
let accessToken = localStorage.getItem('access_token');
const response = await fetch('https://api.spotify.com/v1/me', {
headers: {
Authorization: 'Bearer ' + accessToken
}
});
const data = await response.json();
return data
}
getToken(code)
const profileData = getProfile()
export default profileData