react-native-firebase icon indicating copy to clipboard operation
react-native-firebase copied to clipboard

Published 20 hours ago • verified publisher icon invertase

[🐛🔥] @react-native-firebase/auth (phone auth) - Redirected to appScheme://firebaseuth/link after resolving recaptcha in ios simulator

Open bryanprimus opened this issue 1 year ago • 38 comments

Issue

Describe your issue here

I'm currently developing a phone authentication for my ios app using @react-native-firebase/auth specifically Phone Auth

in ios simulator we don't have access to Silent APNs notifications for app verification and we will need to resolve recaptcha instead ref: image

The integration went smoothly, but when I tried to resolve the reCAPTCHA on the simulator, I got redirected to appScheme://firebaseuth/link. I believe it's a deep link to that route.

Since I use expo-router, it automatically detects that link and redirected to that screen as shown in this video

https://github.com/invertase/react-native-firebase/assets/46083126/d974cb90-2dce-4d0a-b97e-c6e0f06ae46c

Expected Result

It should stay with the current screen after resolving the captcha

Project Files

Javascript

Click To Expand

package.json:

{
  "name": "",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "lint": "echo \"Running eslint check\" && eslint --fix .",
    "tsc": "tsc"
  },
  "dependencies": {
    "@react-native-firebase/app": "^18.3.0",
    "@react-native-firebase/auth": "^18.3.0",
    "expo": "~49.0.3",
    "expo-build-properties": "~0.8.3",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.6",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "eslint": "^8.45.0",
    "eslint-config-universe": "^11.3.0",
    "eslint-plugin-prettier": "5.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.0.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

  • [x] 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:

 OS: macOS 13.4.1
  CPU: (8) arm64 Apple M1
  Memory: 103.33 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.3.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.06.26.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/bryan/.gem/ruby/2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "29"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/bryan/.rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false
  • Platform that you're experiencing the issue on:
    • [x] 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:
    • "@react-native-firebase/app": "^18.3.0", "@react-native-firebase/auth": "^18.3.0",
  • Firebase module(s) you're using that has the issue:
    • firebase phone auth
  • Are you using TypeScript?
    • Yes

bryanprimus avatar Jul 23 '23 13:07 bryanprimus

Try expo-router unmatched route as described https://docs.expo.dev/routing/error-handling/ and check the path name and if it matches firebaseauthlink redirect back see code sample below.

function UnmatchedScreen(props: UnmatchedProps) {
    const param = useGlobalSearchParams();

    if (param.unmatched === 'firebaseauth,link') {
        return <Redirect href="../" />;
    }

    return (
        <View>
            <Text>404</Text>
       </View>
    );
}

noickare avatar Aug 03 '23 23:08 noickare

Running into the same issue!

Anyone know why it's redirecting to a deep link? Is it possible to change it?

chen-rn avatar Aug 26 '23 03:08 chen-rn

Same, can't find any document to customize this behavior

lsps9150414 avatar Sep 15 '23 17:09 lsps9150414

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Oct 13 '23 17:10 github-actions[bot]

Still waiting for reply 🙏🏻

lsps9150414 avatar Oct 20 '23 01:10 lsps9150414

Having this exact same issue, don't close the issue

riccardogiorato avatar Oct 23 '23 11:10 riccardogiorato

Same here.

balgamat avatar Nov 12 '23 09:11 balgamat

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Dec 10 '23 09:12 github-actions[bot]

Still waiting for reply

lsps9150414 avatar Dec 13 '23 17:12 lsps9150414

I'm running into the same issue. Seems to originate from the recaptcha triggered by firebase authentication that tries to redirect to app-schema://firebaseauth/link, which the expo-router catches

Kledal avatar Dec 13 '23 22:12 Kledal

This is an open source repository, all updates are visible in the form of comments here. The only updates are people asking for updates, no one appears to have the time to investigate and provide more information. If this is impacting you, allocating resources to troubleshoot it in depth is the way to move it forward

mikehardy avatar Dec 13 '23 22:12 mikehardy

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Jan 10 '24 22:01 github-actions[bot]

For Expo v50 with expo-router I had to use the following:

import { Unmatched, Redirect, useGlobalSearchParams } from "expo-router";

export default () => {
    const param = useGlobalSearchParams<{ unmatched: string[] }>();

    if (isFirebaseCallback(param.unmatched)) {
        return <Redirect href="/auth/sign-in" />;
    }

    return <Unmatched />;
};

const isFirebaseCallback = (unmatched: string[] | undefined) => {
    return (
        unmatched?.length === 2 &&
        unmatched[0] === "firebaseauth" &&
        unmatched[1] === "link"
    );
};

micaeldias avatar Jan 31 '24 22:01 micaeldias

I have the same issue.

joaqo avatar Feb 08 '24 15:02 joaqo

Can we please reopen this issue? I was able to use @micaeldias 's code, but it doesn't keep the state of that screen. How can we keep the local state?

iarmankhan avatar Feb 13 '24 18:02 iarmankhan

Sure, can reopen. Please note this is an open source repository. If this is important to you, devoting resources to finding the root cause and proposing a PR is the way to get it fixed

mikehardy avatar Feb 14 '24 16:02 mikehardy

for those who have the same problem you just need to create a route for /firebaseauth/link.js that route should be found. that's where we put the OTP screen afterwards

2n2n avatar Feb 20 '24 07:02 2n2n

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Mar 19 '24 07:03 github-actions[bot]

Hey @2n2n How do you maintain the state of your app? The confirmation is in state and it got lost

iarmankhan avatar Mar 19 '24 19:03 iarmankhan

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Apr 16 '24 20:04 github-actions[bot]

Hey @2n2n How do you maintain the state of your app? The confirmation is in state and it got lost

you can use a state management like redux or zustand for confirmation.

vinhandev avatar Apr 19 '24 10:04 vinhandev

Hey @2n2n How do you maintain the state of your app? The confirmation is in state and it got lost

Hi @iarmankhan, I just rely on the response of my auth auth().onAuthStateChanged(onAuthStateChanged) and store the data using react context. I just let Firebase handle my session.

2n2n avatar Apr 19 '24 22:04 2n2n

@2n2n can you elaborate more? When calling the sign in with phone number it returns a function to then use the sms code. How do you use that function when state is lost from going to the new page?

al3xstathis avatar Apr 22 '24 02:04 al3xstathis

@vinhandev what do you mean ?

adnaneghalem avatar May 07 '24 13:05 adnaneghalem

@bryanltobing I have the exact same issue, and I am not finding a workaround. Any idea since ? :)

adnaneghalem avatar May 07 '24 13:05 adnaneghalem

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

github-actions[bot] avatar Jun 04 '24 14:06 github-actions[bot]

Same here

abdu-zeyad avatar Jun 17 '24 18:06 abdu-zeyad

@al3xstathis while I could not replicate @2n2n's Solution, I found another that seemed to solve the problem for me. Instead of handling the OTP on /firebaseauth/link.js I just redirect backwards from that page and keep my otp on the login screen like such:

import { router } from "expo-router";
import React, { useEffect } from "react";
import { View } from "react-native";

export default function FirebaseauthLinkPage() {
  
  useEffect(() => {
    router.back();
  }, []);

  return (
    <View>
    </View>
  );
}

ryan-setifly avatar Jun 28 '24 11:06 ryan-setifly

@al3xstathis while I could not replicate @2n2n's Solution, I found another that seemed to solve the problem for me. Instead of handling the OTP on /firebaseauth/link.js I just redirect backwards from that page and keep my otp on the login screen like such:

import { router } from "expo-router";
import React, { useEffect } from "react";
import { View } from "react-native";

export default function FirebaseauthLinkPage() {
  
  useEffect(() => {
    router.back();
  }, []);

  return (
    <View>
    </View>
  );
}

For me when I return to the login screen of my app the state is still lost has anyone found a solution that works since?

aniketkhetan avatar Jul 07 '24 14:07 aniketkhetan

@al3xstathis while I could not replicate @2n2n's Solution, I found another that seemed to solve the problem for me. Instead of handling the OTP on /firebaseauth/link.js I just redirect backwards from that page and keep my otp on the login screen like such:

import { router } from "expo-router";
import React, { useEffect } from "react";
import { View } from "react-native";

export default function FirebaseauthLinkPage() {
  
  useEffect(() => {
    router.back();
  }, []);

  return (
    <View>
    </View>
  );
}

This solution worked for me. Thankyou very much

Misterr-H avatar Jul 16 '24 11:07 Misterr-H