Possible bug/help with configuring authentication with Twitch

[Berkodev]

Hello,

I'm trying to use react-native-app-auth to provide authentication with Twitch for my iOS app. I am using this config:

const config = {
  issuer: 'https://id.twitch.tv',
  clientId: 'my_client_id',
  redirectUrl: 'redirect_url_in_twitch_and_info_plist',
  serviceConfiguration: {
    authorizationEndpoint: 'https://id.twitch.tv/oauth2/authorize',
    tokenEndpoint: 'https://id.twitch.tv/oauth2/token',
    revocationEndpoint: 'https://id.twitch.tv/oauth2/revoke'
  },
  additionalParameters: {response_type: 'code'},
  scopes: ['user_read'],
};

When calling authenticate, the SafariView launches correctly, seems to authenticate correctly, and then returns me to the app with the following error:
...userInfo: { NSLocalizedDescription: '{"status":400,"message":"missing client secret"}
While providing client secret for client authentication is non-ideal (and seemingly isn't required by Twitch), adding my client secret to the config throws this error:
...userInfo: { NSLocalizedDescription: '{"status":400,"message":"missing client id"}\n' }
(client id is still present)

I'd appreciate it if anyone could check if I've I configured it wrong, though I'm using very similar config on other platforms successfully, or otherwise help me figure out why am I getting these errors. Twitch's docs on authentication can be found here: https://dev.twitch.tv/docs/authentication

Would be happy to provide other info if needed.

Thanks!

[drewacs]

Looks like we need this fix:

#234

[kadikraman]

Looks like the reason this doesn't work is because the parameters in the token exchange are meant to be sent in the request body, but for some reason with Twitch, they want them sent as url params.

We just released v6.0.0 which allows you to skip the code exchange step and handle the request manually. I was able to get twitch auth to work like so:

const config = {
  issuer: 'https://id.twitch.tv',
  clientSecret: <secret>,
  clientId: <id>,
  redirectUrl: <redirect>,
  serviceConfiguration: {
    authorizationEndpoint: 'https://id.twitch.tv/oauth2/authorize',
  },
  scopes: ['user_read'],
  skipCodeExchange: true,
}
const newAuthState = await authorize(config);

const codeResponse = await fetch(
  `https://id.twitch.tv/oauth2/token?client_id=${config.clientId}&client_secret=${config.clientSecret}&grant_type=authorization_code&redirect_uri=${config.redirectUrl}&code=${newAuthState.authorizationCode}`,
  {
    method: 'POST',
  },
);

const tokenDetails = await codeResponse.json();

console.log(tokenDetails);

Hope this helps!