Hi I am trying to create a Spotify authentication for my app, but I’d need more scopes than the ones offered at the default Social Connection (user-read-private and user-read-email)
I have tried, thus, to create a custom connector using the “Custom Social Connections”.
I have it configured to use Spotify’s urls accounts[.]spotify[.]com/authorize and accounts[.]spotify[.]com/api/token.
However, when I try to test the connection I get the following error:
{
"error": "invalid_request",
"error_description": "Invalid user id."
}
At my spotify application I have the uri opted-in:
dev-xxx[.]us[.]auth0.com/login/callback
At the same time, the standard Spotify Connection does work, however I don’t have the necessary scopes.
Am I missing something ? How can I accomplish this ?
Yes, that’s correct. You should use the Custom Social Connections extension to add additional scopes to your Spotify connection.
I have checked your tenant’s custom Spotify social connections and noticed neither connection is configured. It is missing values for all fields, such as the authorization URL, token URL, scope, client ID, etc.
I recommend that you fully configure your custom Spotify social connection so that the login works correctly.
That’s strange, I do have it configured at con_XtOlEZ9HaG6CS3CW.
After some chat GPT help, I was able to come up with a custom Fetch User Profile Script which helped me to get past that original issue I shared.
I do see a “it works” when testing the connection now, and on my react app I also get the jwt token.
However, when I try to use the token against spotify APIs, I am getting 401s. I am not sure if there’s anything missing, but I understood the token issued by Auth0 would grant me access to Spotify APIs transitively.
Usually, a 401 error indicates an unauthorized error, which happens if you are missing certain scopes or permissions. I recommend that you decode your JWT access token and make sure you have the required payload to use the token against Spotify API’s.
After adding permissions on the API and adding the scopes into the loginWithRedirect and I was able to get the scopes on the access_token, however I am still getting 401 when trying to invoke spotify APIs.
Are you using the same access token you get from auth0 to call spotify? If this is the case, you’ll definitely get a 401.
To be able to call spotify, you’ll need to store the access token you get in the user profile fetch function you created, and store that in the profile.
Then, using the management client (either at login on in the backend of your application), you need to fetch the user profile from auth0 and extract the Spotify access_token.
Also bear in mind that Auth0 won’t do any token refresh for you, so your app will need to handle this if needed.
The screenshot you shared of the decoded access token looks like an access token meant for Auth0, not Spotify.
As @nevosus mentioned, this will throw the 401 unauthorized error you have encountered.
To get the Spotify access token, you can find it in the identities array of the user profile. For example, the access token might be located at user.identities[0].access_token, assuming there is only a single identity associated with the user.
