Phone authentication in universal app

[MartinN3]

I have tackled issue with auth module not working on web, by using firebase sdk standalone web import to get trough authentication. I now need to fill react-native-firebase with auth that i got from other module, is that doable?

[mikehardy]

If you are using this on the web, you likely want to shim all react-native-firebase APIs to the firebase-js-sdk APIs so that there is no "filling in" and things just work as expected, i.e. https://github.com/invertase/react-native-firebase-authentication-example/tree/main/template/src/shims and the craco.config where webpack is configured with aliases to these shims

[MartinN3]

Thank you.

I have read about shim in other answer but haven't connected the dots although I suspected something.

I guess I have to somehow bind this to metro config that handles build instead of webpack. Will try.

I'll just add tags for other developers: I'm exploring tamagui expo solito universal app.

[MartinN3]

Works like a charm.

create-tamagui-app with expo router

//babel.config.js
module.exports = (api) => {
  const platform = api.caller(caller => caller && caller.platform);
  api.cache(true)

  return {
    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
    plugins: [
      platform === 'web' && [
        'module-resolver',
        {
          alias: {
            '@react-native-firebase/app': './shims/firebase-app-web.ts',
            '@react-native-firebase/auth': './shims/firebase-auth-web.ts',
            '@react-native-firebase/firestore': './shims/firebase-firestore-web.ts',
          },
          extensions: ['.ts', '.tsx', '.js', '.json'],
        },
      ],
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === 'development',
        },
      ],


      // NOTE: this is only necessary if you are using reanimated for animations
      'react-native-reanimated/plugin',
    ].filter(Boolean), // Filter out falsey values to ignore unused plugins,
  }
}

//metro.config.js

...
config.resolver.resolveRequest = (context, moduleName, platform) => {
  // Handle Firebase aliases for web
  if (platform === 'web') {
    const aliases = {
      '@react-native-firebase/app$': 'shims/firebase-app-web.ts',
      '@react-native-firebase/auth$': 'shims/firebase-auth-web.ts',
      '@react-native-firebase/firestore$': 'shims/firebase-firestore-web.ts',
    };

    if (aliases[moduleName]) {
      return {
        filePath: aliases[moduleName],
        type: 'sourceFile',
      };
    }
  }

  // Call the default resolver for all other cases
  return context.resolveRequest(context, moduleName, platform);
};
...

// _layout.tsx
// in render i added recaptcha container

...
      <Paragraph id="recaptcha-container"></Paragraph>
...

//sign-in.tsx
// notice usage of Platform.OS === "web"
...
  const recaptcha = useRef();
  if (Platform.OS === "web") {
    recaptcha.current = new auth.RecaptchaVerifier("recaptcha-container", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
      },
    });
  }

async function handlePhoneAuth() {
    if (!loading && confirmationRef) {
      setLoading(true);
      try {
        const result =
          Platform.OS === "web"
            ? await auth().signInWithPhoneNumber(number, recaptcha.current)
            : await auth().signInWithPhoneNumber(number);
        confirmationRef.current = result.confirm.bind(result);
      } catch (e) {
        setLoading(false);
        confirmationRef.current = null;
        const error = e as FirebaseAuthTypes.PhoneAuthError;
        console.log(error);
        // Alert.alert(
        //   appSettings.t("phone-auth-error"),
        //   appSettings.t(error.code ?? "unknownError"),
        //   [{ text: appSettings.t("OK") }]
        // );
      } finally {
        setLoading(false);
      }
    }
  }

...

[mikehardy]

Glad you got that working! I am using something based off the react-native-firebase-authentication-example myself in production on web/ios/android and it does work well in practice

Just dropping this note to mention that eventually react-native-firebase should support web well as part of platform "other", and it should be possible to use the firebase-js-sdk "modular" (also known as v9+) APIs so that tree-shaking in the bundler works etc etc. That may even be possible right now I just haven't tested it since "other" platform support went in to beta here so I don't have practical experience (vs the shims, which are a hack, but they do work...)

More info here: https://rnfirebase.io/platforms