DEV Community

loading...
Cover image for An in-depth guide to Sign in with Apple using React Native

An in-depth guide to Sign in with Apple using React Native

Karan Pratap Singh
Software Engineer & Solutions Architect
Updated on ・5 min read

Greetings, React Native Community!

In this article, I will be breaking down the step-by-step process of integrating Apple Sign-in using React Native.

Why do I need to do this?

As per App Store's latest guidelines, it is now compulsory to add sign in with Apple in your iOS app if you're using any other social logins like Google, Facebook, Twitter, etc.

Moreover, if you already have an established app, Sign-in with Apple might help you gain more iOS users who might not want to sign in using other options.

Steps:

  • Apple Developer dashboard setup
  • Adding the capability to our project
  • Integrating React Native package

For the purpose of the demonstration, suppose we created a fresh React Native project called Proximity with bundleId com.proximity.app

Apple Developer dashboard setup

apple-developer-signin

  • Your account dashboard should look like this. If you do not see Certificates, IDs & profiles as an option in the left-hand sidebar, it means you have not yet enrolled in the Apple developer program which is a prerequisite for Apple product development.

apple-developer-dashboard

  • Click on Identifiers in the left-hand sidebar. Click on your project bundleId in the list, in our case, com.proximity.app

identifiers-setup

  • Tick the checkbox for Sign in with Apple and click the Edit button.

identifiers-enable-applesignin

  • Select Enable as a primary App ID and click the Save button.

identifiers-enable-primaryid

  • Click the Save button at the top of the screen.

identifiers-save

  • If you're enabling for the first time then choose the Group with existing primary App ID option and then select your app ID from the drop-down.

  • Click on keys in the left-hand sidebar and create a new key.

key-add

  • Give your new key a descriptive name, something like Apple sign in key for XYZ where XYZ can be your app. Tick the checkbox next to Sign In with Apple, and click Configure.

key-add-setup

  • Select Proximity as our primary app ID.

key-configure

  • Register your key (My advice is to download and keep it securely). The initial setup for Apple sign in from the developer dashboard is now complete.

key-register

Adding the capability to our project

Before we start tinkering with our project, let's enable sign in with Apple capability for our app. Here I am using Xcode 11 for demonstration.

  • Open your project in Xcode by clicking Open another project and navigate to the file: Proximity/ios/Proximity.xcworkspace or Proximity/ios/Proximity.xcodeproj

open-with-xcode

  • Click Proximity under the target's header on the left as shown below and then select Signing and Capabilities on the top tab bar.

select-target

  • Click on + capability to add a new capability. Now you should see a dialog. Select Sign In with Apple to enable this capability.

enable-capability

  • Make sure to select your team and verify that this screen looks similar to one given below without any error.

verify-update-team

Integrating React Native package

Phew!!

Finally, we can start with the actual code.

For this section, we'll be using React Native 0.60+ and @invertase/react-native-apple-authentication by Invertase. They're the team behind react-native-firebase, do check them out!

yarn add @invertase/react-native-apple-authentication
Enter fullscreen mode Exit fullscreen mode
  • Update the cocoapods dependencies.
cd ios && pod install && cd ..
Enter fullscreen mode Exit fullscreen mode
  • Now we'll be implementing a simple screen with login and logout button to see the whole process in action.

screen-setup

  • Here's how the basic code setup might look like.

setup

  • To perform a login request, we can use performRequest method with requestedOperation to perform Login | Logout | Implicit | Refresh requests. We can also request basic information from the user using requestedScopes option as shown in the example below.

login

  • Similar to the login request, we can just change requestedOperation to AppleAuthRequestOperation.LOGOUT. Here's an example for logging out the user.

logout

  • Listen to the credentials revoked event using useEffect hook. This is useful when you want to actively listen if the user logs out.

event

Check out the complete code on Github for the example to get started faster.

I hope all the steps worked and you gained an understanding of how to integrate Apple sign in with React Native.

If you wish to see this live in action check out Proximity where I recently implemented Apple Sign in.

Did you face any issues during the integration? feel free to leave a comment or reach out to me via twitter

Happy Coding! 🎉

Discussion (12)

Collapse
isacjeppsson96 profile image
isacjeppsson96

Hi Karan, I have completed your guide and everything seems to be forking when it comes to xCode and the Apple Developer Console at least. But when I try to login using the simulator I get the error that the device is not supported, encouraging me to use the value of appleAuth.isSupported to check the device before hand. The thing is, the simulator is version 13.4.1 so it should work. Do you know what might be the issue?

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

Hey, this is not an issue with your code. This is expected as apple doesn’t allow services like apple login, push notifications, apple pay from simulator. I also faced this in the past and had to test on my friends phone until I bought a new ios 13 device . Unfortunately you’ll need a real iOS device to test. I think it’s good to use isSupported property to prevent crashes. Hopefully this helps you

Collapse
isacjeppsson96 profile image
isacjeppsson96

Oh, thank you, I will try that. That saved me some headache !

Thread Thread
karanpratapsingh profile image
Karan Pratap Singh Author

No issues, glad this article helped you

Collapse
eizurieta profile image
eizurieta

Hi Karan, thanks for this great guide. Know I can sign in using Apple Sign In, but it only work with IOS devices, I need to also implement the Apple Sign In for Android Devices. Maybe do you know how can achieve that. I really appreciate your efforts.

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

Thanks for reading, sign in with apple is ios/macos (web) only feature as far as I know

Collapse
pierastana profile image
Pierastana

Hi Karan, nice guide for an argument not so popular.
I'm learning now to program application with cordova and ionic and I've a problem with the upload of the app in the Apple Store because it says that I need a "Apple login".
Do you know if there is a nice guide as your one for the integration with Cordova/Angular?

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

Sorry I haven’t worked with cordova

Collapse
lfkwtz profile image
Michael Lefkowitz

Love this! Shared in React Native Now #61

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

Thank you for sharing Michael

Collapse
danphp7 profile image
Carlos Daniel

I followed all the steps, but I got this error

[Error: The operation couldn’t be completed. (com.apple.AuthenticationServices.AuthorizationError error 1000.)]
Enter fullscreen mode Exit fullscreen mode
Collapse
vasylnahuliak profile image
vasylnahuliak

In my case I forgot add Apple Sign Compatibility