Tech Bytes

Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase

August 23, 2021

Setup the Firebase Project

If you are new to Firebase then you’ll need to sign up (it’s free!), otherwise head over to the Firebase Console and hit the Add project button.

Give your project a name in step 1, if you want analytics, leave it enabled in step 2 and hit create.

Once it has finished spinning up, hit the iOS button to add an iOS app to the project. Apple sign-in is only really useful for users with Apple devices, so iOS only.

You will need to provide a bundle ID but everything else can be ignored for now.

Create an Ionic Capacitor app

Over in a terminal, create a new ionic app using the blank template and any framework you prefer from the options.

ionic start appleSignInDemo blank

Once that is finished, we need to add Capacitor to the app:

npm i @capacitor/core

npm i -D @capacitor/cli

npx cap init

The command will prompt some questions about the naming of your app. Make sure it matches the bundle you specified in the Firebase console.

Add iOS and Sign-in with Apple Capacitor Plugin

After the ionic CLI has finished creating the app we need to add the iOS platform and the Apple Sign-in plugin:

npm i @capacitor/ios

npx cap add ios

The Apple Sign-in plugin is part of the Capacitor Community Github repo and was originally written by Max Lynch (the CEO of Ionic itself).

The installation is pretty straightforward:

npm i @capacitor-community/apple-sign-in

Configure Firebase in Ionic

Configure Apple Sign-in for Ionic

© 2021, Mick Patterson