Get Started with PhoneCheck on React Native

This Guide will walk you through performing your first PhoneCheck within a React Native application using a Node.js server. It covers:

Things you need before you begin
Setting up the Node.js example server
Setting up and run the React Native example application
Performing a PhoneCheck on React Native

The final simplified application structure looks as follows:

tru-id-phonecheck-example
├── app-example-react-native
│   ├── android
│   ├── ios
│   ├── src
│   └── .env
└── phonecheck-server
    └── tru.json

And the running React Native application looks and works as follows:

For more detailed information on how the mobile application, the Node.js server and the tru.ID APIs work together see the PhoneCheck integration guide.

1. Before you begin

You'll need to setup the React Native development environment in order to build and run the application. This guide will assume you're using the React Native CLI. For that reason, you'll also need XCode installed and setup for iOS and Android Studio setup for Android.

In order to execute a PhoneCheck you'll need a physical Android or iOS device. Android will work for Windows, MacOS and Linux. iOS is only supported with MacOS.

To expose the locally running Node.js server to the running mobile application you'll require a local tunnel solution such as ngrok.

To run through the guide as a whole you'll need a tru.ID account. If you don't already have an account, sign up now.

The tru.ID tooling relies on the Node.js runtime. So please ensure you have the Node.js runtime installed.

Install and setup the tru.ID CLI

With Node.js install the tru.ID CLI (Command Line Interface) from your terminal.

$ npm install -g @tru_id/cli

During the installation you will be prompted for your tru.ID Default Credentials. These can be found within the tru.ID Console.

Welcome to the tru CLI! Let's start by configuring the CLI

Configuration values can be found via http://tru.id/console

? Please provide your workspace `client_id` {enter your client_id}
? Please provide your workspace `client_secret` {enter your client_secret}
? Please provide your workspace data residency `eu`

Thanks! Writing your updated configuration to {path_to}/config.json... done

Create a working directory

Create a directory that you will add the client and server example code to:

$ mkdir tru-id-phonecheck-example

And navigate into that directory:

$ cd tru-id-phonecheck-example

2. Setup the Node.js example server

The Node.js example server is used as an authority and sits between the React Native application and the tru.ID APIs.

Clone the Node.js Server Example

Clone the tru.ID Node.js example server into the phonecheck-server directory:

$ git clone git@github.com:tru-ID/server-example-node.git phonecheck-server

Create a tru.ID project

Create a new tru.ID project and save the configuration to the phonecheck-server directory:

$ tru projects:create "phonecheck-server" --project-dir=phonecheck-server

You will see output similar to the following:

Creating Project "phonecheck-server"
Project configuration saved to "path_to/tru-id-phonecheck-example/phonecheck-server/tru.json"

The Node.js application will read your tru.id credentials from the tru.json project configuration file.

Run the tru.ID example server

Navigate into the phonecheck-server directory:

$ cd phonecheck-server

Install the application dependencies:

$ npm install

Run the application:

$ npm start

You will see output similar to the following indicating that the server application is running at http://localhost:8080:

> tru-node-server@0.1.0 start
> nodemon src/index.js

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/index.js`
configuration:
 {
  project_id: '0055f3a3-6e06-4390-9048-4f5a9dfcbbd1',
  name: 'phonecheck-server',
  credentials: [
    {
      client_id: 'PROJECT_CLIENT_ID',
      client_secret: 'PROJECT_CLIENT_SECRET',
      created_at: '2021-01-11T15:44:14+0000',
      scopes: [Array]
    }
  ],
  mode: 'live',
  created_at: '2021-01-11T15:44:14+0000'
}
Example app listening at http://localhost:8080

Create a local tunnel for your server

In order for your mobile application to be able to interact with the locally running server you'll need to setup a local tunnel. For this example we'll use ngrok.

Run ngrok to create a local tunnel and to get a public URL which will be used in the mobile application configuration. Run the following command in a new terminal window:

$ ngrok http 8080

You will then see output similar to the following:

Session Status                online
Account                       Phil Leggetter (Plan: Pro)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://d88e00a17e1c.ngrok.io -> http://localhost:8080
Forwarding                    https://d88e00a17e1c.ngrok.io -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Navigate to your ngrok HTTPS URL to ensure the server is accessible (https://d88e00a17e1c.ngrok.io from the above output).

3. Setup the React Native example application

With the server running you can now setup and run the React Native application.

Clone and configure the React Native example application

Open a new terminal and ensure you are in the tru-id-phonecheck-example working directory. Run the following command to clone the React Native example into a app-example-react-native directory:

$ git clone git@github.com:tru-ID/app-example-react-native.git

And navigate into the newly created app-example-react-native directory:

cd app-example-react-native

Install the application dependencies:

yarn install # or npm install

Create a copy of the .env.example file, naming the new file .env:

cp .env.example .env

And update the configuration value for BASE_URL in .env to point to the public ngrok URL of the Node.js example server. For example:

BASE_URL=https://d88e00a17e1c.ngrok.io

Install and run the React App on Android

Detailed information on running an application on a device can be found in the React Native documentation.

Ensure your Android device is connected to your computer via USB with developer mode and USB debugging enabled.

Run the following in the terminal:

yarn android # or npm run android

The terminal output will look similar to the following:

react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 968 file(s) to forward-jetify. Using 8 workers...
info JS server already running.
info Installing the app...
Downloading https://services.gradle.org/distributions/gradle-6.8-bin.zip
..........10%..........20%..........30%...........40%..........50%..........60%..........70%...........80%..........90%..........100%
<===----------> 27% EXECUTING [25s]

BUILD SUCCESSFUL in 1m 57s
48 actionable tasks: 48 executed
info Connecting to the development server...
info Starting the app on "08231FDD4004V7"...
Starting: Intent { cmp=com.example.trusdkreactnative/.MainActivity }
✨  Done in 119.80s.

This will run a Metro server in a new terminal tab or window and install the React Native application to your USB connected Android application.

Install and run the React App on iOS (MacOS only)

Detailed information on running an application on a device can be found in the React Native documentation.

Run the Metro development server:

$ yarn start # or npm start

Install the project dependencies:

$ cd ios && pod install

Ensure your iOS device is connected via USB. Open up ios/TruSdkReactNativeExample.xcworkspace in XCode and set your iOS device as your deployment target:

Finally, select "Run" in XCode to install and run the application on your iOS device.

4. Perform a PhoneCheck

Enter your phone number including the country code and click "Verify my phone number". The application will look similar to the following:

With that, you've completed your first PhoneCheck from a React Native application.

5. Resources

6. Troubleshooting

`Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain` when running `yarn android`

The gradle wrapper is missing, broken or corrupted.

Ensure Gradle is installed and fex the gradle wrapper by running the following in the terminal from the android directory:

gradle wrapper

For more information see this Stack Overflow answer.