🔥[🐛] signInWIthPhoneNumber redirects to /firebaselink/auth on Expo development build

[ChrisMungiria]

Issue

After using signinWithPhoneNumber in Expo, the page shows a recaptcha which is fine, but then after completing, it redirects to /firebaseauth/link. My workaround was to create a /firebaseauth/link page, which then returns a redirect to my confirm page. My main concern was storing the confirm function, a workaround I used was so use @react-native-async-storage/async-storage to store the verificationId which I used to get the code snippet below to verify the OTP:

  // Verification ID
  const [verificationId, setVerificationId] = useState<string | null>(null);

  // Get the verificationId from AsyncStorage
  useEffect(() => {
    const getVerificationId = async () => {
      const id = await AsyncStorage.getItem("verificationId");
      setVerificationId(id);
    };
    getVerificationId();
  }, []);

  // Functions
  const submitOTP = async () => {
    setLoading(true);
    try {
      const credential = auth.PhoneAuthProvider.credential(
        verificationId,
        code
      );
      const response = await auth().signInWithCredential(credential);
      // Handle successful authentication (e.g., navigate to home screen)
      console.log("response :", response);
    } catch (error) {
      console.log("Error in submitOTP: ", error);
    } finally {
      setLoading(false);
    }
  };

---

Project Files

Javascript

Click To Expand

package.json:

{
  "name": "new-firebase-test",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-firebase/app": "^20.3.0",
    "@react-native-firebase/auth": "^20.3.0",
    "@react-native-firebase/database": "^20.3.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.23",
    "expo-build-properties": "~0.12.3",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-modules-autolinking": "~1.11.0",
    "expo-router": "~3.5.19",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "@react-native-async-storage/async-storage": "1.23.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

# N/A

AppDelegate.m:

// N/A

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • 20.3.0
• Firebase module(s) you're using that has the issue:
  • e.g. Instance ID
• Are you using TypeScript?
  • Y & 5.3.3

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[balramsinghindia]

Is this library working for auth authentication?

[ChrisMungiria]

Is this library working for auth authentication?

Yes, it is. I had to do a lot of workarounds but it works

[russellwheatley]

@ChrisMungiria - what platform is this occurring on? How is it redirecting to a different view? Firebase Auth just handles authentication, it does not handle routing. This seems like an expo issue.

See this answer #7258 (comment)

[ChrisMungiria]

@ChrisMungiria - what platform is this occurring on? How is it redirecting to a different view? Firebase Auth just handles authentication, it does not handle routing. This seems like an expo issue.

this only seems to happen on iOS, but it works fine on Android. After the ReCaptcha verification, that's where the redirect happens

[russellwheatley]

See this response for an answer: #7258

Closing out in favour of that issue.