Using React Native to setup passwordless biometric authentication

To get started, please ensure that you are using react-native in your development environment.

Please refer to https://reactnative.dev/docs/running-on-device if you need more information for running ReactNative applications on iOS devices.

1. If you are using macOS, make sure you are using macOS version is 10.15+. If not, please upgrade accordingly
2. If you do need to upgrade, you might also need to re-install node to adapt with the new OS
3. If you do need to upgrade, your OS update might require other re-configurations depending on used tools on a machine
4. Install Xcode
5. Install Android Studio (https://developer.android.com/studio)
6. Install Cocoapods (required for iOS)
7. Set up React
8. Native env on MacOS

For your reference please refer to the official ReactNative documentation: https://reactnative.dev/docs/0.60/getting-started

Steps to follow

1. Create your client API keys
2. Install LoginID SDK
3. Configure LoginID API
4. Get User Account Information

Useful APIs

1. Registration
2. Login
3. Logout

Create your client API keys

The first step to onboard yourself with LoginID is to create your client credentials. This allows your servers to call LoginID services in an authenticated fashion.

Initial Setup

Install LoginID SDK for your build environment

Follow the below steps to add ReactNative SDK to your environment using npm or Yarn. Our ReactNative SDK currently supports reactNative 0.60.5+. You will need additional setups for iOS and Android as described below.

Install React Native SDK

Developers should have their own ReactNative app to integrate the SDK. Simulated devices are not currently supported.

npm

npm install react-native-fido-login-api@0.62.22 --registry  https://sdk.dev.loginid.io/repository/npm/

yarn

yarn add https://sdk.dev.loginid.io/repository/npm/react-native-fido-login-api/-/react-native-fido-login-api-0.62.22.tgz

Additional Setup for iOS build

For iOS build, add a new row to the Information Property List, choose NSFaceIDUsageDescription from the dropdown under Key column and paste the following script under Value column.

`info.plist` can be found in your React native /ios/[App Name] directory

This is a privacy description for accessing FaceID feature on iOS. On devices with FaceID like iPhoneX or newer, a user will be prompted with permission dialog based on this description about FaceID usage for the app.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSFaceIDUsageDescription</key>
<string>Privacy description regarding to usage of FaceID feature</string>
...
...
</plist>

For Objective-C development, make sure to enable “Embed Swift Standard Libraries” in your build settings to avoid run-time error for objective-c.

Run pod install from your app iOS’s folder

cd /path/to/react/nativeapp/ios
pod install

Getting started with LoginID API SDK:

Set up API with clientId and baseURL

Import LoginID SDK

import RNLoginApi  from 'react-native-fido-login-api';

Configure clientId and baseURL obtained from the developer console

// clientId example 032690b3-9bc4-4602-87c1-60c1fae782f2
const clientId = "032690b3-9bc4-4602-87c1-60c1fae782f2";
// baseURL example https://060ce487-b934-43d0-a925-b66e80c7532f.loginid.io
const baseURL = "https://060ce487-b934-43d0-a925-b66e80c7532f.loginid.io";
RNLoginApi.configure(clientId,baseURL);

Depending on your environment setup and configuration, you might need to copy/paste configuration snippet above right after ‘import’ line as shown in the snippet or alternatively, in your ReactNative loader function. You might need different approaches to make this setup compile successfully.

Getting user account information

Here is a set of functions for retrieving user information and login status.

Check if the user has an existing registered account:

// return true or false
let result = await RNLoginApi.hasAccount();

Get the current username:

// return username in string value
let username = await RNLoginApi.getCurrentUsername();

Check if the user has an active login session:

// return true or false
let result = await RNLoginApi.isLoggedIn();

Get current access token which is the latest JWT token returned by the server after a successful registered or verified API is called:

// return jwt in string value
let token = await RNLoginApi.getCurrentToken();

Here is an example of how to use the above functionality:

if(await RNLoginApi.hasAccount()){
// get current username example
let username = await RNLoginApi.getCurrentUsername();
// check if user has active login session
if(await RNLoginApi.isLoggedIn()){
// get current token example
let token = await RNLoginApi.getCurrentToken();
...
} else {
//present login option here
...
}
...
} else {
// user has no account so can setup register user logic here
...
}

Register user account

For an overview of LoginID registration flow, please see:

Simple Registration Flow

Register an account with username specified

This API allows users to create new credentials with usernames via a FIDO2 registration. Having usernames registered will allow users to login with usernames from multiple platforms.

let response=await RNLoginApi.registerWithUsername(username);
if(response.success){
// handle success case here
...
...
Alert.alert("success register "+username,response.jwt);
} else {
// handle error case here
...
...
Alert.alert("failed to register "+username,response.errorMessage);
}

Login or Re-authenticate a Registered Account

Once the user has successfully registered, LoginID will assign a JWT token to the response field. The token has a timestamp associate with it. You can ask the user to re-authenticate at any time afterward based on your business logic or if the token expired.

Login to a previously registered account:

This API allows users to authenticate or re-authenticate via a FIDO2 login operation. The api uses the last successful registered or signed credential on the device.

let response=await RNLoginApi.login();
if(response.success){
// handle success case here
...
...
Alert.alert("login success: ",response.jwt);
} else {
// handle error case here
...
...
Alert.alert("failed to login ",response.errorMessage);
}

Login with username specified:

This API allows you to signed into a specific account. Use this in scenario where you want to support multiple registered accounts on the same device.

let response=await RNLoginApi.loginWithUsername(username);
if(response.success){
// handle success case here
...
...
Alert.alert("login success: ",response.jwt);
} else {
// handle error case here
...
...
Alert.alert("failed to login ",response.errorMessage);
}

Logout

Call logout operation to invalidate the current access token.

RNLoginApi.logout();

Getting help

For any questions, comments or feedback, please contact dev@loginid.io.

About LoginID

LoginID is a comprehensive FIDO-based multifactor authentication solution that offers frictionless authentication. Created with developers and enterprises in mind, LoginID is FIDO-certified and adheres to PSD2 principles. With an implementation time of just one hour, LoginID’s multifactor authentication solution is a quick, simple to integrate, cost-effective, and regulatory friendly tool to give your business peace of mind around security, allowing you to focus on growing your business.

Get started for free.