使用AWS Amplify与React Native InAppBrowser时GitHub OAuth登录失败

可能的原因及修复步骤 #

1. 回调URL配置不匹配 #

GitHub OAuth应用的Authorization callback URL必须与以下两处完全一致：

• AWS Amplify控制台中「Auth → 联合身份 → GitHub」的回调URL
• aws-exports.js 中 oauth.redirectSignIn、redirectSignOut 配置的URL

注意：React Native应用通常使用自定义Scheme（如 myapp://auth），需确保GitHub后台填写的回调URL与该Scheme完全一致，包括大小写、斜杠等细节。

2. Amplify Auth配置错误 #

检查 aws-exports.js 中的OAuth配置，确保GitHub的参数正确：

oauth: {
  domain: 'your-cognito-domain.auth.region.amazoncognito.com',
  scope: ['email', 'openid', 'profile', 'read:user', 'user:email'], // GitHub必需的权限范围
  redirectSignIn: 'myapp://auth',
  redirectSignOut: 'myapp://signout',
  responseType: 'code',
  providers: ['Google', 'GitHub']
}

• 确认 providers 包含 GitHub
• 确保GitHub的 clientId 已正确配置在Amplify控制台和 aws-exports.js 中

3. URL Opener逻辑问题 #

原代码中调用 Linking.openURL(newUrl) 可能导致Amplify无法捕获回调。修改 urlOpener 逻辑，让Amplify直接处理认证结果：

const urlOpener = async (url, redirectUrl, settings) => {
  try {
    if (await InAppBrowser.isAvailable()) {
      const result = await InAppBrowser.openAuth(
        url,
        redirectUrl,
        { ...inAppBrowserSettings, ...settings },
      );
      // 直接返回结果给Amplify处理，避免手动调用Linking
      return Promise.resolve(result);
    } else {
      return Linking.openURL(url);
    }
  } catch (error) {
    Alert.alert(error.message);
    return Promise.reject(error);
  }
};

4. 手动处理Deep Link回调 #

如果Amplify仍无法捕获回调，添加Deep Link监听手动处理：

useEffect(() => {
  const handleDeepLink = async (event) => {
    const callbackUrl = event.url;
    console.log('收到回调URL:', callbackUrl);
    // 让Amplify处理授权响应
    await Auth.handleAuthResponse(callbackUrl);
  };

  const subscription = Linking.addEventListener('url', handleDeepLink);
  return () => subscription.remove();
}, []);

5. 开启调试日志排查细节 #

开启Amplify调试日志，获取更详细的错误信息：

Amplify.Logger.LOG_LEVEL = 'DEBUG';

运行应用后查看控制台输出，重点关注Cognito与GitHub token交换阶段的错误。

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