CODEWITHSUNDEEP
firebasereact-nativefirebase-authenticationexpo
Victor
Victor

Reputation: 395

expo-apple-authentication with React Native Firebase Auth

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);
}

Upvotes: 1

Views: 1051

Answers (2)

Mauro Russo
Mauro Russo

Reputation: 357

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

Upvotes: 1

Victor
Victor

Reputation: 395

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.

Upvotes: 1

Related Questions