[GH-ISSUE #36] I've tried using it this way #21

Closed
opened 2026-02-27 19:06:28 +03:00 by kerem · 4 comments
Owner

Originally created by @RhowindMacDermott on GitHub (Jun 28, 2025).
Original GitHub issue: https://github.com/Aran404/SpotAPI/issues/36

Attempting to get playlists...
Spotify Login Response: {'error': 'errorUnknown'}
SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'}
Error in /api/playlists:
Traceback (most recent call last):
File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists
login = get_login_instance(auth_data, auth_method)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance
login_instance.login() # Perform the login
^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login
self._submit_password(captcha_response)
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password
raise LoginError("Could not submit password", error=resp.error.string)
spotapi.exceptions.errors.LoginError: Could not submit password
127.0.0.1 - - [28/Jun/2025 15:31:12] "POST /api/playlists HTTP/1.1" 500 -
Attempting to get playlists...
Spotify Login Response: {'error': 'errorUnknown'}
SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'}
Error in /api/playlists:
Traceback (most recent call last):
File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists
login = get_login_instance(auth_data, auth_method)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance
login_instance.login() # Perform the login
^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login
self._submit_password(captcha_response)
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password
raise LoginError("Could not submit password", error=resp.error.string)
spotapi.exceptions.errors.LoginError: Could not submit password
127.0.0.1 - - [28/Jun/2025 15:31:13] "POST /api/playlists HTTP/1.1" 500 -
Attempting to get playlists...
Spotify Login Response: {'error': 'errorUnknown'}
SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'}
Error in /api/playlists:
Traceback (most recent call last):
File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists
login = get_login_instance(auth_data, auth_method)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance
login_instance.login() # Perform the login
^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login
self._submit_password(captcha_response)
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password
raise LoginError("Could not submit password", error=resp.error.string)
spotapi.exceptions.errors.LoginError: Could not submit password
127.0.0.1 - - [28/Jun/2025 15:31:14] "POST /api/playlists HTTP/1.1" 500 -
Attempting to get playlists...
Spotify Login Response: {'error': 'errorUnknown'}
SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'}
Error in /api/playlists:
Traceback (most recent call last):
File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists
login = get_login_instance(auth_data, auth_method)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance
login_instance.login() # Perform the login
^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login
self._submit_password(captcha_response)
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password
raise LoginError("Could not submit password", error=resp.error.string)
spotapi.exceptions.errors.LoginError: Could not submit password
127.0.0.1 - - [28/Jun/2025 15:31:30] "POST /api/playlists HTTP/1.1" 500 -
Attempting to get playlists...
Spotify Login Response: {'error': 'errorUnknown'}
SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'}
Error in /api/playlists:
Traceback (most recent call last):
File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists
login = get_login_instance(auth_data, auth_method)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance
login_instance.login() # Perform the login
^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login
self._submit_password(captcha_response)
File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper
result: R = func(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password
raise LoginError("Could not submit password", error=resp.error.string)
spotapi.exceptions.errors.LoginError: Could not submit password
127.0.0.1 - - [28/Jun/2025 15:31:32] "POST /api/playlists HTTP/1.1" 500 -

Originally created by @RhowindMacDermott on GitHub (Jun 28, 2025). Original GitHub issue: https://github.com/Aran404/SpotAPI/issues/36 Attempting to get playlists... Spotify Login Response: {'error': 'errorUnknown'} SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'} Error in /api/playlists: Traceback (most recent call last): File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists login = get_login_instance(auth_data, auth_method) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance login_instance.login() # Perform the login ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login self._submit_password(captcha_response) File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password raise LoginError("Could not submit password", error=resp.error.string) spotapi.exceptions.errors.LoginError: Could not submit password 127.0.0.1 - - [28/Jun/2025 15:31:12] "POST /api/playlists HTTP/1.1" 500 - Attempting to get playlists... Spotify Login Response: {'error': 'errorUnknown'} SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'} Error in /api/playlists: Traceback (most recent call last): File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists login = get_login_instance(auth_data, auth_method) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance login_instance.login() # Perform the login ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login self._submit_password(captcha_response) File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password raise LoginError("Could not submit password", error=resp.error.string) spotapi.exceptions.errors.LoginError: Could not submit password 127.0.0.1 - - [28/Jun/2025 15:31:13] "POST /api/playlists HTTP/1.1" 500 - Attempting to get playlists... Spotify Login Response: {'error': 'errorUnknown'} SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'} Error in /api/playlists: Traceback (most recent call last): File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists login = get_login_instance(auth_data, auth_method) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance login_instance.login() # Perform the login ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login self._submit_password(captcha_response) File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password raise LoginError("Could not submit password", error=resp.error.string) spotapi.exceptions.errors.LoginError: Could not submit password 127.0.0.1 - - [28/Jun/2025 15:31:14] "POST /api/playlists HTTP/1.1" 500 - Attempting to get playlists... Spotify Login Response: {'error': 'errorUnknown'} SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'} Error in /api/playlists: Traceback (most recent call last): File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists login = get_login_instance(auth_data, auth_method) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance login_instance.login() # Perform the login ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login self._submit_password(captcha_response) File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password raise LoginError("Could not submit password", error=resp.error.string) spotapi.exceptions.errors.LoginError: Could not submit password 127.0.0.1 - - [28/Jun/2025 15:31:30] "POST /api/playlists HTTP/1.1" 500 - Attempting to get playlists... Spotify Login Response: {'error': 'errorUnknown'} SpotAPI Login Error Details: Status Code: 400, Response: {'error': 'errorUnknown'} Error in /api/playlists: Traceback (most recent call last): File "C:\Users\macde\spotify_recommender\main.py", line 75, in get_playlists login = get_login_instance(auth_data, auth_method) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\main.py", line 55, in get_login_instance login_instance.login() # Perform the login ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 265, in login self._submit_password(captcha_response) File "C:\Users\macde\spotify_recommender\spotapi\types\annotations.py", line 47, in wrapper result: R = func(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\macde\spotify_recommender\spotapi\login.py", line 208, in _submit_password raise LoginError("Could not submit password", error=resp.error.string) spotapi.exceptions.errors.LoginError: Could not submit password 127.0.0.1 - - [28/Jun/2025 15:31:32] "POST /api/playlists HTTP/1.1" 500 -
kerem closed this issue 2026-02-27 19:06:28 +03:00
Author
Owner

@Aran404 commented on GitHub (Jun 29, 2025):

Can you provide code in the proper formatting? It's difficult to read

<!-- gh-comment-id:3016249630 --> @Aran404 commented on GitHub (Jun 29, 2025): Can you provide code in the proper formatting? It's difficult to read
Author
Owner

@RhowindMacDermott commented on GitHub (Jun 29, 2025):

I'll provide it TMRW since I have church TMRW and I need to go to bed and it's 12 AM but, I was trying to create a app that would give me songs and artists based on the music and artists I listen to but, I kept getting 403 error to a certain URL I forgot which one, I searched the web other people seemed to have the problem with Spotify API then I was wondering if I have to have a secret and ID and have a Spotify developer app I installed the spotapi stuff, it failed to authentice my cookies I tried to add Gmail and username and I got my loading thing to spin a little bit more but then the same thing happened with the Gmail and password authentication I built the website with react and python for the backend while going to the path I created it in and then running python main.py and I hosted the server locally and nothing was working for me so I got frustrated and decided to end the project because I didn't know how to fix it. And I don't want to close the GitHub issue because it's still an issue for me...

<!-- gh-comment-id:3016313750 --> @RhowindMacDermott commented on GitHub (Jun 29, 2025): I'll provide it TMRW since I have church TMRW and I need to go to bed and it's 12 AM but, I was trying to create a app that would give me songs and artists based on the music and artists I listen to but, I kept getting 403 error to a certain URL I forgot which one, I searched the web other people seemed to have the problem with Spotify API then I was wondering if I have to have a secret and ID and have a Spotify developer app I installed the spotapi stuff, it failed to authentice my cookies I tried to add Gmail and username and I got my loading thing to spin a little bit more but then the same thing happened with the Gmail and password authentication I built the website with react and python for the backend while going to the path I created it in and then running python main.py and I hosted the server locally and nothing was working for me so I got frustrated and decided to end the project because I didn't know how to fix it. And I don't want to close the GitHub issue because it's still an issue for me...
Author
Owner

@RhowindMacDermott commented on GitHub (Jun 29, 2025):

I think I can provide the code now package.json

1 {
2   "name": "server",
3   "version": "1.0.0",
4   "main": "index.js",
5   "scripts": {
6     "test": "echo \"Error: no test specified\" && exit 1"
7   },
8   "keywords": [],
9   "author": "",

10 "license": "ISC",
11 "description": "",
12 "dependencies": {
13 "axios": "^1.10.0",
14 "dotenv": "^17.0.0",
15 "express": "^5.1.0"
16 }
17 }

index.js

... first 10 lines hidden ...
11 const CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET;
12 const REDIRECT_URI = process.env.SPOTIFY_REDIRECT_URI || 'http://localhost:3000/callback'; //
For Authorization Code Flow
13
14 // Client Credentials Flow (for public data)
15 app.get('/api/token', async (req, res) => {
16 try {
17 const response = await axios.post(
18 'https://accounts.spotify.com/api/token',
19 'grant_type=client_credentials',
20 {
21 headers: {
22 'Content-Type': 'application/x-www-form-urlencoded',
23 'Authorization': 'Basic ' + Buffer.from(CLIENT_ID + ':' + CLIENT_SECRET).(
'base64'), t
24 }, o
25 } S
26 ); t
27 res.json(response.data); r
28 } catch (error) { i
29 console.error('Error getting token:', error.response ? error.response.data : error.message
); g
30 res.status(500).json({ error: 'Failed to get access token' });
31 }
32 });
33
34 // Authorization Code Flow (for user-specific data)
35 app.get('/api/login', (req, res) => {
36 const scope = 'user-read-private user-read-email user-top-read'; // Add more scopes as
needed
37 res.redirect('https://accounts.spotify.com/authorize?' +
38 new URLSearchParams({
39 response_type: 'code',
40 client_id: CLIENT_ID,
41 scope: scope,
42 redirect_uri: REDIRECT_URI,
43 }).()
44 ); t
45 }); o
46 S
47 app.get('/api/callback', async (req, res) => {
48 const code = req.query.code || null;
49 const code_verifier = req.query.code_verifier || null;
50 n
51 try {g
52 const response = await axios.post(
53 'https://accounts.spotify.com/api/token',
54 new URLSearchParams({
55 grant_type: 'authorization_code',
56 code: code,
57 redirect_uri: REDIRECT_URI,
58 code_verifier: code_verifier,
59 }).(),
60 { t
61 headers: {
62 'Content-Type': 'application/x-www-form-urlencoded',
63 'Authorization': 'Basic ' + Buffer.from(CLIENT_ID + ':' + CLIENT_SECRET).(
'base64'), t
64 }, o
65 } n S
66 ); g t
67 res.json(response.data); r
68 } catch (error) { i
69 console.error('Error during callback:', error.response ? error.response.data : error.
message); g
70 res.status(500).json({ error: 'Failed to get access token during callback' });
71 }
72 });
73
74 // Example endpoint to fetch user's top artists (requires Authorization Code Flow)
75 app.get('/api/top-artists', async (req, res) => {
76 const accessToken = req.query.access_token; // Get access token from frontend
77
78 if (!accessToken) {
79 return res.status(400).json({ error: 'Access token is missing' });
80 }
81
82 try {
83 const response = await axios.get('https://api.spotify.com/v1/me/top/artists', {
84 headers: {
85 'Authorization': Bearer ${accessToken},
86 },
87 });
88 res.json(response.data);
89 } catch (error) {
90 console.error('Error fetching top artists:', error.response ? error.response.data : error.
message);
91 res.status(500).json({ error: 'Failed to fetch top artists' });
92 }
93 });
94
95
96 app.get('/api/recommendations', async (req, res) => {
97 const accessToken = req.query.access_token;
98 const seedArtists = req.query.seed_artists; // Comma-separated artist IDs
99
100 if (!accessToken || !seedArtists) {
101 return res.status(400).json({ error: 'Access token and seed artists are required' });
102 }
103
104 try {
105 const response = await axios.get(https://api.spotify.com/v1/recommendations?seed_artists= ${seedArtists}&limit=10, {
106 headers: {
107 'Authorization': Bearer ${accessToken},
108 },
109 });
110 res.json(response.data);
111 } catch (error) {
112 console.error('Error fetching recommendations:', error.response ? error.response.data :
error.message);
113 res.status(500).json({ error: 'Failed to fetch recommendations' });
114 }
115 });
116
117
118 app.listen(PORT, () => {
119 console.log(Server listening on port ${PORT});
120 });

this is the client

package.json

1 {
2   "name": "client",
3   "version": "0.1.0",
4   "private": true,
5   "scripts": {
6     "dev": "next dev",
7     "build": "next build",
8     "start": "next start",
9     "lint": "next lint"

10 },
11 "dependencies": {
12 "react": "^19.0.0",
13 "react-dom": "^19.0.0",
14 "next": "15.3.4"
15 },
16 "devDependencies": {
17 "typescript": "^5",
18 "@types/node": "^20",
19 "@types/react": "^19",
20 "@types/react-dom": "^19",
21 "@tailwindcss/postcss": "^4",
22 "tailwindcss": "^4",
23 "eslint": "^9",
24 "eslint-config-next": "15.3.4",
25 "@eslint/eslintrc": "^3"
26 }
27 }

src/app/page.tsx

... first 124 lines hidden ...
123 };
124
125 const handleLogout = () => {
126 setAccessToken(null);
127 setTopArtists([]);
128 window.localStorage.removeItem('spotify_access_token');
129 };
130
131 return (
132


133

Spotify Music Recommender


134
135 {!accessToken ? (
136 <button
137 onClick={handleLogin}
138 className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6
rounded-full shadow-lg transition duration-300 ease-in-out"
139 >
140 Login with Spotify
141
142 ) : (
143

144

145

Your Top Artists


146 <button
147 onClick={handleLogout}
148 className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4
rounded-full transition duration-300 ease-in-out"
149 >
150 Logout
151
152

153
154 {loading &&

Loading top artists...

}
155 {error &&

Error: {error}

}
156
157 {!loading && !error && topArtists.length === 0 && (
158

No top artists found. Try logging in again or check
your Spotify activity.


159 )}
160
161

    162 {topArtists.map((artist) => (
    163

  • 164 {artist.images[0] && (
    165 <img
    166 src={artist.images[0].url}
    167 alt={artist.name}
    168 className="w-16 h-16 rounded-full object-cover"
    169 />
    170 )}
    171

    172

    {artist.name}


    173

    {artist.genres.join(', ')}


    174

    175

  • 176 ))}
    177

178
179

180 <button
181 onClick={fetchRecommendations}
182 disabled={topArtists.length === 0 || recommendationsLoading}
183 className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6
rounded-full shadow-lg transition duration-300 ease-in-out disabled:opacity-50
disabled:cursor-not-allowed"
184 >
185 {recommendationsLoading ? 'Getting Recommendations...' : 'Get Music
Recommendations'}
186
187

188
189 {recommendationsLoading &&

Loading
recommendations...

}
190 {recommendationsError &&

Error:
{recommendationsError}

}
191
192 {!recommendationsLoading && !recommendationsError && recommendedTracks.length > 0 &&
(
193

194

Recommended Tracks


195

    196 {recommendedTracks.map((track) => (
    197

  • 198 {track.album.images[0] && (
    199 <img
    200 src={track.album.images[0].url}
    201 alt={track.name}
    202 className="w-16 h-16 rounded-md object-cover"
    203 />
    204 )}
    205

    206

    {track.name}


    207

    {track.artists.map((artist: any) =>
    artist.name).join(', ')} - {track.album.name}


    208 {track.external_urls.spotify && (
    209 <a
    210 href={track.external_urls.spotify}
    211 target="_blank"
    212 rel="noopener noreferrer"
    213 className="text-blue-500 hover:underline text-sm"
    214 >
    215 Listen on Spotify
    216
    217 )}
    218

    219

  • 220 ))}
    221

222

223 )}
224

225 )}
226

227 );
228 }

<!-- gh-comment-id:3017086222 --> @RhowindMacDermott commented on GitHub (Jun 29, 2025): I think I can provide the code now `package.json` 1 { 2 "name": "server", 3 "version": "1.0.0", 4 "main": "index.js", 5 "scripts": { 6 "test": "echo \"Error: no test specified\" && exit 1" 7 }, 8 "keywords": [], 9 "author": "", 10 "license": "ISC", 11 "description": "", 12 "dependencies": { 13 "axios": "^1.10.0", 14 "dotenv": "^17.0.0", 15 "express": "^5.1.0" 16 } 17 } `index.js` ... first 10 lines hidden ... 11 const CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET; 12 const REDIRECT_URI = process.env.SPOTIFY_REDIRECT_URI || 'http://localhost:3000/callback'; // For Authorization Code Flow 13 14 // Client Credentials Flow (for public data) 15 app.get('/api/token', async (req, res) => { 16 try { 17 const response = await axios.post( 18 'https://accounts.spotify.com/api/token', 19 'grant_type=client_credentials', 20 { 21 headers: { 22 'Content-Type': 'application/x-www-form-urlencoded', 23 'Authorization': 'Basic ' + Buffer.from(CLIENT_ID + ':' + CLIENT_SECRET).( 'base64'), t 24 }, o 25 } S 26 ); t 27 res.json(response.data); r 28 } catch (error) { i 29 console.error('Error getting token:', error.response ? error.response.data : error.message ); g 30 res.status(500).json({ error: 'Failed to get access token' }); 31 } 32 }); 33 34 // Authorization Code Flow (for user-specific data) 35 app.get('/api/login', (req, res) => { 36 const scope = 'user-read-private user-read-email user-top-read'; // Add more scopes as needed 37 res.redirect('https://accounts.spotify.com/authorize?' + 38 new URLSearchParams({ 39 response_type: 'code', 40 client_id: CLIENT_ID, 41 scope: scope, 42 redirect_uri: REDIRECT_URI, 43 }).() 44 ); t 45 }); o 46 S 47 app.get('/api/callback', async (req, res) => { 48 const code = req.query.code || null; 49 const code_verifier = req.query.code_verifier || null; 50 n 51 try {g 52 const response = await axios.post( 53 'https://accounts.spotify.com/api/token', 54 new URLSearchParams({ 55 grant_type: 'authorization_code', 56 code: code, 57 redirect_uri: REDIRECT_URI, 58 code_verifier: code_verifier, 59 }).(), 60 { t 61 headers: { 62 'Content-Type': 'application/x-www-form-urlencoded', 63 'Authorization': 'Basic ' + Buffer.from(CLIENT_ID + ':' + CLIENT_SECRET).( 'base64'), t 64 }, o 65 } n S 66 ); g t 67 res.json(response.data); r 68 } catch (error) { i 69 console.error('Error during callback:', error.response ? error.response.data : error. message); g 70 res.status(500).json({ error: 'Failed to get access token during callback' }); 71 } 72 }); 73 74 // Example endpoint to fetch user's top artists (requires Authorization Code Flow) 75 app.get('/api/top-artists', async (req, res) => { 76 const accessToken = req.query.access_token; // Get access token from frontend 77 78 if (!accessToken) { 79 return res.status(400).json({ error: 'Access token is missing' }); 80 } 81 82 try { 83 const response = await axios.get('https://api.spotify.com/v1/me/top/artists', { 84 headers: { 85 'Authorization': `Bearer ${accessToken}`, 86 }, 87 }); 88 res.json(response.data); 89 } catch (error) { 90 console.error('Error fetching top artists:', error.response ? error.response.data : error. message); 91 res.status(500).json({ error: 'Failed to fetch top artists' }); 92 } 93 }); 94 95 96 app.get('/api/recommendations', async (req, res) => { 97 const accessToken = req.query.access_token; 98 const seedArtists = req.query.seed_artists; // Comma-separated artist IDs 99 100 if (!accessToken || !seedArtists) { 101 return res.status(400).json({ error: 'Access token and seed artists are required' }); 102 } 103 104 try { 105 const response = await axios.get(`https://api.spotify.com/v1/recommendations?seed_artists= ${seedArtists}&limit=10`, { 106 headers: { 107 'Authorization': `Bearer ${accessToken}`, 108 }, 109 }); 110 res.json(response.data); 111 } catch (error) { 112 console.error('Error fetching recommendations:', error.response ? error.response.data : error.message); 113 res.status(500).json({ error: 'Failed to fetch recommendations' }); 114 } 115 }); 116 117 118 app.listen(PORT, () => { 119 console.log(`Server listening on port ${PORT}`); 120 }); this is the client `package.json` 1 { 2 "name": "client", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "dev": "next dev", 7 "build": "next build", 8 "start": "next start", 9 "lint": "next lint" 10 }, 11 "dependencies": { 12 "react": "^19.0.0", 13 "react-dom": "^19.0.0", 14 "next": "15.3.4" 15 }, 16 "devDependencies": { 17 "typescript": "^5", 18 "@types/node": "^20", 19 "@types/react": "^19", 20 "@types/react-dom": "^19", 21 "@tailwindcss/postcss": "^4", 22 "tailwindcss": "^4", 23 "eslint": "^9", 24 "eslint-config-next": "15.3.4", 25 "@eslint/eslintrc": "^3" 26 } 27 } `src/app/page.tsx` ... first 124 lines hidden ... 123 }; 124 125 const handleLogout = () => { 126 setAccessToken(null); 127 setTopArtists([]); 128 window.localStorage.removeItem('spotify_access_token'); 129 }; 130 131 return ( 132 <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4"> 133 <h1 className="text-4xl font-bold text-gray-800 mb-8">Spotify Music Recommender</h1> 134 135 {!accessToken ? ( 136 <button 137 onClick={handleLogin} 138 className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out" 139 > 140 Login with Spotify 141 </button> 142 ) : ( 143 <div className="w-full max-w-2xl bg-white rounded-lg shadow-md p-6"> 144 <div className="flex justify-between items-center mb-4"> 145 <h2 className="text-2xl font-semibold text-gray-700">Your Top Artists</h2> 146 <button 147 onClick={handleLogout} 148 className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out" 149 > 150 Logout 151 </button> 152 </div> 153 154 {loading && <p className="text-gray-600">Loading top artists...</p>} 155 {error && <p className="text-red-500">Error: {error}</p>} 156 157 {!loading && !error && topArtists.length === 0 && ( 158 <p className="text-gray-600">No top artists found. Try logging in again or check your Spotify activity.</p> 159 )} 160 161 <ul className="space-y-4"> 162 {topArtists.map((artist) => ( 163 <li key={artist.id} className="flex items-center space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm"> 164 {artist.images[0] && ( 165 <img 166 src={artist.images[0].url} 167 alt={artist.name} 168 className="w-16 h-16 rounded-full object-cover" 169 /> 170 )} 171 <div> 172 <p className="text-lg font-medium text-gray-800">{artist.name}</p> 173 <p className="text-sm text-gray-500">{artist.genres.join(', ')}</p> 174 </div> 175 </li> 176 ))} 177 </ul> 178 179 <div className="mt-8"> 180 <button 181 onClick={fetchRecommendations} 182 disabled={topArtists.length === 0 || recommendationsLoading} 183 className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed" 184 > 185 {recommendationsLoading ? 'Getting Recommendations...' : 'Get Music Recommendations'} 186 </button> 187 </div> 188 189 {recommendationsLoading && <p className="text-gray-600 mt-4">Loading recommendations...</p>} 190 {recommendationsError && <p className="text-red-500 mt-4">Error: {recommendationsError}</p>} 191 192 {!recommendationsLoading && !recommendationsError && recommendedTracks.length > 0 && ( 193 <div className="mt-8"> 194 <h2 className="text-2xl font-semibold text-gray-700 mb-4">Recommended Tracks </h2> 195 <ul className="space-y-4"> 196 {recommendedTracks.map((track) => ( 197 <li key={track.id} className="flex items-center space-x-4 bg-gray-50 p-4 rounded-lg shadow-sm"> 198 {track.album.images[0] && ( 199 <img 200 src={track.album.images[0].url} 201 alt={track.name} 202 className="w-16 h-16 rounded-md object-cover" 203 /> 204 )} 205 <div> 206 <p className="text-lg font-medium text-gray-800">{track.name}</p> 207 <p className="text-sm text-gray-500">{track.artists.map((artist: any) => artist.name).join(', ')} - {track.album.name}</p> 208 {track.external_urls.spotify && ( 209 <a 210 href={track.external_urls.spotify} 211 target="_blank" 212 rel="noopener noreferrer" 213 className="text-blue-500 hover:underline text-sm" 214 > 215 Listen on Spotify 216 </a> 217 )} 218 </div> 219 </li> 220 ))} 221 </ul> 222 </div> 223 )} 224 </div> 225 )} 226 </div> 227 ); 228 }
Author
Owner

@Aran404 commented on GitHub (Jun 30, 2025):

No clue what's going on here, there's javascript from what I can tell and the formatting is miserable

<!-- gh-comment-id:3021123621 --> @Aran404 commented on GitHub (Jun 30, 2025): No clue what's going on here, there's javascript from what I can tell and the formatting is miserable
Sign in to join this conversation.
No labels
pull-request
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/SpotAPI#21
No description provided.