Skip to content

ReactNative SDK Integration#

This quickstart guide serves as an integration example for our trusted partners so that you will be able to test and/or evaluate LoginID’s authentication service for your own needs. After going through this document you should be able to have your application connect to our platform in just 4 simple steps.

This document assumes that you are using react native in your development environment. Additional independent configuration options and integration mechanisms will be described in additional API Documentation that is still under development.

Info

This document is for ReactNative SDK version 0_61_1+.

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. You will need to provide your Android package name and Android signing certificate fingerprint (sha256) to LoginID as part of the initial configuration setup.

Field Name Value
Android Package Name com.example.myapplication
Android Signing Fingerprint 72:90:77:A4:F1:6C:61:9F:4E:1F:11:94:0F:3B:8D:FC:3E:53:1F:FE:94:19:BF:FD:BD:4A:8D:90:05:32:B0:42
clientId 6fcd5bdd-bd51-4e26-9cd6-14f6e41b5862
baseUrl 060ce487-b934-43d0-a925-b66e80c7532f.sandbox.loginid.io

Install LoginID SDK for your build environment#

Our ReactNative SDK is currently support reactNative 0.60.5+. Here we'll show how to add react native login sdk to your environment using yarn / npm. You will need additional setups for IOS and Android described below.

Download react native SDK#

Download the api from LoginID developer's console

yarn add /path/to/download/module

Additional Setup for IOS build#

For IOS build, add NSFaceIDUsageDescription (Privacy - Face ID Usage Description) key/value to app's info.plist.

This is a privacy description for accessing FaceID feature on iOS. On device with FaceID like iPhoneX + 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>

Note

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:#

Here are a set of functionalities supported in react native api:

  • Setup api
  • Check / Retrieve account information
  • Register an user account
  • Login / Authenticate

Setup api with clientId and baseURL#

First import LoginID SDK

    import  RNLoginApi  from 'react-native-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.
    const baseURL = "https://060ce487-b934-43d0-a925-b66e80c7532f.";
    RNLoginApi.configure(clientId,baseURL);

Getting user account information#

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

  • check if user has existing registered account
    // return true or false
    let result = await RNLoginApi.hasAccount();
  • get current username
    // return username in string value
    let username = await RNLoginApi.getCurrentUsername();
  • check if user has 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 called
    // return jwt in string value
    let token = await RNLoginApi.getCurrentAccessToken();

Here are an example on how to use the above functionalities:

    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.getCurrentAccessToken();
          ...
      } else {
          //present login option here
          ...
      }
      ...
    } else {
      // user has no account so can setup register user logic here
      ...
    }

Register user account#

The registration flow of the api is shown in the following diagram

image

Register an account with username specified#

This api allows user to create new credential with username via a FIDO2 registration. Having username registered will allow user to login by username from multiple platforms.

    let response=await RNLoginApi.registerWithUsername(username);
    if(response.success){

        // handle success case here
        ...
        ...
        Alert.alert("success register "+username,response.jwt);
        this.setState({hasAccount:true});
    } else {
        Alert.alert("failed to register "+username,response.errorMessage);
    }

Login or re-authenticate an registered account#

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

    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);
    }

Logout#

Call logout operation to invalidate the current access token.

    RNLoginApi.logout();