I am trying to use OAuth2 to authenticate with Twitter on my React-Native/Expo app, using the expo-auth-session package (Expo's guide for Twitter OAuth).
The Twitter OAuth2 flow works in two steps : first the user authorizes the app to access their account, which returns a code, then we exchange that code for an access token. I am stuck at the second step. Whenever I try to exchange the code for a token, using expo's exchangeCodeAsync function with these parameters :
exchangeCodeAsync({
clientId: '<CLIENT_ID>',
redirectUri: makeRedirectUri({
scheme: 'my.app',
useProxy
}),
code: response.params.code,
extraParams: {
client_id: "<CLIENT_ID>",
code_verifier: request?.codeVerifier || '',
redirect_uri: makeRedirectUri({
scheme: 'my.app',
useProxy
}),
grant_type: "authorization_code",
},
}, discovery)
I get this error :
Possible Unhandled Promise Rejection (id: 0):
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
What I understand is that the function makes a request to the /oauth2/token route of the Twitter API under the hood, but because of some wrong parameter it returns an HTML error code :
Something went wrong, but don’t fret — let’s give it another shot.
Since the error message is so vague, I have no idea of what is wrong with my request.
I assume that since I have completed the authorization step, the redirect_uri is properly configured. I have also made sure that the format for the "code_verifier" and "code" fields were valid, according to Twitter's documentation.
Here is an Expo Snack to show the complete App.js setup I am using (I've also configured app.json with a custom scheme )