Sign in with Apple using React and Nodejs

Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. Instead of filling out forms, verifying email addresses, and choosing new passwords, they can use Sign in with Apple to set up an account and start using your app right away. In this article, we’ll look into how to set up Sign in with Apple using React and Nodejs. First things first — let’s have a look at our prerequisites.

DEMO

REPO

Prerequisites

1. You should be enrolled in Apple Developer Program.
2. You should create Apple ID and Service ID in your Apple Developer Account.
3. Generate a private key for your Service ID in your Apple Developer Account.

Apple ID, Service ID, and Private Key Setup

Assuming that you’re already enrolled in Apple Developer Program, let’s start by creating our Apple and Service ID’s.

1. Log in to your Apple Developer Account, go to “Certificates, Identifiers & Profiles” page, and select “Identifiers” section.
2. Register a new App Identifier by clicking “plus” button. Enter the description and Bundle ID.

Turn on the “Sign In with Apple” capability, and enable this App ID as a primary App ID.

3. Register a new Services ID.

4. Enter description and identifier, enable “Sign In with Apple” feature and click the “Configure” button to configure domain and return URL. Remember the identifier, domain, and return URL. Make sure the return URL is the exact same URL of your link where you’ll be implementing Sign in with Apple as we’ll be using the popup option. If your return URL is misspelled, the button will still work but it gets stuck.

5. Return to “Certificates, Identifiers & Profiles” page, switch to “Keys” section, and register a new private key by clicking “plus” button.

6. Enter a name for the key, enable “Sign In with Apple”, associate the key with primary App IDs created at step 2, and download the key.

7. As the last step, go to your Apple Developer account, select the “Membership” section, and find your Team ID. You will need to know this value later.

Now we have our service ID, redirect URL, team ID, key ID, client ID, and private key. Let’s move into react and nodejs to use these values in our app.

First, we need to create a React application with the Nodejs server setup. I’m going to skip this step and use this template.

Next, we need to install Apple Sign-in Button using the react-apple-login

package. Navigate into the client folder and run the following command:

npm i react-apple-login

Now we have our sign-in button installed, let's create the component:

Now every time a user clicks on the sign-in button, Apple will open up a pop-up for credentials to be entered. Once the form is filled out, we need to catch the response in our call back function and send it to the backend as:

The response we get from Apple Sign in returns an Authorization object with code and object_id. We need to send this to the backend and authenticate it. Let’s go ahead and set up our backend.

We need to create a /config folder and place our AuthKey(created in step 6) file in the folder. Make a config.json file in the config/ file and fill out your details like:

Once our configurations are set up, install the following packages in the backend:

npm i apple-auth jsonwebtoken

Go into the server file and bring in the following packages:

Let’s bring in our key, decode it and authenticate it:

Things to remember:

1. If your redirectURL is not registered with Apple, the popup may malfunction and not work.
2. Apple only returns the user object the very first time the user logs in. Subsequent logins will not return user details, only email. You might need to save the user details in your database if you plan on using them in the future.
3. You can only test Sign in With Apple using a secure HTTPS connection.

Feel free to reach out to me if you have any questions: ishakertem.com