Image Source : WebsOptimization Based on new guidelines of the Apple Store, in an , it is essential to integrate a sign-in button with Apple if you are utilizing social platforms such as Facebook, Twitter, Gmail and others. Additionally, if you are already using an app, then this sign-in feature with Apple assists you to get the attention of more iOS users. So, using the sign in with Apple in an iOS app is always a beneficial option. iOS application Sign-in With apple Applications that offer login service with social sites (such as Twitter, Gmail, Facebook, LinkedIn and others) or 3rd party service in order to authenticate or provide direct access to the primary account with the applications should provide the same Sign-in function with Apple. Why Sign in With Apple is Important? Integrated sign in with Apple assists users to sign in with their Apple ID into websites and different applications. By using Apple ID and sign in feature users can save their time that is required in filling the forms, entering the details like email address, password, name, address, contact number and others. Users can directly set up their account and enter into the app right away.  Two-factor authentication is used to provide extreme protection to all accounts as well as there will be no tracking of your activities by Apple. Security built-in All accounts using the sign in with Apple are secured with 2-factor authentication. Apple users can re-authenticate their sign in using Touch ID or Face ID. Respect for Privacy Privacy was the main factor considered while developing sign in with Apple. There is limited data collection to the user's data like name and email address. As well as there will be no tracking by Apple while they interact with the app. Works Everywhere Sign in with Apple works with every browser and devices such as iOS, watchOS, macOS and others. It is version independent and allows you to deploy it on your website as well. Anti fraud Sign in with Apple utilizes on-device machine learning and other data to offer a privacy-friendly signal to help users to know about the genuineness of a new user. React Native Apple Authentication A properly typed React Native library backing for Apple Authentication on iOS, having support for all AppleButton versions. The library will only work if you ensure the following: Essentials to utilizing this library @invertase/respond local apple-verification On your Mac system set up react-native iOS development environment. Utilizing Xcode version 11 or higher. It will assist you to build utilizing iOS version 13, the only version available for allowing access with Apple. Utilizing React Native version 0.60 or higher. Steps for integrate sign in with apple id Step1 : If you want to set up react-native iOS development environment on your Mac machine please follow below steps: - Open your project in Xcode and click it under the target's header. - Click on Signing and capabilities then go to + Capability menu to add Sign in. - You are required to Sign in as a team in case of this error message. - After signing, your status must display no error message as mentioned below. - Now click on Account in the navigation bar available at the top of . You will either be required to create an account if not have an existing account or sign in. The account dashboard should seem like this. Tap your mouse on profiles, IDs and certificates as an option available in the left-hand sidebar. In case all these entries (like profiles, IDs & certificates) are not visible to you then it tends that you are not enrolled in the Apple developer program. It is a must while developing Apple product. Apple's developer console - Click on Identifiers in the left-hand sidebar. Tap on your project in the list, in our case, TestAppleAuthentication. To Sign in with Apple tick the checkbox and edit button, Choose Enable as a primary App ID and tap on Save button. - Now click the save button you will see at the top of the screen. In case you select another application as your primary application, you will require to visit the above procedure, up until you navigate to the Apple developer console, and select the Group with the TestAppleAuthentication ID and your existing primary AppID option. - Point to remember: - Click on keys in the left-hand sidebar and make a new key. - Give a name to this new key. Tick the checkbox next to Sign In with Apple, and tap on configure. - Select TestAppleAuthentication as primary app ID. - Now you have to register your key, download it and secure it. Now the initial setup is done. Step2: Install Library by using the following command in Terminal Npm install @invertase/react-native-apple-authentication Manual linking will not be required with this module because it offers React Native auto-linking. Step3: Implement Login App.js React, {Component} ; {Platform, StyleSheet, View, TouchableOpacity, Text} ; appleAuth, {
  AppleButton,
  AppleAuthRequestOperation,
  AppleAuthRequestScope,
} ; { (props) { (props); .state = { : ,
    };
  } handleResponse() { { appleAuthRequestResponse = appleAuth.performRequest({ : AppleAuthRequestOperation.LOGIN, : [
          AppleAuthRequestScope.EMAIL,
          AppleAuthRequestScope.FULL_NAME,
        ],
      }); (appleAuthRequestResponse[ ]) { .setState({ : ,
        });
      }
    } (error) { (error.code === AppleAuthError.CANCELED) {
      } (error.code === AppleAuthError.FAILED) {
        alert( );
      } (error.code === AppleAuthError.INVALID_RESPONSE) {
        alert( );
      } (error.code === AppleAuthError.NOT_HANDLED) {
      } (error.code === AppleAuthError.UNKNOWN) {
        alert( );
      }
    }
  }

  onLogout() { .setState({ : ,
    });
  }

  render() { ( <AppleButton
            buttonStyle={AppleButton.Style.BLACK}
            buttonType={AppleButton.Type.SIGN_IN}
            onPress={() => this.handleResponse()}
            style={styles.appleButton}
          />
        ) : (
          <TouchableOpacity
            style={styles.logoutButton}
            onPress={() => this.onLogout()}>
            <Text style={{color: 'white'}}>LOGOUT</Text>
          </TouchableOpacity>
        )}
      </View> import from 'react' import from 'react-native' import from '@invertase/react-native-apple-authentication' export default < > class App extends Component Props constructor super this isLogin false async try // performs login request const await requestedOperation requestedScopes if 'realUserStatus' this isLogin true catch if if 'Touch ID wrong' if 'Touch ID wrong' if if 'Touch ID wrong' this isLogin false return {!this.state.isLogin ? ( < = > View style {styles.container} );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  appleButton: {
    width: 300,
    height: 50,
    margin: 10,
  },
  logoutButton: {
    width: 300,
    height: 50,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
}); OUTPUT: Sign in With Apple not is needed if: Your application is a client for particular 3rd-party service and its users are needed to sign in via any 3rd party service, social media platform or mail to access their account. Your application utilizes an electronic ID or industry-supported or government citizen identification system to offer access to the users. Your application is related to a business, enterprise or education niche that needs the users to sign in with an existing enterprise or education account. Your application specifically utilizes the account set up and sign-in systems of your own company. Thank you for your reading, if you stuck on any step feel free to write your query on comment, I will try give you my best support! You can also contact me for any other react native issue!

Too Long; Didn't Read

Making security fun one episode at a time

Signing In with Apple in React-Native App [A How-To Guide]

Too Long; Didn't Read

Ankur Raiyani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Signing In with Apple in React-Native App [A How-To Guide]

Too Long; Didn't Read

Ankur Raiyani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES