React Native集成Azure AD B2C调用init()报createPublicClientApplication空值错误

我在为React Native应用配置Azure AD B2C时，使用react-native-msal库，调用init()方法时触发错误：Cannot read property 'createPublicClientApplication' of null。

我的MSAL配置如下：

auth: {
    clientId: 'fc8ecae3-0883-45f4-ac1c-013dfa11cb9c',
    authorityBase: 'https://stashcafe.b2clogin.com/tfp/stashcafe.onmicrosoft.com',
    policies: {
      signInSignUp: 'B2C_1_SignInUp',
      passwordReset: 'B2C_1_PasswordReset',
    },
    // redirectUri: Platform.select({ default: undefined }),
  },
  // web only:
  cache: { cacheLocation: 'localStorage' },

export const b2cScopes = ['https://stashcafe.onmicrosoft.com/api/user_impersonation'];

替换为自己的Azure AD配置后，错误依然存在。

排查与解决步骤 #

• 检查原生端依赖配置
  该错误通常是原生模块未正确加载导致的，需确保iOS/Android端完成对应配置：

  • Android：确认AndroidManifest.xml中已配置重定向URI、网络权限，build.gradle中添加了MSAL相关依赖与配置。
  • iOS：检查Info.plist里的CFBundleURLTypes、LSApplicationQueriesSchemes配置是否正确，执行pod install完成依赖安装。

• 调整初始化时机
  避免在模块加载阶段直接调用init()，建议在组件挂载后（比如useEffect钩子中）或AppRegistry.registerComponent之后执行初始化，确保原生模块已完成初始化。

• 补全redirectUri配置
  注释掉redirectUri会导致平台无法正确处理授权回调，需根据平台配置对应URI：

  redirectUri: Platform.select({
    ios: 'msauth.com.your.BundleID://auth',
    android: 'msauth://com.your.packagename/your_signature_hash'
  }),
  

• 验证Azure配置一致性
  核对authorityBase、policies名称与Azure AD B2C后台完全一致，b2cScopes中的资源URI需匹配Azure中配置的API范围，避免拼写错误。

• 清理缓存并重建项目

  • 重置React Native缓存：npx react-native start --reset-cache
  • Android：执行./gradlew clean后重新构建
  • iOS：删除Pods文件夹与Podfile.lock，重新执行pod install后构建

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