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

[zibs]

Hello!

I see that you are using Expo here, is it possible that you have not run the prebuild/build commands so that the native module is built and linked correctly?

Otherwise, could you attach a simple reproducible example that I could take a look at?

[amoghkulkarnifr]

Hello @zibs, thanks for getting back. I did run the prebuild command to generate the necessary files, still no luck. As per the reproducible example goes, I tried to include as much code that I could provide in the original post. Anything else specifically that I could provide that might help you?

[zibs]

Hey @amoghkulkarnifr, if you could provide a link to a public repo that I could clone and reproduce the error with, that would be the most helpful thing!

[fabiohvp]

Were you able to fix this? I'm having the same issue with a project using expo

[zibs]

Hey @fabiohvp -- I'd be happy to a look at a reproducible code example that I can run -- otherwise there's not much I can do.

If you're using expo, you have to both prebuild to generate the native files/pods, and then rebuild the actual app on the device. If you don't do this, then the native code doesn't exist on the app/device for it to run.