使用react-native-app-auth注册时出现state不匹配问题

环境信息 #

• React Native版本：0.67.3
• react-native-app-auth版本：^6.4.3

错误日志 #

[Error: State mismatch, expecting Z2-6m8_T7FcIlbG9wep3Xb2wvgsylbd9M54iiX97rXs but got Z2-6m8_T7FcIlbG9wep3Xb2wvgsylbd9M54iiX97rXsregistration in authorization response <OIDAuthorizationResponse: 0x6000017b29e0, authorizationCode: 4d890080dde715cedddf076e5ffb4fc8aaeeb22d4ebca281d4c7d74df377607c, state: "Z2-6m8_T7FcIlbG9wep3Xb2wvgsylbd9M54iiX97rXsregistration", accessToken: "(null)", accessTokenExpirationDate: (null), tokenType: (null), idToken: "(null)", scope: "(null)", additionalParameters: {}, request: <OIDAuthorizationRequest: 0x600001f7c000, request: https://api.staging.com/oauth/authorize?nonce=iJxSOkt6tGToBUndfg3n0V4B_ZZNBIm8TwbTg18EGOo&response_type=code&scope=trusted%20public%20refresh_token&code_challenge=iNlpVkj7UDpXyu5wBlMuln41huSZcGsdWEQ9fYLtcuU&code_challenge_method=S256&redirect_uri=someredirectt&client_id=9dc36c26d21198f5c97f12b34be3cce7a37e5abdc323fcc0b205a898d22994f7&state=Z2-6m8_T7FcIlbG9wep3Xb2wvgsylbd9M54iiX97rXs>>]

相关代码 #

import { authorize } from 'react-native-app-auth';

const config = {
  issuer: TEMP_API,
  clientId: OAUTH_PUBLIC_CLIENT_ID,
  redirectUrl: OAUTH_CALLBACK_URL,
  clientSecret: OAUTH_CLIENT_SECRET,
  scopes: ['trusted', 'public', 'refresh_token'],
};

const configForSignup = {
  ...config,
  additionalParameters: {
    response_mode: 'query'
  },
};

export const authorizeOauthUser = (
  {
    isSignup,
  },
) => async () => {
  try {
    const oAuthConfig = isSignup ? configForSignup : config;
    const result = await authorize(oAuthConfig);
    console.log({result});
  } catch (error) {
    console.log({error})
  }
};

已尝试方案 #

• 设置response_mode: "query"，问题未解决
• 查阅相关工单，未找到有效解决办法

解决方案建议 #

1. 排查OAuth服务端注册流程配置 #

从日志可以明确看到，响应返回的state比请求的多了registration后缀，这不符合OAuth2.0规范（state参数需原样返回）。需联系服务端开发人员，确认注册流程中是否存在自动拼接标识字符串到state的逻辑，要求修正该问题，保证返回的state与请求完全一致。

2. 临时应急绕过方案（不推荐） #

若暂时无法修改服务端，可尝试在客户端回调环节手动修正state：

• iOS端：修改AppAuth框架的回调处理逻辑，接收响应后移除state中的registration后缀，再交给react-native-app-auth校验。
• Android端：在接收跳转Intent时，提取state参数并移除后缀后再传递给库。
  注意：此方案属于hack手段，会削弱CSRF防护能力，仅建议紧急场景下临时使用，最终需依赖服务端修复。

3. 校验RedirectUrl一致性 #

确认注册与登录场景使用的redirectUrl是否完全一致。部分服务端会针对不同的redirectUrl做差异化处理，可能导致state被意外修改。确保注册流程的redirectUrl与登录流程一致，或服务端对所有合法redirectUrl都能正确返回原始state。

4. 升级依赖版本 #

当前使用的react-native-app-auth@6.4.3版本较旧，尝试升级到最新稳定版，排查是否存在已知的响应解析bug导致state被错误拼接。

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