« Back to Blogs

Login With Apple In React-Native And Firebase

We are going to develop sign in with Apple indicated with react native app, its new feature increases your privacy in your app. It's another Auth application like google and facebook but with more security and it also comes with email masking.

Lets learn something about, What's Email masking in apple login in brief. If you choose to hide your email when you create an account with an app or website using Sign in with Apple, a unique, random email address is created so your personal email can stay private.

So let's get started

Prerequisites :

  1. Node and Npm installed
  2. Xcode
  3. Firebase and react native project integration

Before we begin to sign in users using Apple, first configure Sign In with Apple on Apple's developer site, follow this link for configuration on apple site (Link), then enable Apple as a sign-in provider for your Firebase project.

Step 1: Create react native app
  • npx react-native init Project_name

Ex: npx react-native init SignInWithApple

Step 2: Using third party library for apple authentication and firebase installation

We are using library called, react-native-apple-authentication for library need to make sure your react native version must be 0.60 or higher

  • yarn add @invertase/react-native-apple-authentication @react-native-firebase/app or
  • npm install @invertase/react-native-apple-authentication @react-native-firebase/app

Note: Demo is based on @invertase/react-native-apple-authentication Version 1.1.2, And Firebase @react-native-firebase/app 8.2.0

After that go into ios folder and do pod install

  • cd ios && pod install
Step 3: Enable login option in firebase
  • Goto firebase console, https://console.firebase.google.com/
  • Goto the Authentication
  • Goto Sign in Method, clicks on Apple and Enable it
  • Under the OAuth code flow configuration, add apple team id, KeyId and private key (optional)
  • For Generating private key for apple configuration, follow this link (https://help.apple.com/developer-account/#/dev77c875b7e)

[ Image 1.0 - Firebase configuration for apple login ]

Step 4: Let's design some view

Go into App.js and remove unnecessary code, Create a button for clicking on that button we can call handle sign in method,

   ...
   <Button 
      title={Sign in with Apple}
      onPress={handleSignInWithApple}
   />
   ...
   
   const handleSignInWithApple = () => {}
   
Step 5: Configuration on XCode

Open XCode, Go into ios folder and open the workspace

Under the target directory, in project goto sign in & capabilities which below in image we can see,

Click on Signing and under the Team : Choose appropriate company here i given dummy company name

Same thing do for Second file under the TARGETS,

After that Click on + Capability, and add Sign in with apple option, which can see in below image

[ Image 2.0 - XCode configuration for apple login ]

Now, save it and Run the app in simulator

Step 6: Implement the Login Process
import appleAuth, {
      AppleAuthRequestScope,
      AppleAuthRequestOperation,
   } from '@invertase/react-native-apple-authentication';
   
   import firebase from '@react-native-firebase/app';
   
   const handleSignInWithApple = async () => {
   
      // create login request for apple
      const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: AppleAuthRequestOperation.LOGIN,
         requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME],
      });
   
      const {
         identityToken,
         nonce
      } = appleAuthRequestResponse;
      if (identityToken) {
         const appleCredential = firebase.auth.AppleAuthProvider.credential(identityToken, nonce);
   
         firebase.auth()
            .signInWithCredential(appleCredential)
            .then((user) => {
               // Succeed fully user logs in
            })
            .catch((error) => {
               // Something goes wrong                  
            });
      }
   }
   

Now, your login with apple using react native and firebase completed successfully. If you have any query contact us for support !!

Conclusion 

The trend for React native has proliferated in the last few years and react-native helps to develop faster web and mobile applications. Surekha Technologies is a react native app development company and we provide all the services regarding react native.

contact-us Request a callback WhatsApp