How to “Sign in with Apple” on React Native

A simple guide to authenticating your users with Apple on React Native and Node.js

Unsplash: Sascha Sturm

Recently with a client, we have been rejected on the App Store because we have enabled a 3rd part authentication (Facebook) without adding “Sign in with Apple”.

So, we had to deal with it and implement “Sign in with Apple” in our app. We wanted to have:

• “Sign in with Apple” button
• Link the “Apple account” with our accounts in our Back-End.

What is “Sign in with Apple”?

“Sign in with Apple” is an authentication method that allows us to:

• Protect account with two-factor authentication
• Give the user email to the app or not (If not, apple will give an alias)
• Get user Infos
• Etc…

In this article, we will create a simple sign-in system and count the times the user has signed in

Setup

To follow this article, you will need:

• A React Native (Really? 😂)
• An Apple Developer account
• A Node.js backend

Now, we will configure our app on the apple developer website.

Create your App ID

On Certificates, Identifiers & Profiles > Identifiers:

Create App ID

Add “Sign in with Apple” in the App ID capabilities:

Add capability

Create Key

Now that the App ID is ready we will create a key to use it with Node.js. This time we need to go on: Certificates, Identifiers & Profiles > Keys

And add a Key:

• Give it a name
• Check “Sign in with Apple”
• Configure “Sign in with Apple”, select your App ID
• Register the key
• Download it (You will not be able to redownload it)

Modify the project in Xcode

Once you have created your App ID and your key, you can add the capabilities on Xcode.

You need to select a development team as follow:

In “Signing & Capabilities”, select your development team:

Then you can add a capability:

Add the Sign-in button

Our app is ready to use “Sign in with Apple”. We will add a button to use this method by using @invertase/react-native-apple-authentication package:

yarn add @invertase/react-native-apple-authentication

For this example, I’ve created a project with Expo minimal (TypeScript). And added the sign-in button on the App.tsx as follow:

The sign-in works like that:

• The user press on the button -> Calls onAppleButtonPress()
• We make a request to Apple
• We get the user Credential
• And if the user is authorized, we call the API

That’s it for the React Native part 😎

Our backend part

As said, we want to link the Apple auth to our accounts in the API. I’ve created a sample API that you can found here: dmg.link/blog-apple-signin-api-repo. If you have already made a REST API, you will understand how the HTTP request is handled. So, we will only see the Auth part 😉

We can create a controller that will:

• Get the token (AccessToken) from the Post request
• Get Apple Data from AccessToken
• Get appleId
• Count the number of connections of the user
• Return the user

As you can see, I am importing the “AppleAuth” file from the utils folder. This file is here to create a connection with the Apple servers:

Enjoy the App

Our backend & app are now ready to sign in with Apple. We can test it 😎:

On the App

Demo app

In the db

MongoDB Collection

We can see that the user is linked by the Apple ID and has signed in 5 times.

Now, you are able to implement “Sign in with Apple” and let your users sign in faster.

GitLab Repos:

• app: dmg.link/blog-apple-signin-app-repo
• api: dmg.link/blog-apple-signin-api-repo

You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀

Automate your React Native App with Fastlane

How to Use Face ID With React Native or Expo