Ionic 5 iOS Cordova App - Apple Sign in with Firebase

We are planning to cover here the implementation of Apple Sign In in a real iOS device with Firebase and a Ionic 5 cordova app. It’s a bit hard and it involves a lot of not coding process such Apple Developer Console, but everything will be explain to get a nice Sign In flow as the one below.

Looks what we need right?

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

Alex Lopez is creating writing/journalism | Patreon

Apple started rejected some of the apps which are not including Apple Sign In as part of their logging process. Here, today we will sort that out in order to comply with their requirements. Good news are that if you have already an app the implementation can be really simple as most of the process is handle by Apple and Firebase so let’s get down to this!

What do we need.

We will need:

1. Firebase Project.
2. Apple Service up and an App set up and running.
3. Create and download our plist file for the project.
4. Ionic Blank Instance.
5. Import Firebase and sign-in-with-apple plugin into your app.

Firebase Project

We will need to set up our Firebase config variables in our environment, you can check out how to do that in the article below. You don’t need to go to the Firestore section, is just ok with set up a Firebase Project + add the config to the environment.ts

Firebase in your Ionic 5 app

Set up your Apple Service and Your App.

All the Apple Service configuration is very well detailed and explain on this previous article.

Ionic 5 WebApp — Apple Sign in with Firebase

We that service configured we will just need to add an app. Keep this data as it’s important to configure our file to connect the iOS app to our Firebase instance.

Firebase and iOS app.

The next step is add our App created in our Firebase project, to do that we just add an iOS app in the project view of Firebase console.

This will take us to the configuration of the plist file.

Once we have that file ready we just need to paste it on the root of our project. Save that file we will need it in a second.

Ionic + Firebase.

Just start your favorite console and just run the commands to start a new Ionic instance. Please install firebase and the plugin we need. I added AngularFire just in case you want to extend the Sign in process to anything else in the DB so feel free to play.

ionic start Ion5Fire tabs --type angular
npm i firebase
npm i @angular/fire
npm install @ionic-native/sign-in-with-apple
ionic cordova plugin add cordova-plugin-sign-in-with-apple

Do you remember the plist file? ok it´s time to paste on the route of our project. Don’t forget to name correctly your app in the config.xml file

Firebase should now be correctly connected to our app. so time to have fun!!! :D

Let’s code

There is not a lot of complex things in the code, this app is really simple so enjoy!

We will start by adding our Plugin to the providers… This is essential (as most of the things we do here..) if we want this to work. As I mentioned, There are also other things, such as Angular FireModule that we use in other articles so either you install that with npm i @angular/fire or please remove them from your app.module.ts But I also think in your project you will have them so you should be familiar with this.

Second thing is to initialize our Firebase instance. For that we should do it in our app.component.ts.

If you want to get deeper on this go to check the article below, it will explain the rest.

Firebase in your Ionic 5 app

And finally!!! we are arrive to our page where we will code the auth process. This can be easily optimized as there are some redundant parts of the codes and you can simplify, but the intention of this code is making you understand how it works so you can implement it on your current Auth flows and in your app so yes, I agree you can (and you should) make it a lot simpler.

First let set up the view and we make clear what we need.

Time to do MAGIC in our tab1.page.ts, where we will basically set up a simple flow that will follow this logic.

1. We call cordova plugin to get the Apple Sign In thingy,
2. We will get the data from this action and we will send it straight forward to our firebase project.
3. We will add the listener of the auth state change so we gather the information from the now Signed In user.
4. We will also add a button that will trigger the Firebase Signout if the user is logged in.

As I said, it can be easily optimized and it SHOULD BE if you are planning implement Apple Sign in in your production app, this logic is only intended to explain how the process works

And that should be it, that should work.

Let’s try.

Well this is not as easy as it may look, as in order to make this work we will need to sign the app with a Apple Dev account so we need to go through xcode.

First of all is to build our iOS project. So:

ionic cordova build iOS

That will take a small while… and keep reading while it runs. What can go wrong? Everything… this is cordova and this is xcode but trust me you will get to the solution.

It may happen to you for example “Cannot find module ‘nan’”, Easy solution is to run “npm i -g nan” and “export NODE_PATH=$(npm root -g)”

I add this note because it happens to me, but honestly ionic cordova build ios is as dangerous as an angry elephant in the middle of the city main festival… So take it easy, find your problem and google it. Something I learnt… you are never the first one on getting an error message.

So… if you managed to get a success build, now we need xcode to sign the app. So go to platforms/ios in the root of your project and just run the workspace.

That should open xcode, make sure you sign it with a valid Apple ID, also, you should already see that we use Sign In With Apple… if you see that we are in good track!

So that should be it! Install the app in a device and it should just work with the flow below:

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

Alex Lopez is creating writing/journalism | Patreon

Conclusion.

While code is easy and it’s not really complex, I cannot say the same about the process, however this is a necessary part of your app if you are planning to have any success with your app.

So implement this process and let’s kick the next Apple Review!! Good luck!!