Calling authorize API throws an error [Cannot read property 'authorize' of null]

[amoghkulkarnifr]

Issue

I am trying to use Azure AD B2C services in an Android app. I have installed and setup react-native-app-auth by using npm install react-native-app-auth --save and updating my android/app/build.gradle file according to these instructions.

My proof-of-concept code for using this library is as follows (which is a modified version of this example and this config combined) -

//// relevant imports

const defaultAuthState = {
  hasLoggedInOnce: false,
  accessToken: "",
  accessTokenExpirationDate: "",
  refreshToken: "",
};

const azureADConfig = {
  issuer:
    "https://<<tenant id>>.b2clogin.com/<<tenant id>>.onmicrosoft.com/<<user flow>>/v2.0",
  clientId: "<<client/app id>>",
  redirectUrl: "<<redirect url>>", // the redirectUrl must end with a slash
  scopes: ["openid", "offline_access"],
};

const App = () => {
  const [authState, setAuthState] = useState(defaultAuthState);

  const handleAuthorize = useCallback(async () => {
    try {
      const newAuthState = await authorize(azureADConfig);
      setAuthState({
        hasLoggedInOnce: true,
        ...newAuthState,
      });
    } catch (error) {
      Alert.alert("Failed to log in", error.message);
    }
  }, []);

  return (
    <View style={styles.container}>
      {authState.accessToken ? (
        <View style={styles.textContainer}>
          <HeadingText>accessToken</HeadingText>
          <BodyText>{authState.accessToken}</BodyText>
          <HeadingText>accessTokenExpirationDate</HeadingText>
          <BodyText>{authState.accessTokenExpirationDate}</BodyText>
          <HeadingText>refreshToken</HeadingText>
          <BodyText>{authState.refreshToken}</BodyText>
        </View>
      ) : (
        <View style={styles.resultContainer}>
          <HeadingText>
            {authState.hasLoggedInOnce ? "Goodbye." : "Hello, stranger."}
          </HeadingText>
        </View>
      )}

      <View style={styles.buttonContainer}>
        {!authState.accessToken ? (
          <Button onPress={() => handleAuthorize()} text="Authorize AzureAD" />
        ) : null}
      </View>
    </View>
  );
};

When I try to call authorize API, I get the error message in the alert box Cannot read property 'authorize' of null (screenshot below). This seems to be a duplicate of #817 (which is marked as 'solved', but the issue still continues to get similar reports from other devs). Can this be resolved? How can I debug this?

---

Environment

• Identity Provider: Azure AD B2C
• Platform: Android
• react-native Version: 0.72.1
• react-native-app-auth Version: 7.2.0
• Are you using Expo?: Yes
• Expo version: ~49.0.18

[emmanuel-salvo]

It happens the same to me