I've tried using it this way

[RhowindMacDermott]

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 -

[Aran404]

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

[RhowindMacDermott]

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...

[RhowindMacDermott]

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 }

[Aran404]

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