Expo AuthSession对接Keycloak 21报错请求未加载完成问题求助

问题根源 #

你遇到的「请求加载完成前无法发起认证提示」错误，是因为认证请求还未完成初始化就调用了promptAsync，同时存在Keycloak自动发现地址配置错误的问题。

修复步骤及代码调整 #

1. 修正Keycloak自动发现地址
   Keycloak的OIDC自动发现地址需要指向你的realm根路径，确保替换为实际的https://iam.mydomain/realms/myrealm（代码中之前的地址有误）。

2. 控制认证触发时机
   通过request对象的存在状态控制按钮可用性，避免在配置加载完成前发起认证请求。

3. 完善AuthRequest配置
   显式指定responseType为Code，符合Keycloak的OIDC规范要求。

4. Keycloak客户端后台配置
   确保Keycloak客户端设置正确：

• 访问类型设为public（React Native无客户端密钥）
• 有效重定向URI包含AuthSession.makeRedirectUri生成的地址（使用代理时为https://auth.expo.io/@你的Expo用户名/项目slug）
• 开启对应权限范围（openid、email等）

修正后的完整代码 #

import React from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import * as AuthSession from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();

const useProxy = true;
const redirectUri = AuthSession.makeRedirectUri({ useProxy });

export default function Index() {
  const discovery = AuthSession.useAutoDiscovery(
    "https://iam.mydomain/realms/myrealm"
  );

  const [request, result, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: "vue-id",
      redirectUri,
      scopes: ['openid', 'email', 'offline_access', 'profile'],
      responseType: AuthSession.ResponseType.Code,
    },
    discovery
  );

  return (
    <View style={styles.container}>
      <Button 
        title="INGRESAR" 
        onPress={() => promptAsync({ useProxy })}
        disabled={!request}
      />
      {result && (
        <Text style={styles.resultText}>
          {JSON.stringify(result, null, 2)}
        </Text>
      )}
      {!discovery && <Text>加载认证配置中...</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  resultText: {
    marginTop: 20,
    fontSize: 12,
    textAlign: 'left',
    width: '100%',
  },
});

额外注意事项 #

• Expo Go测试必须启用useProxy: true，独立构建应用时可配置自定义scheme并关闭代理。
• 检查Keycloak的CORS设置，允许应用访问地址请求。
• 如果仍有问题，可通过discovery对象的状态调试配置加载情况。

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