Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase
August 23, 2021
Setup the Firebase Project
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 installation is pretty straightforward:
npm i @capacitor-community/apple-sign-in
Configure Firebase in Ionic
Configure Apple Sign-in for Ionic
Blog by Mick Patterson