React Native: Sign in with Apple

How to integrate Sign in with Apple for React Native apps

Cut out your registration forms with Sign in with Apple integration

Sign in with Apple was released alongside iOS 13 and provides a simple and private way for users to authenticate with their apps and websites that support the service. With Sign in with Apple, users can essentially use their Apple ID as the trusted identifier for apps and websites, removing the need to create a new account with the app in question.

This article walks through the process of integrating Sign in with Apple in the context of React Native, and will unravel the code behind this seamless authentication mechanism. A couple of key packages will be used to facilitate integrating Sign in with Apple, namely react-native-apple-authentication for the React Native side and apple-signin-auth for the Node.js server side.

Before jumping into the code needed to get this service up and running in React Native, the next section breaks down exactly what to expect from the Sign in with Apple service from both a user standpoint and development standpoint. This will give us enough context to go ahead and integrate the service.

How Sign in with Apple Works

Users and developers will have very different perspectives on the service. The user experiences a quick and frictionless authentication process whereas us developers have the more challenging job of understanding the APIs, setting up the credentials needed, understanding the service workflow, and implement that workflow as React Native components and server-side logic with Node.js.

The above may sound like a lot of work, but in reality a clear understanding of the process will aid in a swift implementation — that is exactly what this article will enable.

Sign in with Apple from a user standpoint

The experience on the user end is rather simple and elegant if implemented correctly. All the user is required to do is tap a “Sign in with Apple” button (that follows Apple’s style guidelines) which then summons a Touch ID / Face ID prompt to authenticate. A successful…