Error when signing in with apple and google credentials.

[isacjeppsson96]

Issue

(:fire:) Hi, I have an issue that's preventing me from using Apple and Google sign-in in my react native iOS app.
I'm using the '@invertase/react-native-apple-authentication'-package and I've followed the instructions to set up Apple sign-in on the Apple developer console and firebase console but it doesn't work.
When i call "await firebase.auth().signInWithCredential(appleCredential)" i get the error message: "The supplied auth credential is malformed or has expired.". This behaviour is the same when I use Google sign-in.

I have checked the credential that is being produced and it looks correct to me:

{token: "eyJraWQiOiI4NkQ4OEtmIiwiYWxnIjoiUlMyNTYifQ.eyJpc3M…-TF4ApZb2Nye-v6luV_u2lxTwAGsa*************", secret: "JG0Oh6KEldXYfwQoul_BUf_******", providerId: "apple.com"}

Any ideas what might be wrong?

---

Project Files

Javascript

const appleAuthRequestResponse = await appleAuth.performRequest({ requestedOperation: AppleAuthRequestOperation.LOGIN, requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME], });
// Ensure Apple returned a user identityToken if (!appleAuthRequestResponse.identityToken) { throw 'Apple Sign-In failed - no identify token returned'; }
const { identityToken, nonce } = appleAuthRequestResponse; const appleCredential = firebase.auth.AppleAuthProvider.credential(identityToken, nonce);

// Sign the user in with the credential await firebase.auth().signInWithCredential(appleCredential)

package.json:

# {
  "name": "BarZone",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@bam.tech/react-native-make": "^3.0.0",
    "@invertase/react-native-apple-authentication": "^1.0.0",
    "@react-native-community/google-signin": "^4.0.1",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-native-community/slider": "^2.0.9",
    "@react-navigation/native": "^5.1.1",
    "@react-navigation/stack": "^5.2.3",
    "date-fns": "^2.11.0",
    "geolib": "^3.2.1",
    "react": "16.9.0",
    "react-addons-update": "^15.6.2",
    "react-native": "0.61.5",
    "react-native-check-box": "^2.1.7",
    "react-native-device-info": "^5.5.6",
    "react-native-drawer": "^2.5.1",
    "react-native-fbsdk": "^1.1.2",
    "react-native-firebase": "^5.6.0",
    "react-native-flash-message": "^0.1.15",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-get-location": "^1.4.2",
    "react-native-image-picker": "^2.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localization": "^2.1.6",
    "react-native-maps": "^0.27.1",
    "react-native-multiple-select": "^0.5.5",
    "react-native-responsive-screen": "^1.4.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-shadow": "^1.2.2",
    "react-native-svg": "^12.1.0",
    "react-native-tags-chooser": "git+https://github.com/RZulfikri/react-native-tags-chooser.git",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  }
}

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:

# platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'BarZone' do
  # Pods for BarZone
  pod 'Firebase/Analytics'
  pod 'Firebase/Auth'
  pod 'Firebase/Firestore'
  pod 'Firebase/Storage', '~> 6.13.0'
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'


  #pod 'RNFirebase', :path => '../node_modules/react-native-firebase'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'


  pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'

  pod 'ReactNativeGetLocation', :path => '../node_modules/react-native-get-location'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  pod 'RNAppleAuthentication', :path => '../node_modules/@invertase/react-native-apple-authentication'

  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
pod 'GoogleSignIn', '~> 5.0.2'

  target 'BarZoneTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'BarZone-tvOS' do
  # Pods for BarZone-tvOS

  target 'BarZone-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

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

react-native info output:

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 202.55 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.5.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

---

EDIT:

I have now migrated to react-native-firebase v.6 but I still get the same error.

• 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:
  • 5.6.0
• Firebase module(s) you're using that has the issue:
  • ``
• Are you using TypeScript?
  • N

---

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

[mikehardy]

No idea what's wrong and I've moved to react-native-firebase v6+ now, v5 is no longer supported

Here's a code dump though, that works for me

  async appleSignIn(link?: boolean): Promise<boolean> {
    try {
      const appleCredential = await AppleAuth.performRequest({
        requestedOperation: AppleAuthRequestOperation.LOGIN,
        requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME],
      });

      AppleAuth.onCredentialRevoked(async () => {
        console.warn('If this function executes, User Credentials have been Revoked');
      });

      console.log(
        'UserStore::appleSignIn - user result is:',
        JSON.stringify(appleCredential, null, 2)
      );

      // FIXME we should really store the uid we get back, looks like:
      //   "uid": "000420.fa782337956f441eb0e23e43d8c337b5.0503" and is all we get in future

      this.removeUserChangeListener();

      // FIXME this is not a reliable test! Some times I am not getting the email because
      // the user has deleted their account previously with us, but then they sign in again
      // this only shows up on real device not simulator. And firebsae still gets the email somehow...
      if (appleCredential.email) {
        const providers = await this.getProvidersForEmail(appleCredential.email);
        console.log(
          'UserStore::appleSignIn - got providers for email: ',
          JSON.stringify(providers, null, 2)
        );
        // if google.com is not in the providers, it is first login via google.
        let appleProvider = false;
        let passwordProvider = false;
        for (let i = 0; i < providers.length; i++) {
          if (providers[i] === 'apple.com') {
            appleProvider = true;
          } else if (providers[i] === 'password') {
            passwordProvider = true;
          }
        }

        // If there are providers, but not apple, google actually just automatically does it right.
        if (providers.length !== 0 && !appleProvider) {
          if (passwordProvider) {
            console.log(
              'UserStore::appleSignIn -  other providers but google auto-connects if it is password provider'
            );
          } else {
            this.handleCredentialInUse();
            return Promise.resolve(false);
          }
        }

        // If this is the first time we are seeing apple, handle apple privacy
        // Apple has specific requirements before linking non-anonymous
        // FIXME this may be a problem though as email might not come through again?
        // do we need to rely on uid here?
        if (!appleProvider) {
          console.log('UserStore::appleSignIn - verifying user is okay with apple + non-anonymous');
          const choice = await AlertAsync(
            I18NService.translate('LoginApplePrivacyTitle'),
            I18NService.translate('LoginApplePrivacyText'),
            [
              {
                text: I18NService.translate('Cancel'),
                onPress: () => 'Cancel',
              },
              {
                text: 'OK',
                onPress: () => 'OK',
              },
            ],
            {
              cancelable: false,
              onDismiss: () => 'Cancel',
            }
          );
          if (choice === 'Cancel') {
            console.log(
              'UserStore::appleSignIn - user does not want to link apple id + non-anonymous'
            );
            return Promise.resolve(false);
          }
          console.log(
            'UserStore::appleSignIn - user is just fine linking apple id + non-anonymous'
          );
        }
        // If there are no other providers we should ask if they already have an account
        if (
          providers.length === 0 &&
          (!firebase.auth().currentUser?.providerData ||
            firebase.auth().currentUser?.providerData.length === 0)
        ) {
          console.log('UserStore::appleSignIn - no other providers. See if they are sure');
          const choice = await UserStore.firstLoginDialog();

          if (choice === 'Other Accounts') {
            console.log('UserStore::appleSignIn - user wants to handle other accounts');
            return Promise.resolve(false);
          }
          console.log(
            'UserStore::appleSignIn - user is just fine continuing and creating new account'
          );

          this.setIsNewUser(true);
        }
      } else {
        console.log('UserStore::appleSignIn - no email present, not first apple sign in?');
      }

      // create a new firebase credential with the token
      const credential = firebase.auth.AppleAuthProvider.credential(
        appleCredential.identityToken,
        appleCredential.nonce
      );
      console.log('UserStore::appleSignIn - credential is', JSON.stringify(credential, null, 2));
      let firebaseUserCredential;
      if (!link) {
        // login with credential
        firebaseUserCredential = await firebase.auth().signInWithCredential(credential);
        Analytics.setAnalyticsUser(firebaseUserCredential.user.uid); // TODO, set our own ID?
        Analytics.setAnalyticsUserProperties({ email: firebaseUserCredential.user.email });
        Analytics.analyticsEvent('successAppleSignIn');
      } else {
        if (!firebase.auth().currentUser) {
          return Promise.resolve(false);
        }
        firebaseUserCredential = await firebase.auth().currentUser?.linkWithCredential(credential);
        Analytics.setAnalyticsUser(firebase.auth().currentUser!.uid); // TODO, set our own ID?
        Analytics.setAnalyticsUserProperties({ email: firebase.auth().currentUser!.email });
        Analytics.analyticsEvent('successAppleLink');
      }

      console.log(
        'UserStore::appleSignIn - firebaseCredential was',
        JSON.stringify(firebaseUserCredential)
      );
      if (firebaseUserCredential?.additionalUserInfo?.isNewUser) {
        console.log('UserStore::appleSignIn - user looked new, setting that now');
        this.setIsNewUser(true);
      }
      this.userChangedHandler(
        firebaseUserCredential!.user,
        firebaseUserCredential!.additionalUserInfo
      );
      return Promise.resolve(true);
    } catch (error) {
      if (error.code === 'ERR_CANCELLED') {
        // user cancelled the login flow
        console.log('UserStore::appleSignIn - user cancelled');
      } else if (error.code === AppleAuthError.CANCELED) {
        // user cancelled the login flow
        console.log('UserStore::appleSignIn - authentication request failed');
      } else if (
        error.code === 'auth/email-already-in-use' ||
        error.code === 'auth/credential-already-in-use'
      ) {
        console.log('UserStore::appleSignIn - email already in use, instruct on unlink/delete');
        this.handleAccountInUse();
      } else if (error.code === 'auth/account-exists-with-different-credential') {
        this.handleCredentialInUse();
      } else if (error.code === '1000') {
        // This happens on apple sign-in the first time a user signs in to the phone
        // with their apple account, usually it works the second time
        RX.Alert.show(
          I18NService.translate('ConnectedAccountsConnectionError'),
          I18NService.translate('auth/unknown')
        );
      } else {
        // some other error happened
        console.log(
          `UserStore::appleSignIn - unknown error?${error}`,
          JSON.stringify(error, null, 2)
        );
        RX.Alert.show(
          I18NService.translate('ConnectedAccountsConnectionError'),
          I18NService.translate(error.code)
        );
      }
    } finally {
      this.addUserChangedListener();
    }

    return Promise.resolve(false);
  }

The port from react-native-firebase v5 to v6+ was straightforward so going backwards is also straightforward

I can assert clearly that react-native-firebase, apple sign in, and google sign in all work though - you have a local project issue

[vidursaini]

your code dump was very helpful @mikehardy
it ended my misery
thanks