React Native Apple Sign in

Starting from April 30, 2020 Apple requires that all existing applications using external 3rd party login services (such as Facebook, Twitter, Google etc) must ensure that Apple Sign-In is also provided. This means that the app I am working on which uses Google Sign-In (with Firebase) now needs to be updated with Apple Sign-In.

This provides its own set of challenges because for some reason although the Apple Identity Token returns a name, it doesn’t show up in the credential that is sent to Firebase. Also, the Apple Identity Token does not return a PhotoURL. This means that after a user signs up, certain fields will be missing, which doesn’t ensure a good user experience.

This is how I solved each of those issues.

There are two places that need to be updated. The first is the User profile the second is the User Collection that is created through a trigger when a user signs up to the app. There are also two fields that need to be updated; the displayName field and the photoURL field.

To get the displayName field, we are going to create it from the appleAuthRequestResponse. First, we will use Object destructuring to get the name. const {identityToken, nonce, fullName} = appleAuthRequestResponse;
Next, we will use the name to create the object we will use to update the User profile and User Collection.

let firstName = fullName.givenName[0].toUpperCase() + fullName.givenName.slice(1)
let lastName = fullName.familyName[0].toUpperCase() + fullName.familyName.slice(1)
update = {
        displayName: firstName + ' ' + lastName,
        photoURL: `https://ui-avatars.com/api/?name=${firstName}&length=1&background=455a64&color=ffffff&size=128&font-size=0.6`
}

I figured that while we are at it let’s make sure the name is capitalized. I found a great api from https://ui-avatars.com/ that uses a name to create an avatar. It is similar enough to Gmail’s that it works. There is no login or limiting on it and it is simple to use. The final images are cached but nothing else is stored. You can use something like Firebase Storage to hold the cached image if you like.

Finally, when we sign in with the credential we will update both the User profile and the User Collection.

return auth().signInWithCredential(appleCredential)
             .then(() => {
               auth().currentUser.updateProfile(update)
               firebase.functions().httpsCallable('updateProfile')(update)
             })

That’s it! Hope this helps in your implementation of Apple Login in your React Native app. Happy coding!