I am implementing the X authentication flow in my React Native app, with the help of expo-auth-session (just for requesting the authorization code).

I am getting the error while trying to exchange the auth code for an access token: SyntaxError: JSON Parse error: Unexpected character: <

For now, fetching an authorization code is working good, using this configuration:

  const TWITTER_AUTHORIZATION_ENDPOINT = "https://twitter.com/i/oauth2/authorize";
  const TWITTER_TOKEN_ENDPOINT = "https://twitter.com/i/oauth2/token";
  const TWITTER_REVOCATION_ENDPOINT = "https://twitter.com/i/oauth2/revoke";

  const discovery = {
    authorizationEndpoint: TWITTER_AUTHORIZATION_ENDPOINT,
    tokenEndpoint: TWITTER_TOKEN_ENDPOINT,
    revocationEndpoint: TWITTER_REVOCATION_ENDPOINT,
  };

  const redirectUri = makeRedirectUri({ scheme: "my-app" });

  const requestConfig = {
    clientId: CLIENT_ID,
    redirectUri,
    scopes: ["tweet.read", "users.read"],
    usePKCE: true,
  };

Here is the logic of the hook for prompting the browser to the user:

export default function useTwitterAuth() {
  const [
    request,
    response,
    promptAsync,
  ] = useAuthRequest(requestConfig, discovery);

  const handleResponse = useCallback(
    async () => {
      if (response?.type !== "success") return;

      try {
        const { code } = response.params;
        const { codeVerifier } = request;

        console.log({ code });
        console.log({ codeVerifier });

        // ... HERE WE WILL CALL THE ACCESS TOKEN ENDPOINT ...
      } catch (err) {
        console.log(err);
      }
    },
    [response, request]
  );

  useEffect(() => {
    handleResponse();
  }, [handleResponse]);

  return { promptAsync };
}

After that, I have tried 2 approaches for fetching the twitter access token:

1. Fetching the endpoint directly without expo-auth-session:

async function exchangeAccessToken({ code, codeVerifier, redirectUri }) {
  const uri = TWITTER_TOKEN_ENDPOINT;

  const headers = {
    "Content-Type": "application/json",
  };

  const response = await fetch(uri, {
    method: "POST",
    headers,
    body: {
      code,
      client_id: CLIENT_ID,
      grant_type: "authorization_code",
      code_verifier: codeVerifier,
      redirect_uri: redirectUri,
    },
  });

  console.log(response);

  const data = await response.json();

  return data;
}

...

const handleResponse = useCallback(
    async () => {
      if (response?.type !== "success") return;

      try {
        const { code } = response.params;
        const { codeVerifier } = request;

        console.log({ code });
        console.log({ codeVerifier });

        const data = await exchangeAccessToken({
          code,
          codeVerifier,
          redirectUri,
        });

        console.log(data);
      } catch (err) {
        console.log(err); // ERROR: [SyntaxError: JSON Parse error: Unexpected character: <]
      }
    },
    [response, request]
  );

2. Fetching the endpoint with expo-auth-session:

  const handleResponse = useCallback(
    async () => {
      if (response?.type !== "success") return;

      try {
        const { code } = response.params;
        const { codeVerifier } = request;

        console.log({ code });
        console.log({ codeVerifier });

        const exchangeAccessRequest = {
          clientId: CLIENT_ID,
          code,
          redirectUri,
          extraParams: {
            code_verifier: codeVerifier,
          },
        };

        const data = await exchangeCodeAsync(exchangeAccessRequest, discovery);

        console.log(data);
      } catch (err) {
        console.log(err); // SAME ERROR: [SyntaxError: JSON Parse error: Unexpected character: <]
      }
    },
    [response, request]
  );

Any ideas whats going on?