Mono Prove React Native SDK

The Mono Prove SDK is a quick and secure way to onboard your users from within your React Native app. Mono Prove is a customer onboarding product that offers businesses faster customer onboarding and prevents fraudulent sign-ups, powered by the MDN and facial recognition technology.

For accessing customer accounts and interacting with Mono's API (Identity, Transactions, Income, DirectPay) use the server-side Mono API.

Documentation

For complete information about Mono Prove, head to the docs.

Getting Started

1. Register on the Mono website and get your public and secret keys.
2. Retrieve a sessionId for a customer by calling the initiate endpoint

Installation

Using NPM

1npm install @mono.co/prove-react-native

Using yarn

1yarn add @mono.co/prove-react-native

Also install react-native-webview because it's a peer dependency for this package.

Additional Setup

Android

Add the camera permission to the android.permissions key in your app config (app.json, app.config.js, app.config.ts).

1{
2  "android": {
3    "permissions": ["android.permission.CAMERA"]
4  }
5}

Or add the camera permission directly to your android/app/src/main/AndroidManifest.xml file.

1<uses-permission android:name="android.permission.CAMERA"/>

iOS

Set a camera permission message through the ios.infoPlist key in your app config.

1{
2  "ios": {
3    "infoPlist": {
4      "NSCameraUsageDescription": "your usage description here"
5    }
6  }
7}

If editing Info.plist as text, add:

1<key>NSCameraUsageDescription</key>
2<string>your usage description here</string>

Usage

Hooks

1import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
2import { ProveProvider, useMonoProve } from '@mono.co/prove-react-native';
3import type { ProveEventData } from '@mono.co/prove-react-native/lib/types';
4
5const config = {
6  sessionId: 'PRV...',
7  onSuccess: () => {
8    console.log('Successfully verified identity');
9  },
10  onClose: () => console.log('Widget closed'),
11  onEvent: (eventName: string, data: ProveEventData) => {
12    console.log(eventName);
13    console.log(data);
14  },
15  reference: 'test_ref',
16};
17
18function VerifyIdentity() {
19  const { init } = useMonoProve();
20
21  return (
22    <View style={{ marginBottom: 10 }}>
23      <TouchableOpacity onPress={() => init()}>
24        <Text style={{ color: 'blue' }}>Verify your identity</Text>
25      </TouchableOpacity>
26    </View>
27  );
28}
29
30export default function App() {
31  return (
32    <ProveProvider {...config}>
33      <View style={styles.container}>
34        <VerifyIdentity />
35      </View>
36    </ProveProvider>
37  );
38}
39
40const styles = StyleSheet.create({
41  container: {
42    flex: 1,
43    backgroundColor: '#fff',
44    alignItems: 'center',
45    justifyContent: 'center',
46    paddingHorizontal: 20,
47  },
48});

Components

1import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
2import { MonoProveButton, ProveProvider } from '@mono.co/prove-react-native';
3
4const config = {
5  sessionId: 'PRV...',
6  onSuccess: () => {
7    console.log('Successfully verified identity');
8  },
9  onClose: () => console.log('Widget closed'),
10};
11
12export default function App() {
13  return (
14    <ProveProvider {...config}>
15      <View style={styles.container}>
16        <MonoProveButton />
17      </View>
18    </ProveProvider>
19  );
20}

Configuration Options

• sessionId
• onSuccess
• onClose
• onEvent
• reference

sesssionId

String: Required

This is the session ID returned after calling the initiate endpoint.

1const config = {
2  sessionId: 'PRV...', // your session id
3};

onSuccess

() => { Void }: Required

The closure is called when a user has successfully verified their identity.

1const config = {
2  sessionId: 'PRV...',
3  onSuccess: () => {
4    console.log('Successfully verified identity');
5  },
6};

onClose

() => { Void }: Optional

The optional closure is called when a user has specifically exited the Mono Prove flow. It does not take any arguments.

1const config = {
2  sessionId: 'PRV...',
3  onSuccess: () => {
4    console.log('Successfully verified identity');
5  },
6  onClose: () => console.log('Widget closed'),
7};

onEvent

(eventName, data) => { Void }: Optional

This optional closure is called when certain events in the Mono Prove flow have occurred, for example, when the user opens or closes the widget. This enables your application to gain further insight into what is going on as the user goes through the Mono Prove flow.

See the event details below.

1const config = {
2  sessionId: 'PRV...',
3  onSuccess: () => {
4    console.log('Successfully verified identity');
5  },
6  onClose: () => console.log('Widget closed'),
7  onEvent: (eventName: string, data: ProveEventData) => {
8    console.log(eventName);
9    console.log(data);
10  },
11};

reference

String: Optional

When passing a reference to the configuration it will be passed back on all onEvent calls.

1const config = {
2  sessionId: 'PRV...',
3  onSuccess: () => {
4    console.log('Successfully verified identity');
5  },
6  onClose: () => console.log('Widget closed'),
7  onEvent: (eventName: string, data: ProveEventData) => {
8    console.log(eventName);
9    console.log(data);
10  },
11  reference: 'random_string',
12};

Event Details

eventName: String

Event names correspond to the type of event that occurred. Possible options are in the table below.

Event type	Description
opened	Triggered when the user opens the Prove Widget.
closed	Triggered when the user closes the Prove Widget.
identityVerified	Triggered when the user successfully verifies their identity.
error	Triggered when the widget reports an error.

data: JSON

The data JSON returned from the onEvent callback.

1reference: String // reference passed through the prove config
2pageName: String // name of page the widget exited on
3errorType: String // error thrown by widget
4errorMessage: String // error message describing the error
5reason: String // reason for exiting the widget
6timestamp: Number // unix timestamp of the event as a number

Examples

See more examples here.

Support

If you're having general trouble with Mono Prove React Native SDK or your Mono integration, please reach out to us at support@mono.co or come chat with us on Slack. We're proud of our level of service, and we're more than happy to help you out with your integration to Mono.

Contributing

If you would like to contribute to the Mono Prove React Native SDK, please make sure to read our contributor guidelines.

License

MIT for more information.