React Native集成Keycloak认证后无法跳转至应用页面

核心问题分析 #

你之前对redirectUri的理解有误：它不是React Native的页面路径，而是唤起你的原生应用的深度链接Scheme。Keycloak认证成功后只会通过这个Scheme打开你的应用，不会直接帮你跳转到内部页面，页面跳转需要你自己在应用内监听认证成功事件来触发。

具体解决步骤 #

1. 正确配置深度链接Scheme和Keycloak后台

• 确定你的应用的深度链接Scheme（比如com.example.name://callback），并在iOS的Info.plist和Android的AndroidManifest.xml中配置好，确保应用能被该Scheme唤起。
• 登录Keycloak后台，找到你的客户端，在Valid Redirect URIs中添加这个Scheme（比如com.example.name://*或者具体的com.example.name://callback），保存配置。
• 在ReactNativeKeycloakProvider的initOptions中，将redirectUri设置为和后台一致的Scheme：

  initOptions={{
    redirectUri:"com.example.name://callback",
    // 其他初始化配置...
  }}
  

2. 监听认证成功事件，触发页面跳转

利用ReactNativeKeycloakProvider的onEvent回调，监听onAuthSuccess事件，通过导航实例跳转到目标页面：

onEvent={(event, error) => {
  console.log("Keycloak event :", event, error);
  // 当认证成功时，跳转到指定页面
  if (event === 'onAuthSuccess') {
    // 确保navigationRef已正确初始化并可用
    navigationRef.navigate('SampleBlank');
    // 如果要跳转到Dashboard并传参：
    // navigationRef.navigate('Dashboard', { screen: 'DashboardScreenStack' });
  }
}}

3. 调整加载状态判断逻辑

你的isLoadingCheck当前返回!keycloak.authenticated，意味着未认证时会显示加载组件（但你注释了LoadingComponent），建议调整逻辑，确保认证成功后能正常渲染应用：

isLoadingCheck={(keycloak) => {
  console.log("Authenticated", keycloak.authenticated);
  // 只有当Keycloak还在初始化且未认证时，才视为加载中
  return keycloak.isLoading || !keycloak.authenticated;
}}

关键注意点 #

• 不要用RN页面路径（比如./src/screens/SampleBlank）作为redirectUri，这完全不符合深度链接的规则。
• 确保navigationRef已正确绑定到NavigationContainer，否则无法调用navigate方法。

内容的提问来源于stack exchange，提问作者Pooja Rajendran C