Spotify auth

[riverscuomo]

You shouldn't have to sign into spotify every time you start the app. Or is that just a side effect of running locally chrome?

[alex-dulac]

You're cruising man, I did a really quick glance at your latest work, I might make the following suggestion:

• During the callback in the server, consider storing the access token, refresh token, and expiration in a secure cookie.
• Send this cookie to the Flutter UI, and store it in the browser.
• I probably consider something like https://pub.dev/packages/flutter_secure_storage and https://pub.dev/packages/flutter_keychain
• Use this cookie when making requests to the server. The server would then extract the token from the cookie in order to make spotify api request.

So if you have a cookie in the browser, you shouldn't have to sign into spotify every time you start the app... hopefully 🙂

[riverscuomo]

I've never tried that before but it sounds like a good idea. Thanks.

[riverscuomo]

Just noticed this package that could make this all a bit easier: https://pub.dev/packages/spotify

[alex-dulac]

Oh nice find. I was just about to open a PR for a quick example of https://pub.dev/packages/flutter_secure_storage as well, you can take a look at for comparison.

[alex-dulac]

But yeah wow, https://pub.dev/packages/spotify seems to be all-in-one

[riverscuomo]

I didn't have any luck using the Spotify package for the auth flow but the good news is that our existing code seems to be working great (with the client running locally in chrome). I imagine we'll have to instantiate a Spotify object with that package to perform other operations at some point in the near future.

[riverscuomo]

Oh but the deployed web app still seems to have the wrong config

https://spotkin-fd416.web.app/

[alex-dulac]

Ah sorry my previous changes messed you up with the pubspec. Is that related too? ^ Let me know if I can do anything.

[riverscuomo]

I got the deployed app working now. I had a hard time getting the config to load from github secrets, in part because of some tenacious caching of bad values in the browser. Anyone should be able to update this playlist https://open.spotify.com/playlist/7Li5tNS13DgGF0FAgwjATf?si=d7a5093ab6a94da5 by logging into spotify with our website https://spotkin-fd416.web.app/

[riverscuomo]

After working for a while, the server seems to return this error though the client still loads the [UpdatePlaylistScreen].

[riverscuomo]

It keeps looping back to the approval screen

RC { "SPOTIFY_CLIENT_ID": "e..05", "SPOTIFY_CLIENT_SECRET": "9..d2", "SPOTIFY_REDIRECT_URI": "http://localhost:8888/", "SPOTIFY_SCOPE": "playlist-modify-private playlist-modify-public user-library-read playlist-read-private playlist-read-collaborative user-read-private user-library-modify user-read-recently-played", "BACKEND_URL": "https://spotkin-1b998975756a.herokuapp.com/" }

Authentication check failed: Error Code: 401
Unauthorized.
Existing token is invalid, initiating login
Initiating Spotify login (Attempt 1)...
Initiating Spotify login with URL: https://accounts.spotify.com/authorize?client_id=...05&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8888&scope=playlist-modify-private+playlist-modify-public+user-library-read+playlist-read-private+playlist-read-collaborative+user-read-private+user-library-modify+user-read-recently-played&show_dialog=true
Client ID: ecca510884184f3c90e45241abb2a805
Redirect URI: http://localhost:8888/
Requested Scopes: playlist-modify-private playlist-modify-public user-library-read playlist-read-private playlist-read-collaborative user-read-private user-library-modify user-read-recently-played

[scolobey]

Just before the logs posted above, I'm seeing:

Handling initial auth code: A...Q Exchanging auth code for token (Attempt 1)... [Violation] 'setTimeout' handler took 83ms No access token found. Initiating login...

and then it continues with...

Authentication check failed: Exception: Not authenticated

If I go directly at the Spotify API from Postman, using my 'initial auth code' as the "code" parameter, I get an error response...

{ "error": "invalid_grant", "error_description": "Invalid authorization code" }

Could be a misconfiguration in my Postman call, but I think this may point to the issue. Seems to be hitting exchangeCodeForToken() and failing and/or redirecting before or without collecting the token? I don't see any of the logs in exchangeCodeForToken() firing. I'm thinking the call fails and the catch fires after there's already been a redirect triggered somewhere, so we never see the log?

Unfamiliar with Flutter, and facing the typical struggle to get this running on my machine for testing, so I apologize if this is not helpful. I was looking at building a simple IOS interface and kinda wandered my way here, so I'm coming at this from a weird angle.

[riverscuomo]

@scolobey thank you! The first problem indeed was in exchangeCodeForToken. After fixing that I was able to debug with breakpoints through to fix the other problems.