{"id":4714,"date":"2020-03-12T17:00:00","date_gmt":"2020-03-12T17:00:00","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=4714"},"modified":"2020-03-19T11:06:10","modified_gmt":"2020-03-19T11:06:10","slug":"fingerprint-login-react-native","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/","title":{"rendered":"Login via Fingerprint in React Native"},"content":{"rendered":"\n

To keep up with the latest technology fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user. <\/p>\n\n\n\n

While implementing this we had to go through a lot of brainstorming and concluded the following flow which we\u2019ll be covering in this blog. Also one thing to keep in mind is this flow is recommended for the single user device and not shared devices. <\/p>\n\n\n\n

We\u2019ll be using two libraries for this feature:<\/p>\n\n\n\n

  1. React-native-touch-id<\/a><\/li>
  2. React-native-keychain<\/a><\/li><\/ol>\n\n\n\n

    We\u2019ve divided the implementation into TWO steps.<\/p>\n\n\n\n

    1. Enable fingerprint from the application\u2019s setting.<\/li>
    2. Login via fingerprint.<\/li><\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      Enable fingerprint from application setting <\/h2>\n\n\n\n
      \"\"<\/figure><\/div>\n\n\n\n

      On the user\u2019s action to \u201cenable fingerprint\u201d we\u2019ll be checking if the fingerprint is supported by OS and device. For that we need to:<\/p>\n\n\n\n

      1. Install React-native-touch-id<\/a>.<\/h3>\n\n\n\n
      npm i --save react-native-touch-id<\/code><\/pre>\n\n\n\n
      or<\/p>\n\n\n\n
      yarn add react-native-touch-id<\/code><\/pre>\n\n\n\n
      2. Then link the library to the project<\/h3>\n\n\n\n
      react-native link react-native-touch-id<\/pre>\n\n\n\n
      On iOS, you can also link package by updating your podfile<\/p>\n\n\n\n
      pod 'TouchID', :path => \"#{node_modules_path}\/react-native-touch-id\"<\/code><\/pre>\n\n\n\n
      And then run<\/p>\n\n\n\n
      pod install<\/code><\/pre>\n\n\n\n
      3. Add the following permissions to their respective files:<\/h3>\n\n\n\n
      In your AndroidManifest.xml:<\/p>\n\n\n\n
      <uses-permission android:name=\"android.permission.USE_BIOMETRIC\" \/><\/code><\/pre>\n\n\n\n
      In your Info.plist:<\/p>\n\n\n\n
      <key>NSFaceIDUsageDescription<\/key>\n <string>Enabling Face ID allows you quick and secure access to your account.<\/string> <\/code><\/pre>\n\n\n\n
      Now create a service `biometricService.js` and add `checkBiometricSupportednEnrolled` method.<\/p>\n\n\n\n
      import TouchID from 'react-native-touch-id';\nexport const checkBiometricSupportednEnrolled = async () => {\n   const optionalConfigObject = {\n       unifiedErrors: false, \/\/ use unified error messages (default false)\n       passcodeFallback: false \/\/ if true is passed, it will allow isSupported to return an error if the device is not enrolled in touch id\/face id etc. Otherwise, it will just tell you what method is supported, even if the user is not enrolled.  (default false)\n   }\n   return new Promise((resolve, reject) => {\n       \/\/isSupported returns both cases 1. if supported 2. Is enabled\/configured\/enrolled\n       TouchID.isSupported(optionalConfigObject)\n           .then(biometryType => {\n               \/\/ Success code.\n         \/\/ as we are focusing on fingerprint for now \n               if (biometryType && biometryType != 'FaceID') {\n                   resolve(true);\n               } else {\n             let fingerprintLableForOS = Platform.OS == \"ios\" ? \"Touch ID\" : \"Fingerprint\";\n                   reject( fingerprintLableForOS + \" is not available on this device\");\n               }\n           })\n           .catch(error => {\n               \/\/ iOS Error Format and android error formats are different\n               \/\/ android use code and ios use name\n               \/\/ check at https:\/\/github.com\/naoufal\/react-native-touch-id\n               let errorCode = Platform.OS == \"ios\" ? error.name : error.code;\n               if (errorCode === \"LAErrorTouchIDNotEnrolled\" || errorCode === \"NOT_AVAILABLE\" || errorCode === \"NOT_ENROLLED\") {\n             let fingerprintLableForOS = Platform.OS == \"ios\" ? \"Touch ID\" : \"Fingerprint\";\n                   resolve(fingerprintLableForOS + \" has no enrolled fingers. Please go to settings and enable \" + fingerprintLableForOS + \" on this device.\");\n               } else {\n                   reject(Platform.OS == \"ios\" ? error.message : translations.t(error.code));\n               }\n           });\n   });\n}<\/code><\/pre>\n\n\n\n
      This service method will return true if the fingerprint is supported and one or more fingerprints are already enrolled on the device else it will return error code. You can handle different types of errors according to your case. For now, we just want to handle LAErrorTouchIDNotEnrolled<\/code> for iOS, NOT_ENROLLED<\/code> for android, which means fingerprint is supported but there are no enrolled fingers. We\u2019ll also show redirection alert [redirect to device settings] on these errors.  <\/p>\n\n\n\n
      Call this service <\/p>\n\n\n\n
      let isFingerPrintSupported = yield call(KeychainService.checkBiometricSupportednEnrolled); <\/code><\/pre>\n\n\n\n
      and add <\/p>\n\n\n\n
      if (isFingerPrintSupported === true) {\n       \/\/fingerprint is supported and enrolled\n       \/\/TODO: we\u2019ll work here in the next step\n} else {\n       \/\/show alert \"TouchID has no enrolled fingers. Please go to settings and enable fingerprint on this device.\" that we returned from the service\n       Alert.alert(\n         \"Alert\",\n         isFingerPrintSupported,\n         [{\n           text: 'Ok', onPress: () => {\n             \/\/redirect to settings\n             Platform.OS === \"ios\"\n               ? Linking.openURL('app-settings:')\n               : AndroidOpenSettings.securitySettings() \/\/ Open security settings menu\n           }\n         }]\n);<\/code><\/pre>\n\n\n\n
      On getting supported and enrolled responses from the service we need to save current user\u2019s credentials to Keystore [for android] or keychain [for iOS].<\/p>\n\n\n\n
      For this purpose, we need to install React-native-keychain<\/a>.<\/p>\n\n\n\n
      yarn add react-native-keychain\nreact-native link react-native-keychain<\/code><\/pre>\n\n\n\n
       Re-build your Android and iOS projects and create a new service `keychainService.js` and add method `setCredentials`. <\/p>\n\n\n\n
      import * as Keychain from 'react-native-keychain';\nimport { Platform } from \"react-native\";\nexport const setCredentials = async (username, password) => {\n   return new Promise((resolve, reject) => {\n       \/\/ Store the credentials\n       Keychain.setGenericPassword(username, password)\n           .then(resp => {\n               resolve(true)\n           })\n           .catch(err => {\n               console.log(\"err: \", err);\n               reject(err);\n           });\n   });\n}<\/code><\/pre>\n\n\n\n
      Now we\u2019ll call this function from the `if` condition we left empty earlier. <\/p>\n\n\n\n
      if (isFingerPrintSupported === true) {\n    yield call(KeychainService.setCredentials, user_name, JSON.stringify({password}));\n}<\/code><\/pre>\n\n\n\n
      setGenericPassword is limited to strings only, so if you need to store objects, etc, please use JSON.stringify\/JSON.parse when you store\/access it. <\/p>\n\n\n\n
      Till now our first section is completed. You can play around with both of these libraries and use it for faceID too. <\/p>\n\n\n\n
      <\/p>\n\n\n\n
      Authenticate via fingerprint <\/h2>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      On application launch, if the user is not logged in already we\u2019ll check if our keychain contains login credentials or not. For that, we need to add another function in our `keychainService.js` as `getCredentials` which will return saved keychain credentials. <\/p>\n\n\n\n
      export const getCredentials = async () => {\n   return new Promise((resolve, reject) => {\n       Keychain.getGenericPassword()\n           .then((credentials) => {\n               if (credentials && credentials.username) {\n                   \/\/ console.log('Credentials successfully loaded for user ' + credentials.username);\n                   resolve(credentials);\n               } else {\n                   \/\/ console.log('No credentials stored');\n                   resolve(null);\n               }\n           })\n           .catch(err => {\n               console.log(\"err: \", err);\n               reject(err);\n           });\n   });\n}<\/code><\/pre>\n\n\n\n
      And call this function by dispatching action in your login\u2019s componentWillMount<\/strong>. <\/p>\n\n\n\n
       let credentials = yield call(KeychainService.getCredentials);\n     if (credentials && credentials.username)) {\n    let isFingerPrintSupported = yield call(KeychainService.checkBiometricSupportednEnrolled);\n \n    if (isFingerPrintSupported === true) {\n            \/\/ show fingerprint alert on login page\n        \/\/ and authenticate FingerPrint when user touch the sensor\n}\n     } else {\n       \/\/ else don\u2019t show fingerprint option on login\n     }<\/code><\/pre>\n\n\n\n
      Use `checkBiometricSupportednEnrolled` to check if the fingerprint is still enrolled and show login via fingerprint modal on the login screen.<\/p>\n\n\n\n
      Now there can be two ways in which the user can log in:<\/p>\n\n\n\n
      1. Login with fingerprint<\/h3>\n\n\n\n
      We need to authenticate the user’s fingerprint when he touches the sensor. For this make a function in our `biometricService.js` as `authenticateFingerPrint`. <\/p>\n\n\n\n
      export const authenticateFingerPrint = () => {\n   return new Promise((resolve, reject) => {\n    \/\/ configuration object for more detailed dialog setup and style:\n       \/\/ const optionalConfigObject = {\n       \/\/     title: 'Authentication Required', \/\/ Android\n       \/\/     imageColor: '#e00606', \/\/ Android\n       \/\/     imageErrorColor: '#ff0000', \/\/ Android\n       \/\/     sensorDescription: 'Touch sensor', \/\/ Android\n       \/\/     sensorErrorDescription: 'Failed', \/\/ Android\n       \/\/     cancelText: 'Cancel', \/\/ Android\n       \/\/     fallbackLabel: 'Show Passcode', \/\/ iOS (if empty, then label is hidden)\n       \/\/     unifiedErrors: false, \/\/ use unified error messages (default false)\n       \/\/     passcodeFallback: false, \/\/ iOS - allows the device to fall back to using the passcode, if faceid\/touch is not available. this does not mean that if touchid\/faceid fails the first few times it will revert to passcode, rather that if the former are not enrolled, then it will use the passcode.\n       \/\/ };\n  let fingerprintLableForOS = Platform.OS == \"ios\" ? \"Touch ID\" : \"Fingerprint\";\n \n       TouchID.authenticate('Login to [appname] using ' + fingerprintLableForOS)\n           .then(success => {\n               \/\/ console.log('Authenticated Successfully', success)\n               resolve(success)\n           })\n           .catch(error => {\n               console.log('Authentication Failed', error.code)\n               reject(error)\n           });\n   });\n}<\/code><\/pre>\n\n\n\n
      If authentication is successful then login to the server using saved credentials in keychain\/Keystore. <\/p>\n\n\n\n
      let isFingerPrintAuthenticated = yield call(KeychainService.authenticateFingerPrint);\n \n if (isFingerPrintAuthenticated === true) {\n   let credentials = yield call(KeychainService.getCredentials);\n     if (credentials && credentials.username) {\n     let savedPassword = JSON.parse(credentials.password),\n           savedUsername = credentials.username,\n           requestData = {};\n \n           requestData['user_name'] = savedUsername;\n           requestData['password'] = savedPassword.password;\n    }\n  \/\/ login with saved credentials\n         yield put({ type: \"LOGIN_REQUESTED\", requestData });\n}<\/code><\/pre>\n\n\n\n
       2. Login with credentials <\/h3>\n\n\n\n
      Users can also cancel fingerprint popups and login via username and password. There can be two cases.<\/p>\n\n\n\n
      1. The user whose credentials are already saved logs in<\/li>
      2. Another user logs in<\/li><\/ol>\n\n\n\n
        On credentials submitted, we\u2019ll check if credentials match with the stored ones.<\/p>\n\n\n\n
        \/\/check if saved username in keychain\/keystore is same as data then continue\n\/\/else reset credentials \n\/\/or update credentials using setCredentials after successful login if password is \/\/different from the saved one\n     let credentials = yield call(KeychainService.getCredentials);\n     if (credentials && credentials.username != user_name) {\nyield call(KeychainService.resetCredentials);\n     }\n\/\/login to server\n     const loggedinUser = yield call(AuthService.login, action.requestData);<\/code><\/pre>\n\n\n\n
         And add `resetCredentials` function in `keychainService.js` <\/p>\n\n\n\n
        export const resetCredentials = async () => {\n   return new Promise((resolve, reject) => {\n       Keychain.resetGenericPassword()\n           .then((response) => {\n               \/\/ console.log('response', response);\n               resolve(response);\n           })\n           .catch(err => {\n               console.log(\"err: \", err);\n               reject(err);\n           });\n   });\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
        To keep up with the latest technology fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user. While implementing this we had to go through a lot of brainstorming and concluded the following flow which we\u2019ll be covering in this … Continue reading “Login via Fingerprint in React Native”<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":4734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-4714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"yoast_head":"\nLogin via Fingerprint in React Native<\/title>\n<meta name=\"description\" content=\"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login via Fingerprint in React Native\" \/>\n<meta property=\"og:description\" content=\"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-12T17:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-19T11:06:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\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:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"Login via Fingerprint in React Native\",\"datePublished\":\"2020-03-12T17:00:00+00:00\",\"dateModified\":\"2020-03-19T11:06:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\"},\"wordCount\":569,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\",\"name\":\"Login via Fingerprint in React Native\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg\",\"datePublished\":\"2020-03-12T17:00:00+00:00\",\"dateModified\":\"2020-03-19T11:06:10+00:00\",\"description\":\"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Login via Fingerprint in React Native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login via Fingerprint in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Login via Fingerprint in React Native","description":"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.","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:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Login via Fingerprint in React Native","og_description":"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/","og_site_name":"Mobile App Development Services","article_published_time":"2020-03-12T17:00:00+00:00","article_modified_time":"2020-03-19T11:06:10+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg","type":"image\/jpeg"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"Login via Fingerprint in React Native","datePublished":"2020-03-12T17:00:00+00:00","dateModified":"2020-03-19T11:06:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/"},"wordCount":569,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg","articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/","name":"Login via Fingerprint in React Native","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg","datePublished":"2020-03-12T17:00:00+00:00","dateModified":"2020-03-19T11:06:10+00:00","description":"Fingerprint authentication has become extremely popular in mobile apps these days. It secures the app and makes it a seamless authentication flow for the user.","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/03\/Login-via-Fingerprint-in-React-Native.jpg","width":1920,"height":1080,"caption":"Login via Fingerprint in React Native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/fingerprint-login-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Login via Fingerprint in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/4714"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=4714"}],"version-history":[{"count":10,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/4714\/revisions"}],"predecessor-version":[{"id":4736,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/4714\/revisions\/4736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/4734"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=4714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=4714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=4714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}