Error: Invalid Request: Value passed for the authorization code was invalid

Question

I followed the following guides:

My code

Client.ts

import { TwitterApi } from "twitter-api-v2";
import { TWITTER_API_CLIENT_ID, TWITTER_API_CLIENT_SECRET } from "./constants";

export const client = new TwitterApi({
  clientId: TWITTER_API_CLIENT_ID,
  clientSecret: TWITTER_API_CLIENT_SECRET,
});

This is how I generate the auth link

const { url, codeVerifier } = twitterClient.generateOAuth2AuthLink(
      TWITTER_API_REDIRECT_URL,
      {
        scope: [
          "tweet.read",
          "tweet.write",
          "users.read",
          "offline.access",
          "follows.read",
        ],```

      }
    );

    await UserAPI.create({
        userId,
        codeVerifier,
        status: UserAPIStatus.PENDING,
      }).save();

After I click through the link generated and authorise. I get the auth code from the URL

const router = useRouter();
const authCode = router.query.code as string | undefined;
  useEffect(() => {
    if (me?.hasTwitterAccess) return;

    const fetch = async (authCode: string) => {
      await validateTwitterApiAccess({
        options: {
          authCode,
        },
      });
    };

    // TODO: fix in backend then dpeloy
    if (authCode) fetch(authCode);
  }, [fetching, authCode]);

I then verify the code.

const userAPI = await UserAPI.findOne({
      userId,
      type: UserAPIType.TWITTER,
    });

twitterClient.loginWithOAuth2({
        code: authCode,
        codeVerifier: userAPI.codeVerifier,
        redirectUri: TWITTER_API_REDIRECT_URL,
      })

But I get the following error

{
  error: 'invalid_request',
  error_description: 'Value passed for the authorization code was invalid.',
  errors: [ { code: 131, message: 'invalid_request' } ]
}

How do I resolve this? Can you spot if I'm doing something wrong?

In case anyone is wondering I know the code lasts 30s. I still get the error if I go through the flow in 5s. — jmecs, May 10 '23 at 17:32
I added an update. I got passed this error using Axios, but encountered a similar one. — jmecs, Jun 09 '23 at 19:02
No I'm using reactjs-social-login. I think this might be an issue with the twitter API it self. https://twittercommunity.com/t/refresh-token-expiring-with-offline-access-scope/168899/79 — Mak Suriya Jacobsen, Jun 11 '23 at 01:58
I tried a few libraries and didn't get good results. I recommend using Axios for the auth and refresh logic. — jmecs, Jun 11 '23 at 03:41

score 0 · Accepted Answer · answered Jun 09 '23 at 19:15

I decided to abandon twitter-api-v2 for the authorisation step and just use axios.

const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Accept: "application/json",
    },
    data: {
      code_verifier: codeVerifier,
      code,
      redirect_url: process.env.TWITTER_API_REDIRECT_URL,
      grant_type: "authorization_code",
      client_id: process.env.TWITTER_API_CLIENT_ID,
    },
    url: "https://api.twitter.com/2/oauth2/token",
  };

let res = null
try {
 res = await axios(options)
} catch (error) {
    console.error("error.response.data", error.response);
}

Sadly, I now get a different but similarly worded error: Value passed for the token was invalid.

So, I just realised I was getting this error because I wrote redirect_url instead of redirect_uri. FIxing this gives me this error: Missing valid authorization header — jmecs, Jun 09 '23 at 19:31