React Native Expo集成Twitter v2 API时PKCE验证失败求助

针对你遇到的Value passed for the code verifier did not match the code challenge错误，以下是几个关键修复点：

1. 确保PKCE对的生命周期匹配授权流程 #

你当前在模块顶部生成codeChallenge和codeVerifier，这会导致它们在模块加载时仅生成一次，若多次发起授权或组件重新挂载，可能出现挑战对不匹配的情况。将PKCE对的生成移到授权发起时，确保每次授权流程使用唯一且对应的挑战对：

const handlePressAsync = async () => {
  // 每次发起授权前生成新的PKCE对
  const { codeChallenge, codeVerifier } = pkceChallenge();
  
  // 手动创建AuthRequest（替代useAuthRequest的静态初始化）
  const authRequest = new AuthRequest({
    clientId: TWITTER_CLIENT_ID!,
    clientSecret: TWITTER_CLIENT_SECRET,
    redirectUri: makeRedirectUri({ scheme: "scheme" }),
    usePKCE: true,
    state: "my-state",
    scopes: ["tweet.read", "users.read", "offline.access"],
    responseType: ResponseType.Code,
    codeChallengeMethod: CodeChallengeMethod.S256,
    codeChallenge,
  });

  const result = await authRequest.promptAsync(discovery);
  if (result.type !== "success") {
    alert("Uh oh, something went wrong");
    return;
  }

  const accessCode = result.params?.code as string;

  // 交换token时使用本次授权对应的codeVerifier
  const body = new URLSearchParams({
    code: accessCode,
    grant_type: "authorization_code",
    client_id: TWITTER_CLIENT_ID!,
    client_secret: TWITTER_CLIENT_SECRET!, // 新增client_secret参数
    state: "my-state",
    redirect_uri: makeRedirectUri({ scheme: "scheme" }),
    code_verifier: codeVerifier,
  }).toString();

  fetch("https://api.twitter.com/2/oauth2/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body,
  })
    .then((resp) => resp.json())
    .then((data) => console.log("DATA =>", data));

  // ...其余逻辑
};

2. 添加客户端认证信息 #

作为Confidential Client（拥有client secret），Twitter要求在Token请求中验证客户端身份。你可以二选一：

• 在请求体中加入client_secret参数（如上代码所示）
• 或使用Basic Auth头：

  // 生成Base64编码的客户端凭证
  const credentials = btoa(`${TWITTER_CLIENT_ID!}:${TWITTER_CLIENT_SECRET!}`);
  
  fetch("https://api.twitter.com/2/oauth2/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Authorization": `Basic ${credentials}`
    },
    body,
  })
  

3. 验证Redirect URI的一致性 #

确保makeRedirectUri生成的URL与Twitter开发者后台Valid Redirect URIs列表中的地址完全一致（包括scheme、路径、大小写）。例如：

• 若你使用makeRedirectUri({ scheme: "myapp" })，生成的地址是myapp://auth，需将该地址精确添加到Twitter后台的授权列表中。

4. 避免重复使用授权Code #

注意：每次获取的授权Code只能使用一次，重复提交同一Code会导致无效错误，确保每次授权流程都生成新的PKCE对和新的Code。

内容的提问来源于stack exchange，提问作者oreak