Expo托管应用集成react-native-msal初始化失败求助

错误信息 #

Error initializing the pca, check your config. [TypeError: Cannot read property 'createPublicClientApplication' of null]

背景 #

我严格按照react-native-msal的Expo配置文档操作，但Expo托管应用不支持执行npx pod-install命令。

我的App.js代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import PublicClientApplication from "react-native-msal";
import { useEffect } from 'react';

const config = {
    auth: {
        clientId: "my_client_id",
        authority: 'https://login.microsoftonline.com/organizations'
    }
};

export default function App() {
  const pca = new PublicClientApplication(config);

  async function initialize() {    
    try {
      await pca.init();
    } catch (error) {
      console.error('Error initializing the pca, check your config.', error);
    }
  };

  useEffect(() => {
    initialize();
  }, [])

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

打印的pca实例 #

{
  "config": {
    "auth": {
        "authority": "https://login.microsoftonline.com/organizations", 
        "clientId": "my_client_id"
    }
  }, 
  "isInitialized": false
}

我发现pca实例上没有init()方法，更换不同的authority也无法解决问题，请问哪里操作有误？

解决方案 #

1. 核心问题：原生依赖未加载 #

Expo托管应用无法运行pod-install，导致iOS端的MSAL原生SDK没被集成，这就是createPublicClientApplication为null的根本原因——原生模块初始化失败。

2. 具体修复步骤 #

• 转为Expo预构建项目：把托管应用改成预构建模式，就能支持原生依赖安装。执行命令：

  npx expo prebuild
  

  之后再运行npx pod-install，就能正确安装iOS端的MSAL依赖。
• 移除无用的init()调用：从打印的实例能看到，pca本身没有init()方法，这个调用完全多余。直接使用实例的其他方法（比如登录）即可，不需要手动初始化。修改代码示例：

  export default function App() {
    const pca = new PublicClientApplication(config);
  
    const signIn = async () => {
      try {
        const result = await pca.acquireToken({
          scopes: ["User.Read"]
        });
        console.log(result);
      } catch (err) {
        console.error(err);
      }
    };
  
    return (
      <View style={styles.container}>
        <Text onPress={signIn}>点击登录</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
  

• 校验版本兼容性：确保react-native-msal版本和当前Expo SDK版本匹配，部分旧版本的库可能不支持最新Expo环境。
• 确认配置正确性：检查clientId是有效的Azure AD应用ID，authority格式符合场景（组织/个人/租户对应不同格式）。

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