{"id":3218,"date":"2020-04-07T13:29:13","date_gmt":"2020-04-07T13:29:13","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3218"},"modified":"2023-07-18T13:11:53","modified_gmt":"2023-07-18T17:11:53","slug":"adding-sign-in-with-apple-to-an-ionic-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app","title":{"rendered":"Adding Sign In with Apple to an Ionic App"},"content":{"rendered":"<p><em>This is a guest post from Simon Grimm, Ionic Developer Expert and educator at <a href=\"https:\/\/ionicacademy.com\/\">the Ionic Academy<\/a>. Simon also writes about Ionic frequently on his blog <a href=\"https:\/\/devdactic.com\/\">Devdactic<\/a>.<\/em><\/p>\n<p>Introduced a while ago, <a href=\"https:\/\/developer.apple.com\/sign-in-with-apple\/\">Sign in with Apple<\/a> makes it easy for users to sign in to your apps and websites using their Apple ID. As of April 2020, this feature is required if you use any sort of 3rd party or social login on iOS (<a href=\"https:\/\/developer.apple.com\/app-store\/review\/guidelines\/#sign-in-with-apple\">some exclusions apply<\/a>). This includes Facebook Login, Google Sign-In, Sign in with Twitter, Sign In with LinkedIn, Login with Amazon, or WeChat Login.<\/p>\n<p>The flow of this authentication process is mostly the same as with any other OAuth provider, which means it should be familiar, but it involves a lot of detailed configuration in different places.<\/p>\n<p><!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"933\" class=\"aligncenter size-full wp-image-3219 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in.gif\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 480px; --smush-placeholder-aspect-ratio: 480\/933;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"933\" class=\"aligncenter size-full wp-image-3219\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in.gif\" alt=\"\" \/><\/noscript><\/p>\n<p>To make this process easy for you, we\u2019ll go through all necessary steps together in order to implement this new sign in functionality in your Ionic app using Capacitor. After you are done with the implementation you will have an identity token from Apple that you could use to build a full authentication flow with e.g. Firebase or your own custom backend!<\/p>\n<h2>Apple App Configuration<\/h2>\n<p>Before we do any coding, we need to configure a few things. First of all, you need an Apple App ID &#8211; either create a new one like in the image below or use your already existing ID.<\/p>\n<p>If you need a new one, simply click the plus the <a href=\"https:\/\/developer.apple.com\/account\/resources\/identifiers\/list\">create a new identifier inside your Apple developer account<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"2438\" height=\"746\" class=\"aligncenter size-full wp-image-3220 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier.png\" alt=\"\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier.png 2438w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-300x92.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-1024x313.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-768x235.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-1536x470.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-2048x627.png 2048w\" data-sizes=\"auto, (max-width: 2438px) 100vw, 2438px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2438px; --smush-placeholder-aspect-ratio: 2438\/746;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2438\" height=\"746\" class=\"aligncenter size-full wp-image-3220\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier.png\" alt=\"\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier.png 2438w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-300x92.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-1024x313.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-768x235.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-1536x470.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ios-identifier-2048x627.png 2048w\" sizes=\"auto, (max-width: 2438px) 100vw, 2438px\" \/><\/noscript><\/p>\n<p>Besides the regular information, it\u2019s important that you enable <strong>Sign In with Apple<\/strong> further down the page in the list of <strong>capabilities<\/strong>.<\/p>\n<p>You will later need the <strong>bundle ID<\/strong> you specified in here, so leave the tab open or remember it.<\/p>\n<h2>Setting up Your Ionic App<\/h2>\n<p>Now we can get into some code. Let\u2019s start by creating a new Ionic app with a blank template and <a href=\"https:\/\/capacitorjs.com\">Capacitor<\/a> integration:<\/p>\n<pre><code class=\"language-shell\">ionic start appleApp blank --type=angular --capacitor\ncd .\/appleApp\nnpm i https:\/\/github.com\/rlfrahm\/capacitor-apple-login\n<\/code><\/pre>\n<p>We only need to install the <a href=\"https:\/\/github.com\/rlfrahm\/capacitor-apple-login\">Capacitor community plugin for Apple Sign In<\/a> to implement the Apple Sign-in additionally.<\/p>\n<p>If you haven\u2019t done during initialization you also need to make sure Capacitor uses the right Bundle ID for your app, so open the <strong>capacitor.config.json<\/strong> and insert the name of the App ID that you created in our first step:<\/p>\n<pre><code class=\"language-json\">{\n  &quot;appId&quot;: &quot;com.devdactic.appleauth&quot;,\n  &quot;appName&quot;: &quot;appleApp&quot;,\n  &quot;bundledWebRuntime&quot;: false,\n  &quot;npmClient&quot;: &quot;npm&quot;,\n  &quot;webDir&quot;: &quot;www&quot;,\n  &quot;cordova&quot;: {}\n}\n<\/code><\/pre>\n<p>To add the iOS project and build the native app through Capacitor you can now simply run:<\/p>\n<pre><code class=\"language-shell\">ionic build\nnpx cap add ios\n\n# Whenever you make changes\nionic build &amp;&amp; npx cap copy\n<\/code><\/pre>\n<p>Now we just need a few more lines&#8230;<\/p>\n<h2>Building the Apple Sign In Flow<\/h2>\n<p>First of all, you should check on which platform your app runs, since the plugin we installed only works for native iOS apps.<\/p>\n<p>For the login process, you only need to call the <strong>Authorize()<\/strong> function on the Capacitor plugin, which will then trigger the native Apple dialog. Once we get the result, we can use the token to perform any kind of other operation or authentication against another service.<\/p>\n<p>You can now change your <strong>app\/home\/home.page.ts<\/strong> to:<\/p>\n<pre><code class=\"language-typescript\">import { Component, OnInit } from &#039;@angular\/core&#039;;\nimport { AlertController } from &#039;@ionic\/angular&#039;;\nimport { Plugins } from &#039;@capacitor\/core&#039;;\n\n@Component({\n  selector: &#039;app-home&#039;,\n  templateUrl: &#039;home.page.html&#039;,\n  styleUrls: [&#039;home.page.scss&#039;],\n})\nexport class HomePage implements OnInit {\n  showAppleSignIn = false;\n  user = null;\n  constructor(private alertController: AlertController) {}\n  async ngOnInit() {\n    const { Device } = Plugins;\n    \/\/ Only show the Apple sign in button on iOS\n\n    let device = await Device.getInfo();\n    this.showAppleSignIn = device.platform === &#039;ios&#039;;\n  }\n\n  openAppleSignIn() {\n    const { SignInWithApple } = Plugins;\n    SignInWithApple.Authorize()\n      .then(async (res) =&gt; {\n        if (res.response &amp;&amp; res.response.identityToken) {\n          this.user = res.response;\n        } else {\n          this.presentAlert();\n        }\n      })\n      .catch((response) =&gt; {\n        this.presentAlert();\n      });\n  }\n\n  async presentAlert() {\n    const alert = await this.alertController.create({\n      header: &#039;Login Failed&#039;,\n      message: &#039;Please try again later&#039;,\n      buttons: [&#039;OK&#039;],\n    });\n    await alert.present();\n  }\n}\n<\/code><\/pre>\n<p>The response you get from Apple will have the following structure (for successful authentication):<\/p>\n<pre><code class=\"language-json\">{\n  &quot;response&quot;: {\n    &quot;email&quot;: &quot;foo@bar.com&quot;,\n    &quot;identityToken&quot;: &quot;importantToken&quot;,\n    &quot;familyName&quot;: &quot;Grimm&quot;,\n    &quot;user&quot;: &quot;AppleUserId&quot;,\n    &quot;givenName&quot;: &quot;Simon&quot;,\n    &quot;authorizationCode&quot;: &quot;authCode&quot;\n  }\n}\n<\/code><\/pre>\n<p>The response also depends on whether the users allow to show the email or hide it, in the latter case you will receive a more anonymous email from Apple which will forward all emails to the real user email.<\/p>\n<p>It\u2019s also important to note that <strong>you will see this full response only during the first successful sign in<\/strong>. After that, the <em>familyName<\/em>, <em>givenName<\/em> and <em>email<\/em> fields will be null, so be cautious if you use the information of this token to update your user records!<\/p>\n<p>Note: I\u2019ll show you a way to reset the whole process at the end so you can test it more than once!<\/p>\n<p>Now the view is actually the most boring part of this tutorial &#8211; simply add a button and perhaps surround everything with a little check on the <strong>user<\/strong>, so we can print out all the user information from the token if we are logged in.<\/p>\n<p>The following code goes to your <strong>app\/home\/home.page.html<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;ion-header&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;\n      Apple Sign In\n    &lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content class=&quot;ion-padding&quot;&gt;\n\n  &lt;ion-card *ngIf=&quot;!user; else welcome&quot;&gt;\n    &lt;ion-card-content&gt;\n      &lt;ion-button expand=&quot;full&quot; (click)=&quot;openAppleSignIn()&quot; *ngIf=&quot;showAppleSignIn&quot;&gt;\n        &lt;ion-icon name=&quot;logo-apple&quot; slot=&quot;start&quot;&gt;&lt;\/ion-icon&gt;\n        Sign in with Apple\n      &lt;\/ion-button&gt;\n    &lt;\/ion-card-content&gt;\n  &lt;\/ion-card&gt;\n\n  &lt;ng-template #welcome&gt;\n    &lt;ion-card&gt;\n      &lt;ion-card-header&gt;\n        &lt;ion-card-title&gt;Welcome back!&lt;\/ion-card-title&gt;\n      &lt;\/ion-card-header&gt;\n      &lt;ion-card-content&gt;\n        {{ user | json }}\n      &lt;\/ion-card-content&gt;\n    &lt;\/ion-card&gt;\n  &lt;\/ng-template&gt;\n\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<p>Now we are ready, but in order to run everything successfully we also need to apply a little change to our native project.<\/p>\n<h2>Xcode Settings<\/h2>\n<p>You should have already added the iOS platform by now, so run a new build with your code changes and then open the workspace file of your project either from finder or by running:<\/p>\n<pre><code class=\"language-shell\">npx cap open ios\n<\/code><\/pre>\n<p>Inside the Xcode project, we need to navigate to Signing &amp; Capabilities -&gt; Add Capability, and from the list select Sign In with Apple like you did in our first step inside your Apple identifier as well.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1458\" height=\"686\" class=\"aligncenter size-full wp-image-3221 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability.png\" alt=\"\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability.png 1458w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-300x141.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-1024x482.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-768x361.png 768w\" data-sizes=\"auto, (max-width: 1458px) 100vw, 1458px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1458px; --smush-placeholder-aspect-ratio: 1458\/686;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1458\" height=\"686\" class=\"aligncenter size-full wp-image-3221\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability.png\" alt=\"\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability.png 1458w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-300x141.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-1024x482.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-capability-768x361.png 768w\" sizes=\"auto, (max-width: 1458px) 100vw, 1458px\" \/><\/noscript><\/p>\n<p>Now you can finally build the app on your device and go through the Apple Sign In flow &#8211; and you should also see the identity token of the Apple response printed in your card!<\/p>\n<h2>Testing Apple Sign In<\/h2>\n<p>In most cases, you want to test the process a few times, but after going through the initial dialog once, you won\u2019t see it again, even if you uninstall the app.<\/p>\n<p>But here\u2019s a fix to reset your data that allows you to perform everything fresh again: Inside your iOS device, open the settings app and navigate to Apple ID -&gt; Password &amp; Security -&gt; Apple ID logins. In this screen, you can see all the apps where you used Apple Sign In, and you can simply delete the entry for your own app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"933\" class=\"aligncenter size-full wp-image-3222 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings.png\" alt=\"\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings.png 480w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings-154x300.png 154w\" data-sizes=\"auto, (max-width: 480px) 100vw, 480px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 480px; --smush-placeholder-aspect-ratio: 480\/933;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"933\" class=\"aligncenter size-full wp-image-3222\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings.png\" alt=\"\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings.png 480w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-logins-settings-154x300.png 154w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/noscript><\/p>\n<p>Now you can test the process again inside your app, and the initial dialog to sign in will show up again like in the image you see below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1384\" height=\"2692\" class=\"aligncenter size-full wp-image-3223 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog.png\" alt=\"\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog.png 1384w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-154x300.png 154w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-526x1024.png 526w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-768x1494.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-790x1536.png 790w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-1053x2048.png 1053w\" data-sizes=\"auto, (max-width: 1384px) 100vw, 1384px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1384px; --smush-placeholder-aspect-ratio: 1384\/2692;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1384\" height=\"2692\" class=\"aligncenter size-full wp-image-3223\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog.png\" alt=\"\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog.png 1384w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-154x300.png 154w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-526x1024.png 526w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-768x1494.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-790x1536.png 790w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/apple-sign-in-dialog-1053x2048.png 1053w\" sizes=\"auto, (max-width: 1384px) 100vw, 1384px\" \/><\/noscript><\/p>\n<h2>Conclusion<\/h2>\n<p>Implementing the new Apple Sign In flow is certainly not hard from a code perspective, but it\u2019s important to configure everything correctly in order to make it work.<\/p>\n<p>Of course, this is not yet a full authentication mechanism &#8211; you could add something like Firebase to the mix and pass the identity token to Firebase and create users based on that data. If you want to see a post about that as well just leave a comment and I\u2019m happy to share it with the community!<\/p>\n<p>For everyone still using Cordova, you can of course also <a href=\"https:\/\/www.npmjs.com\/package\/@ionic-native\/sign-in-with-apple\">use a Cordova plugin<\/a> instead of Capacitor &#8211; the process will mostly be the same.<\/p>\n<p>If you want to learn more about Ionic with a library of 40+ courses and supportive community, you can also <a href=\"https:\/\/ionicacademy.com\/\">join the Ionic Academy<\/a> and get access to a ton of learning material.<\/p>\n<p>And don\u2019t forget to <a href=\"https:\/\/www.youtube.com\/user\/saimon1924\">subscribe to my YouTube channel<\/a> for fresh Ionic tutorials coming every week!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy. Simon also writes about Ionic frequently on his blog Devdactic. Introduced a while ago, Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. As of April [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":3241,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[151,100,179],"class_list":["post-3218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-capacitor","tag-ios","tag-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Sign In with Apple to an Ionic App - Ionic Blog<\/title>\n<meta name=\"description\" content=\"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Sign In with Apple to an Ionic App\" \/>\n<meta property=\"og:description\" content=\"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-07T13:29:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T17:11:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Grimm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@schlimmson\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Grimm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\"},\"author\":{\"name\":\"Simon Grimm\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\"},\"headline\":\"Adding Sign In with Apple to an Ionic App\",\"datePublished\":\"2020-04-07T13:29:13+00:00\",\"dateModified\":\"2023-07-18T17:11:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\"},\"wordCount\":1109,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png\",\"keywords\":[\"Capacitor\",\"iOS\",\"native\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\",\"url\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\",\"name\":\"Adding Sign In with Apple to an Ionic App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png\",\"datePublished\":\"2020-04-07T13:29:13+00:00\",\"dateModified\":\"2023-07-18T17:11:53+00:00\",\"description\":\"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Sign In with Apple to an Ionic App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\",\"name\":\"Simon Grimm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"caption\":\"Simon Grimm\"},\"sameAs\":[\"https:\/\/x.com\/schlimmson\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/schlimmson\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Sign In with Apple to an Ionic App - Ionic Blog","description":"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app","og_locale":"en_US","og_type":"article","og_title":"Adding Sign In with Apple to an Ionic App","og_description":"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.","og_url":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app","og_site_name":"Ionic Blog","article_published_time":"2020-04-07T13:29:13+00:00","article_modified_time":"2023-07-18T17:11:53+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","type":"image\/png"}],"author":"Simon Grimm","twitter_card":"summary_large_image","twitter_creator":"@schlimmson","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Simon Grimm","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app"},"author":{"name":"Simon Grimm","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6"},"headline":"Adding Sign In with Apple to an Ionic App","datePublished":"2020-04-07T13:29:13+00:00","dateModified":"2023-07-18T17:11:53+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app"},"wordCount":1109,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","keywords":["Capacitor","iOS","native"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app","url":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app","name":"Adding Sign In with Apple to an Ionic App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","datePublished":"2020-04-07T13:29:13+00:00","dateModified":"2023-07-18T17:11:53+00:00","description":"The flow of the Apple Sign In process is mostly the same as with any other OAuth provider, but it involves a lot of detailed configuration in different places.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/adding-sign-in-with-apple-to-an-ionic-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Adding Sign In with Apple to an Ionic App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6","name":"Simon Grimm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","caption":"Simon Grimm"},"sameAs":["https:\/\/x.com\/schlimmson"],"url":"https:\/\/ionic.io\/blog\/author\/schlimmson"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/03\/ionic-apple-sign-in-capacitor-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3218"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3218\/revisions"}],"predecessor-version":[{"id":5503,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3218\/revisions\/5503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3241"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}