expo-apple-authentication with React Native Firebase Auth

Question

I am trying to implement React Native Firebase Auth using expo-apple-authentication. I have added Apple as a provider on the Firebase Auth Console but because the expo-apple-authentication returns an identity token and an authorisation code instead of an identity token and a nonce as per the documentation, I am not able to authenticate using React Native Firebase. I tried generating a nonce manually to go along with the identity token but got [auth/invalid-credential] The supplied auth credential is malformed or has expired.

Does anyone know how to do this?

My current code

 const signInWApple = async () => {
      try {
        const credential = await AppleAuthentication.signInAsync({
          requestedScopes: [
            AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
            AppleAuthentication.AppleAuthenticationScope.EMAIL,
          ],
        });
        // Ensure Apple returned a user identityToken
        if (!credential.identityToken) {
          throw new Error("Apple Sign-In failed - no identify token returned");
        }

        // Create a Firebase credential from the response
        const { identityToken } = credential;
        const nonce = generateRandomNonce();

        const appleCredential = auth.AppleAuthProvider.credential(
          identityToken,
          nonce
        );

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

Mauro Russo · Accepted Answer · 2024-09-09 16:58:17Z

Here's the solution code

const appleSignIn = async () => {
    try {
        const idToken = await AppleAuthentication.signInAsync({
            requestedScopes: [
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                AppleAuthentication.AppleAuthenticationScope.EMAIL
            ]
        })

        const provider = new OAuthProvider('apple.com')
        const credential = provider.credential({
            idToken: idToken.identityToken
        })

        await signInWithCredential(auth, credential)
    } catch (err) {
        devlog(err)
        alert(err)
    }
}

I hope you followed the docs to set the environment, because that is the big deal!

DOCS:

expo: https://docs.expo.dev/versions/latest/sdk/apple-authentication/

firebase: https://firebase.google.com/docs/auth/web/apple

apple: https://developer.apple.com/help/account/configure-app-capabilities/configure-sign-in-with-apple-for-the-web

Victor · Accepted Answer · 2024-04-07 14:39:27Z

1

It turns out you can use the Authorisation Code as nonce. However, when you activate Apple sign in on the firebase console you must include your bundle id (looks something like this com.yourapp.appOne) in the service ID field, otherwise Firebase will not accept the authentication. You can find your bundle ID on your Apple Developer account under Certificates, Identifiers & Profiles.

answered Apr 7, 2024 at 14:39

Victor

4451 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

expo-apple-authentication with React Native Firebase Auth

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related