Settings OAuth component does not work with Spotify's OAuth implementation

[timetoogo]

Hi,

I'm attempting to create a FitBit app that integrates with Spotify's API. However I'm running into an issue whereby the OAuth component (https://dev.fitbit.com/build/reference/settings-api/#components) does not work with Spotify's OAuth server.

Here is the component:

        <Oauth
          settingsKey="oauth-spotify"
          title="Spotify Login"
          label="Spotify"
          status="Login"
          authorizeUrl="https://accounts.spotify.com/authorize"
          requestTokenUrl="https://accounts.spotify.com/api/token"
          clientId="{omitted}"
          clientSecret="{omitted}"
          scope="user-modify-playback-state playlist-read-private"
          onAccessToken={async (data) => {
             console.log(data);
             settingsStorage.setItem('spotify-access-token', JSON.stringify(profile));
          }}
        />

Here is the output from the console:

[00:43:32]Fetch API cannot load https://accounts.spotify.com/api/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app-settings.fitbitdevelopercontent.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
[00:43:32]Uncaught (in promise) TypeError: Failed to fetch
[00:43:32][object Object]app/index.js:8,3
[00:43:32]App received: {"errors":[{"errorType":"invalid_grant","message":"Authorization code invalid: {omitted}...app/index.js:8,3
[00:43:32]App received: null

[Florian87 · Accepted solution]

The Settings component doesn‘t support CORS. JUst let the Companion do the token exchange. Check out this thread as a solution: 

https://community.fitbit.com/t5/SDK-Development/Looking-for-help-with-OAuth/td-p/2231303