Possible Unhandled Promise Rejection (id: 0): TypeError: null is not an object

Question

I'm getting the following error..

WARN Possible Unhandled Promise Rejection (id: 0): TypeError: null is not an object (evaluating 'this.Auth0Module.hasValidCredentialManagerInstance')

UPDATE - Oddly There is no error when the emulator runs in Android Studio. However when the emulator is run from VSCode the error appears.

Here is my code so far... The env variables are working correctly and on the Auth0 side I believe I've set up the necessary application URI's.

I understand the error to essentially be saying, we can't find any value for the Auth0Module object property you are looking for?

I'm not sure how to solve this error or where to start. All advice is welcome.

import {AUTH0_DOMAIN, CLIENT_ID} from '@env';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import {useAuth0, Auth0Provider} from 'react-native-auth0';

export default function App() {
  return (
    <Auth0Provider domain={`${AUTH0_DOMAIN}`} clientId={`${CLIENT_ID}`}>
      <View style={styles.container}>
        <Text style={styles.title}>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
        <LoginButton />
      </View>
    </Auth0Provider>
  );
};

const LoginButton = () => {
  const {authorize} = useAuth0();

  const onPress = async () => {
    try {
      await authorize();
    }
    catch(error) {
      console.log('this is an error: ',error);
    }
  }

  return <Button onPress={onPress} title="Log In"></Button>
}

console.log(AUTH0_DOMAIN);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4f5',
    alignItems: 'center',
    justifyContent: 'center',
    borderStyle: 'solid',
    borderColor: 'black',
    borderWidth: 5,
    
  },
  title : {
    fontSize: 30,
  }
});

Here is the app.json

{
  "expo": {
    "name": "myPackage",
    "slug": "myPackage",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.myPackage"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "react-native-auth0",
        {
          "domain": "myDomain"
        }
      ]
    ]
  }
}

Here is a picture with some more info:

Answer 1

Essentially - react-native-auth0 is native code which isn't compatible with expo go

I'm posting this answer because to run native code you need a development build and expo is directing people to use eas to create these. However eas waiting times can be over an hour and you have a limited amount of builds that can be stored in their server. That being said the prebuild command will allow you to cut your waiting time and only takes a few extra steps.

More information on Prebuild

If you run npx create-react-native-app, you may have to configure native code differently than if you had built using the npx create-expo-app. The two scripts produce slightly different gradle files from what I can tell. My solution in the end used the npx create-expo-app command.

After updating the code on app.json (see original post) to include the plugin section, I did the following

1. I ran npx expo prebuild --platform android
2. I copied the apk over from ./android/app/build/outputs/apk/debug into dropbox/google drive etc
3. I downloaded and installed the apk on to the physical device
4. Scanned the barcode with expo-go

It rendered and worked correctly.

Answer 2

Always start with the source code of a library, for example, your error happens here: https://github.com/auth0/react-native-auth0/blob/89a7c9dc5f2ddd0d315b1249c88266cb8002ee01/src/credentials-manager/index.js#L134 and it has a reference to A0Auth0 object from native.

If you are on android you can put a breakpoint in Android Studio and check what happens in native implementation https://github.com/auth0/react-native-auth0/blob/89a7c9dc5f2ddd0d315b1249c88266cb8002ee01/android/src/main/java/com/auth0/react/A0Auth0Module.java especial with SecureCredentialsManager

Probably you forget to configure something platform specific from https://github.com/auth0/react-native-auth0#configure-the-sdk