With 10 years’ experience as a professional software developer, X has worked in a wide variety of different technologies and has amassed a wealth of experience and a passion for all things JS / TS.
X is the man Empire State turns to when we need to make dreams a reality. We thought it’d be a great idea for him to share discoveries as he does so.This series is intended to share snippets of X’s latest findings; things he’s worked on; challenges he’s overcome; or anything else that is on his mind – told in his customary short, direct and to-the-point style.
If any of these posts have saved your ass in a significant way, buy X a beer (or 7! 😛 ).
– Ed
Integrating Sign in with Apple in an Ionic 3+ mobile app
Apple has instituted a new policy whereby if your app uses any method of “social login”, it is mandatory to also support “Sign in with Apple”.
There are great resources available from Apple themselves if you’re creating a web platform or a mobile app. However, if you are creating a hybrid app, then it might be a little trickier than initially meets the eye.
The web version “applesigninjs” redirects the user away from your app and you can’t get back to your app once the “Sign in with Apple” has run its course. This means it isn’t a viable option for a hybrid app.
If you are struggling to incorporate this and have an urgent app update to push up, don’t worry. Let me take you through how I implemented this.
There are a few Cordova plugins out there, but they aren’t all currently maintained and a few of them have unresolved Git issues – which makes the prospect of using one a bit daunting.
Thankfully, after trying a few of the existing Cordova plugins, I managed to come right with this one: https://github.com/nrikiji/cordova-signin-with-apple-plugin#readme
As per usual, you can add this to your project with a simple:
| cordova plugin add cordova-signin-with-apple-plugin |
After installing the plugin and building your project, you might find the following error:
| window.signinWithApple is not defined |
Don’t worry, to resolve this, simply add the following declaration to the top of your file:
| declare var window: any; |
After that, everything should work as per the documentation. Essentially, you can include the something like the following:
| window.signinWithApple.auth({ scopes: “fullName, email” }, function(result) { }, function(err) { }); |
Just a few things to keep in mind:
Happy coding!
