Learn How To Implement Biometric Authentication Using React Native

Since the manufacturers have started installing the necessary hardware, Biometric Authentication could be considered important and must have features to secure our mobile applications. Biometric verification helps eliminate the hassle of entering security credentials and patterns while adding a layer of security. So to achieve the same, we will look into how to implement biometric authentication in react-native.

Read more about react native.

What Is Biometric Authentication?

Biometric authentication is the process of confirming an individual’s identity based on physical and behavioral characteristics. This can take the form of an individual’s fingerprint, voice, or other biological characteristics that can be measured to assess specific data points. In our case, smartphones.

Different Types Of Biometric Authentication

As of today, we have 2 implementations of biometric verification:

  • Facial recognition
  • Fingerprint recognition

Check Out What It Takes To Build A Successful App Here

Dependencies

rn-local-authentication
react-native-sensitive-info

Implementation approach

There are two libraries for implementing biometric authentication:

rn-local-authentication and react-native-sensitive-info.

rn-local-authentication is used for biometric verification, facial verification or fingerprint verification of the user.

react-native-sensitive-info is used for storing user credentials, in our case username and password. This can also be access_token for API authorization.

The flow of the implementation

  • Log in to the user and get a username and password.
  • Prompt user to set up biometric authentication.
  • Prompt for facial or fingerprint recognition based on the available sensor.
  • On successful verification, store the username and password using react-native-sensitive-info.
  • Next time the user opens the application, if the biometric authentication is already set up, prompt for biometric verification and get credentials on successful verification.
  • Use the credentials to authenticate the user.

Installation

Follow this react-native-local-authentication for installing the biometric verification library.

Follow this react-native-sensitive-info for installing the secured storage library.

Usage

For setup:
1. Import rn-local-authentication as LocalAuthentication & react-native-sensitive-info as RNSInfo

2. Check biometry support and type

const isSupported = await LocalAuthentication.isSupportedAsync();

const getBiometryType = LocalAuthentication.getBiometryType();

3. If biometry is supporting prompt users for biometric verification

const success = await LocalAuthentication.authenticateAsync(config);

4. On success store the user credentials or access_token received

RNSInfo.setItem("@userInfo", userInfo, {

       sharedPreferencesName:”SharedPreference_Name,

       keychainService:”Keychain_Name”,

     });

For login:

1. Check if biometry has already been set up by checking for data stored in a secured storage

2. If already set up, prompt biometric verification and get user info from secured storage on success.

RNSInfo.getItem("@userInfo", userInfo, {

       sharedPreferencesName:”SharedPreference_Name,

       keychainService:”Keychain_Name”,

     });

3. On getting the user info log in the using the credentials

Step Into the Hyper Growth Path With Our Top React Native Developers.

coma

Conclusion

This article describes the basic idea of how to implement biometric authentication in our react native application. It might be helpful for react native developers to start with biometric authentication in react native. Aside from usual biometric verification, the rn-local-authentication also supports fallback to passcode, which becomes useful in scenarios where biometry sensors are not usable.

Sanjit

I am a react-native developer with experience working on IoT applications, task management applications, video streaming applications and recent experience developing react-native libraries involving biometric verification of the user.

My skills would be JavaScript, TypeScript, react-native, npm packages, and Redux.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google