Expo(+web) with Auth0: NativeModule is undefined and throwing error when using Auth0Provider in expo

[jirwincline]

After following the quick start, And implementing Auth0Provider on my main _layout.tsx I was getting an error that indicated the Native Module for Auth0 was empty

Is there a known issue? The only difference between the quick start and my situation is they’re showing an App.js instead of _layout.tsx which is where the main routes of my app are set up

[jirwincline]

A very simple use of Auth0Provider which causes the issue

import FontAwesome from '@expo/vector-icons/FontAwesome';
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import 'react-native-reanimated';

import { Auth0Provider } from 'react-native-auth0';

import { useColorScheme } from '@/hooks/useColorScheme';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(drawer)',
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <Auth0Provider
      clientId="xxx"
      domain="xxx"
    >
      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="login" options={{ headerShown: false }} />
          <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </Auth0Provider>
  );
}

[MrKrabs]

The same problem for me, did you find a solution?

[nik.baleca]

Hi @jirwincline

Welcome to the Auth0 Community!

I am sorry about the late reply to your inquiry

I would advise you to review this community post regarding the same issue that you are experiencing.

Let me know if you have any other questions regarding the matter or if you have found a solution by leaving a reply on the post!

Kind Regards,
Nik