Expo React Native集成react-native-msal遇createPublicClientApplication空指针错误

我遇到了StackOverflow上一个类似的错误，但已尝试过该问题下的所有建议，现补充更多信息求助。

使用的技术栈 #

• nodejs
• expo/react-native
• android studio
• java jdk（使用keytool）
• openssl（版本0.9.8k_WIN32）

遵循的指南 #

• Expo配置指南
• 已完成Expo Android配置的步骤1
• （可选）尝试过一篇第三方指南，但内容存在缺失

配置过程 #

通过Android Studio完成项目构建，包名为com.ced.expomsaldemo，构建成功。通过命令行生成SHA1密钥并提供给Azure管理员，获得如下配置信息：

{
  "client_id" : "<-- client uuid -->",
  "authorization_user_agent" : "DEFAULT",
  "redirect_uri" : "msauth://com.example.expomsaldemo/<-- hash key -->",
  "authorities" : [
    {
      "type": "AAD",
      "audience": {
        "type": "AzureADMyOrg",
        "tenant_id": "<-- tenant uuid -->"
      }
    }
  ]
}

代码实现 #

import React, { useState } from 'react';
import { Pressable, Text, View } from 'react-native';
import PublicClientApplication from 'react-native-msal';
import type { MSALConfiguration, MSALInteractiveParams, MSALResult } from 'react-native-msal';
import { useNavigation } from '@react-navigation/native';
import { mainScreenSelections } from '@app/utils';
import { buttonStyles, globalStyles } from '@app/styles';

const config: MSALConfiguration = {
  auth: {
    clientId: '<-- client uuid from azure -->',
    // This authority is used as the default in `acquireToken` and `acquireTokenSilent` if not provided to those methods.
    // Defaults to 'https://login.microsoftonline.com/common'
    authority: `https://login.microsoftonline.com/<-- tenant uuid from azure -->/v2.0`
  }
};
const scopes = ['scope1', 'scope2'];

export default function Guest(): JSX.Element {
  const navigation = useNavigation();
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  const handleLogin = async () => {
    try {
      setIsLoggingIn(true);
      const pca = new PublicClientApplication(config);
      const response = await pca.init();
      console.log('response:', response);

      // Acquiring a token for the first time, you must call pca.acquireToken
      const acquireTokenParams: MSALInteractiveParams = { scopes };
      console.log('acquireTokenParams:', acquireTokenParams);
      const acquireTokenResult: MSALResult | undefined = await pca.acquireToken(acquireTokenParams);
      console.log('acquireTokenResult:', acquireTokenResult);

      // On subsequent token acquisitions, you can call `pca.acquireTokenSilent`
      // Force the token to refresh with the `forceRefresh` option
      // const params: MSALSilentParams = {
      //   account: result!.account, // or get this by filtering the result from `pca.getAccounts` (see below)
      //   scopes,
      //   forceRefresh: true
      // };
      // const result: MSALResult | undefined = await pca.acquireTokenSilent(params);

      // // Get all accounts for which this application has refresh tokens
      // const accounts: MSALAccount[] = await pca.getAccounts();

      // // Retrieve the account matching the identifier
      // const account: MSALAccount | undefined = await pca.getAccount(result!.account.identifier);

      // // Remove all tokens from the cache for this application for the provided account
      // const success: boolean = await pca.removeAccount(result!.account);

      // // Same as `pca.removeAccount` with the exception that, if called on iOS with the `signoutFromBrowser` option set to true, it will additionally remove the account from the system browser
      // const params: MSALSignoutParams = {
      //   account: result!.account,
      //   signoutFromBrowser: true
      // };
      // const success: boolean = await pca.signOut(params);
    } catch (error: any) {
      console.log('error:', error);
    } finally {
      setIsLoggingIn(false);
    }
  };

  return (
    <View style={{ ...globalStyles.guestContainer, gap: 20 }}>
      <Text>Guest Screen</Text>
      <Pressable
        style={buttonStyles.btnMain}
        onPress={() => navigation.navigate(mainScreenSelections.dashboard.route as never)}
      >
        <Text style={buttonStyles.btnMainTxt}>Go To Dashboard</Text>
      </Pressable>
      <Pressable style={buttonStyles.btnMain} onPress={handleLogin}>
        <Text style={buttonStyles.btnMainTxt}>Login</Text>
      </Pressable>
      {isLoggingIn && <Text>Logging In...</Text>}
    </View>
  );
}

问题复现步骤 #

1. 按下键盘'a'键启动Android模拟器
2. 点击页面上的“Login”按钮
3. 触发错误：TypeError: Cannot read property 'createPublicClientApplication' of null

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