I’m developing a music application that utilizes Spotify’s Web API. The functionality works fine with my own Spotify account, but I encounter issues when others attempt to access it.
Currently, here’s the code I’m working with:
import fetch from 'node-fetch';
import {onMount} from 'svelte';
let userData;
let accessToken;
let authType;
let APP_ID = 'your-client-id-here';
let AUTH_URL = 'https://accounts.spotify.com/authorize';
let CALLBACK_URL = 'http://localhost:3000/';
let USER_API_ENDPOINT = 'https://api.spotify.com/v1/me/';
let PERMISSIONS = [
'playlist-read-private',
'user-read-playback-state',
'user-top-read',
'user-read-recently-played'
];
let ENCODED_PERMISSIONS = PERMISSIONS.join('%20');
function parseUrlHash(hashString) {
let cleanHash = hashString.substring(1);
let urlParams = cleanHash.split('&');
let parsedParams = urlParams.reduce((result, param) => {
let [paramKey, paramValue] = param.split('=');
result[paramKey] = paramValue;
return result;
}, {});
return parsedParams;
}
onMount(() => {
if (window.location.hash) {
let {access_token, token_type} = parseUrlHash(window.location.hash);
accessToken = access_token;
authType = token_type;
}
});
function startAuth() {
window.location = `${AUTH_URL}?client_id=${APP_ID}&redirect_uri=${CALLBACK_URL}&scope=${ENCODED_PERMISSIONS}&response_type=token&show_dialog=true`;
}
function fetchUserPlaylists() {
fetch(USER_API_ENDPOINT, {
headers: {
'Authorization': `${authType} ${accessToken}`
}
})
.then(response => response.json())
.then(data => {
userData = data.items;
console.log(data.items);
})
.catch(error => {
console.error(error);
});
}
The challenge arises when regular users without developer accounts try logging in and accessing their playlists, resulting in the error: “User not registered in the Developer Dashboard”. It appears to work only for my account since I’m the developer. What steps can I take to ensure that any Spotify user can connect their account successfully? I assumed OAuth would enable this permission granting.