Expo Auth Session Web端Google OAuth登录异常求助

• 检查回调URL的一致性
  确保以下三个地方的redirectUri完全一致（包括协议、域名、路径，无多余斜杠）：

  • Expo Auth Session配置的redirectUri（比如makeRedirectUri({ useProxy: false, path: '/login' })生成的地址）
  • Google OAuth控制台中设置的「授权重定向URI」
  • 你的项目中实际处理回调的页面路径（比如/login）

• 在回调页面添加结果处理逻辑
  弹窗跳转至/login?state=...后未关闭，是因为回调页面没有触发Auth Session的结果处理。在/login页面的组件中必须调用AuthSession.getRedirectResult()：

  import { AuthSession } from 'expo-auth-session';
  import { useEffect } from 'react';
  
  export default function LoginCallbackPage() {
    useEffect(() => {
      const processAuthResult = async () => {
        const result = await AuthSession.getRedirectResult();
        if (result?.type === 'success') {
          // 处理登录成功逻辑，比如存储token、跳转首页
        } else if (result?.type === 'error') {
          // 处理授权错误
        }
        // 无论结果如何，这个方法会自动关闭弹窗
      };
      processAuthResult();
    }, []);
  
    return <div>处理登录中...</div>;
  }
  

  没有这段代码的话，主页面会因超时而触发dismiss状态，弹窗也会一直停留在回调页。

• 验证state参数匹配
  Expo Auth Session会自动生成state参数用于校验，主页面发起授权请求时的state必须和回调URL中的state完全一致。可以在控制台打印两个阶段的state值：

  • 发起请求时：const authRequest = await AuthSession.startAsync(authConfig); console.log(authRequest.state);
  • 回调页面：console.log(new URLSearchParams(window.location.search).get('state'));
    若不一致，检查路由框架是否修改了URL参数，或是否有第三方插件篡改了请求。

• 升级依赖并检查Web配置

  • 升级expo-auth-session到最新稳定版，旧版本可能存在Web端弹窗监听的bug。
  • 在app.json中配置正确的Web端scheme和redirectUri：

    "expo": {
      "scheme": "your-app-domain",
      "web": {
        "redirectUri": "https://your-app-domain.com/login"
      }
    }
    

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