{"id":1250,"date":"2016-08-09T16:11:46","date_gmt":"2016-08-09T16:11:46","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1250"},"modified":"2016-08-09T18:48:01","modified_gmt":"2016-08-09T18:48:01","slug":"ionic-native-enabling-login-with-touch-id-for-ios","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios","title":{"rendered":"Ionic Native: Enabling Login with Touch ID for iOS"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"600\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\" alt=\"touch-id-ionic-native-img\" class=\"alignnone size-full wp-image-1274 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-300x129.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-768x329.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-1024x439.png 1024w\" data-sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1400px; --smush-placeholder-aspect-ratio: 1400\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"600\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\" alt=\"touch-id-ionic-native-img\" class=\"alignnone size-full wp-image-1274\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-300x129.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-768x329.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img-1024x439.png 1024w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/noscript><\/p>\n<p>Ease-of-use is a primary concern of any mobile app developer. It makes users happy and has a direct impact on many Very Important Things, like adoption, user retention, and monetization. Today, we&#8217;ll look at one of the simplest places to improve the user experience: the login page.<\/p>\n<p>In general, a logged-in user is a more valuable user. Not only does authentication open the door to offering a lot of high-value features that users love like personalization, it also allows app developers to integrate features that matter to their businesses, like securely storing a user&#8217;s payment details to make in-app purchases easier. Clearly, the login page is the gateway to some of our apps&#8217; richest experiences, so the last thing we want is for users to churn out because they couldn&#8217;t remember their login details and had to fumble with password reset flows.<\/p>\n<p>So let&#8217;s make login easy by taking a look at how to use Ionic Native to integrate Touch ID into an Ionic 2 app for iOS.<br \/>\n<!--more--><\/p>\n<p>Allowing users to log in to your app with Touch ID is one of the coolest and easiest ways to enhance the user experience. This is particularly true for iOS apps, since a <a href=\"https:\/\/mixpanel.com\/trends\/#report\/iphone_models\">very large number of users<\/a> have upgraded to an iPhone 6 or 6s.<\/p>\n<p>It&#8217;s high value, only takes a handful of code, and is pretty cool. Who are you to refuse?<\/p>\n<h3>Getting Set Up<\/h3>\n<p>To make things easy, I&#8217;ve put together a simple project for us to start with that has two pages and all the CSS we need. If you want to follow along, feel free to do the following:<\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/amuramoto\/ionic-touchid\/tree\/starter\">Download or clone the project from GitHub<\/a><\/li>\n<li>Run <code>npm install<\/code> inside the project directory to get all the needed dependencies.<\/li>\n<\/ol>\n<p>OK, let&#8217;s take a look at the project.<\/p>\n<p>The first page is &#8216;Home&#8217; in <code>app\/pages\/home\/<\/code>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"534\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page.jpg\" alt=\"login-page\" class=\"aligncenter size-full wp-image-1252 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page-169x300.jpg 169w\" data-sizes=\"auto, (max-width: 300px) 100vw, 300px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/534;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"534\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page.jpg\" alt=\"login-page\" class=\"aligncenter size-full wp-image-1252\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/login-page-169x300.jpg 169w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/noscript><\/p>\n<p>Looks like a pretty standard login form, except that we also have a fingerprint button to allow the user to choose to log in with Touch ID.<\/p>\n<p>The second page is &#8216;Loggedin&#8217; in <code>app\/pages\/loggedin\/<\/code>. The app will transition to this page when the user successfully logs in with touch ID.<\/p>\n<p>That&#8217;s all there is to it. Time to wire everything up.<\/p>\n<p>Touch ID is an <a href=\"ionicframework.com\/docs\/v2\/native\/\">Ionic Native<\/a> plugin, so the first step is to add the plugin to our project:<\/p>\n<p><code>ionic plugin add cordova-plugin-touch-id<\/code><\/p>\n<p>Then import the plugin into our <code>Home<\/code> component in <code>app\/pages\/home\/home.ts<\/code>. While we&#8217;re at it, we&#8217;ll also import our <code>LoggedinPage<\/code>, so that we can transition to it later when the user successfully logs in with Touch ID, as well as <code>Platform<\/code> from <code>ionic-angular<\/code> to give us access to the Ionic Platform lifecycle events:<\/p>\n<pre><code>import {NavController, Platform} from &#039;ionic-angular&#039;;\nimport {TouchID} from &#039;ionic-native&#039;;\nimport {LoggedinPage} from &#039;..\/loggedin\/loggedin&#039;;\n<\/code><\/pre>\n<p>When the component first loads, we&#8217;ll also be checking if TouchID is available on the user&#8217;s device, so we&#8217;ll declare a <code>touchIdAvailable<\/code> variable of type <code>boolean<\/code> to store the result of that check. The variable is <code>private<\/code>, so that it can only be accessed within this component. We&#8217;ll also create an instance of <code>Platform<\/code> in our constructor:<\/p>\n<pre><code>private touchIdAvailable: boolean;\nconstructor(public _navCtrl: NavController, private _platform: Platform) {}\n<\/code><\/pre>\n<h3>Checking for TouchID<\/h3>\n<p>Now that we&#8217;re set up, the next step is to check if TouchID is available. After all, it would make us look pretty bad if we showed the option to log in with Touch ID, when it isn&#8217;t an option on the user&#8217;s device.<\/p>\n<p>To do this, we call the static function <code>TouchID.isAvailable()<\/code> in the constructor for our component once the Ionic Platform is ready, which is the point in the lifecycle when native functionality can safely be called. <code>TouchID.isAvailable()<\/code> returns a promise that resolves if Touch ID is available and rejects if it isn&#8217;t:<\/p>\n<pre><code>constructor(public _navCtrl: NavController, private _platform: Platform) {\n  this._platform.ready().then(() =&gt; {\n    TouchID.isAvailable().then(\n      res =&gt; this.touchIdAvailable = true,\n      err =&gt; this.touchIdAvailable = false\n    );          \n  })\n}\n<\/code><\/pre>\n<p>Next, to make sure the Touch ID button only appears if Touch ID is available, we&#8217;ll add an <code>*ngIf<\/code> conditional to the button, which removes it from the DOM if <code>touchIdAvailable<\/code> evaluates to false:<\/p>\n<p><code>&lt;button *ngIf=&quot;touchIdAvailable&quot; round text-center&gt;<\/code><\/p>\n<h3>Implementing Touch ID<\/h3>\n<p>Time for the cool part! This is all it takes to add Touch ID support to our app:<\/p>\n<pre><code>private startTouchID () {\n  TouchID.verifyFingerprint(&#039;Fingerprints are Awesome&#039;)\n    .then(\n      res =&gt; this._navCtrl.push(LoggedinPage),\n      err =&gt; console.error(&#039;Error&#039;, err)\n    );\n} \n<\/code><\/pre>\n<p>Here, we&#8217;ve declared a <code>startTouchID()<\/code> function that calls the static <code>verifyFingerprint()<\/code> function from the TouchID plugin. This invokes the native Touch ID functionality in iOS. It also takes a message as an argument that will be displayed in the modal when the user is asked to authenticate with Touch ID.<\/p>\n<p><code>verifyFingerprint()<\/code> returns a promise that resolves if the user successfully authenticates with their fingerprint and rejects if they fail. In this case, we navigate to the <code>LoggedinPage<\/code> if the user is successful by pushing the <code>LoggedinPage<\/code> component on to the Ionic navigation stack:<\/p>\n<p><code>res =&gt; this._navCtrl.push(LoggedinPage)<\/code><\/p>\n<p>All we have to do now is update our fingerprint button on our login page to call <code>startTouchID()<\/code> when the button is tapped:<\/p>\n<p><code>&lt;button (click)=&quot;startTouchID()&quot; *ngIf=&quot;touchIdAvailable&quot; round text-center&gt;<\/code><\/p>\n<p>Now, when the user taps the fingerprint icon, they&#8217;ll activate Touch ID and be prompted to provide their fingerprint:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"444\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt.jpg\" alt=\"touchid-prompt\" class=\"aligncenter size-full wp-image-1255 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt.jpg 250w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt-169x300.jpg 169w\" data-sizes=\"auto, (max-width: 250px) 100vw, 250px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 250px; --smush-placeholder-aspect-ratio: 250\/444;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"444\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt.jpg\" alt=\"touchid-prompt\" class=\"aligncenter size-full wp-image-1255\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt.jpg 250w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touchid-prompt-169x300.jpg 169w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/noscript><\/p>\n<h3>Success!<\/h3>\n<p>Since Ionic Native plugins don&#8217;t work in the browser or emulator, you will need to deploy the app to a device to try it out. If you have a developer device set up, <code>ionic run ios<\/code> will do the trick, otherwise try out <a href=\"http:\/\/view.ionic.io\/\">Ionic View<\/a> or <a href=\"http:\/\/docs.ionic.io\/docs\/package-overview\">Ionic Package<\/a>.<\/p>\n<p>Once you have the app running, tap the fingerprint button, give iOS your fingerprint when prompted, and BOOM:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"445\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id.gif\" alt=\"touch-id\" class=\"aligncenter size-full wp-image-1254 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 573px; --smush-placeholder-aspect-ratio: 573\/445;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"445\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id.gif\" alt=\"touch-id\" class=\"aligncenter size-full wp-image-1254\" \/><\/noscript><\/p>\n<p>Pretty sweet reward for all that effort, huh? Unfortunately, she wasn&#8217;t very happy about the hat, but small price to pay for enabling advanced biometric authentication with a pretty minimal amount of code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ease-of-use is a primary concern of any mobile app developer. It makes users happy and has a direct impact on many Very Important Things, like adoption, user retention, and monetization. Today, we&#8217;ll look at one of the simplest places to improve the user experience: the login page. In general, a logged-in user is a more [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":0,"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":[1],"tags":[3],"class_list":["post-1250","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"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>Ionic Native: Enabling Login with Touch ID for iOS - Ionic Blog<\/title>\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\/ionic-native-enabling-login-with-touch-id-for-ios\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic Native: Enabling Login with Touch ID for iOS\" \/>\n<meta property=\"og:description\" content=\"Ease-of-use is a primary concern of any mobile app developer. It makes users happy and has a direct impact on many Very Important Things, like adoption, user retention, and monetization. Today, we&#8217;ll look at one of the simplest places to improve the user experience: the login page. In general, a logged-in user is a more [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-09T16:11:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-08-09T18:48:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\" \/>\n<meta name=\"author\" content=\"Alex Muramoto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alexmuramoto\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Muramoto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\"},\"author\":{\"name\":\"Alex Muramoto\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5087ed0d4175ef63cbc3aca6c41bcc7\"},\"headline\":\"Ionic Native: Enabling Login with Touch ID for iOS\",\"datePublished\":\"2016-08-09T16:11:46+00:00\",\"dateModified\":\"2016-08-09T18:48:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\"},\"wordCount\":888,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\",\"name\":\"Ionic Native: Enabling Login with Touch ID for iOS - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\",\"datePublished\":\"2016-08-09T16:11:46+00:00\",\"dateModified\":\"2016-08-09T18:48:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png\",\"width\":1400,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic Native: Enabling Login with Touch ID for iOS\"}]},{\"@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\/c5087ed0d4175ef63cbc3aca6c41bcc7\",\"name\":\"Alex Muramoto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg\",\"caption\":\"Alex Muramoto\"},\"sameAs\":[\"https:\/\/x.com\/alexmuramoto\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/alex\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic Native: Enabling Login with Touch ID for iOS - Ionic Blog","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\/ionic-native-enabling-login-with-touch-id-for-ios","og_locale":"en_US","og_type":"article","og_title":"Ionic Native: Enabling Login with Touch ID for iOS","og_description":"Ease-of-use is a primary concern of any mobile app developer. It makes users happy and has a direct impact on many Very Important Things, like adoption, user retention, and monetization. Today, we&#8217;ll look at one of the simplest places to improve the user experience: the login page. In general, a logged-in user is a more [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios","og_site_name":"Ionic Blog","article_published_time":"2016-08-09T16:11:46+00:00","article_modified_time":"2016-08-09T18:48:01+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png"}],"author":"Alex Muramoto","twitter_card":"summary_large_image","twitter_creator":"@alexmuramoto","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Alex Muramoto","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios"},"author":{"name":"Alex Muramoto","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5087ed0d4175ef63cbc3aca6c41bcc7"},"headline":"Ionic Native: Enabling Login with Touch ID for iOS","datePublished":"2016-08-09T16:11:46+00:00","dateModified":"2016-08-09T18:48:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios"},"wordCount":888,"commentCount":10,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios","url":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios","name":"Ionic Native: Enabling Login with Touch ID for iOS - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png","datePublished":"2016-08-09T16:11:46+00:00","dateModified":"2016-08-09T18:48:01+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/touch-id-ionic-native-img.png","width":1400,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-native-enabling-login-with-touch-id-for-ios#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic Native: Enabling Login with Touch ID for iOS"}]},{"@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\/c5087ed0d4175ef63cbc3aca6c41bcc7","name":"Alex Muramoto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg","caption":"Alex Muramoto"},"sameAs":["https:\/\/x.com\/alexmuramoto"],"url":"https:\/\/ionic.io\/blog\/author\/alex"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1250","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\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1250"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1250\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}