React Native SDK Integration Guide

IMPORTANT

The React Native SDK is currently being worked on and an updated version will be released shortly. We strongly recommend waiting until the updated version is completed before integration. Please email [email protected] with any questions you may have.

Overview

  1. 1.
    Video
  2. 2.
  3. 6.
  4. 7.

Video

Coming Soon!

Requirements

  • React 16.8.2+
  • React Native 0.55.0+
  • react-native-device-info 7.3.1+

Steps

1. Installations

Yarn

1
yarn add @human-id/react-native-humanid react-native-device-info
Copied!

npm

1
npm i @human-id/react-native-humanid react-native-device-info
Copied!

linking assets (IMPORTANT)

1
npx react-native link
Copied!

2. Credentials Access

Receive the appId and appSecret through the App Registration Form.

3. Configuration

at your index.js file
1
import {configureHumanID} from "@human-id/react-native-humanid";
2
import AppLogo from "path/your-app-logo";
3
4
configureHumanID({
5
appName: "Your application NAme",
6
clientSecret: "APP_SECRET",
7
clientId: "APP_ID",
8
Icon: AppLogo // Icon is JSX.Element
9
});
10
11
AppRegistry.registerComponent(appName, () => App);
Copied!

How To Use

Register humanID Provider at your Top Container Application

1
import {HumanIDProvider} from "@human-id/react-native-humanid";
2
3
const App = () => {
4
return (
5
<View>
6
<HumanIDProvider />
7
</View>
8
);
9
};
10
11
export default App;
Copied!

Login

1
import {logIn} from "@human-id/react-native-humanid";
2
3
const HomeScreen = () => {
4
const handleLogin = () => {
5
logIn();
6
};
7
8
return <Button title="Login" onPress={handleLogin} />;
9
}
10
11
export default HomeScreen;
Copied!

Listener onSuccess, onError, onCancel

We suggest put this method into lifecycle that only live once on your screen, example: componentDidMount if you use class component, otherwise you can use useEffect
1
import {onCancel, onSuccess, onError} from "@human-id/react-native-humanid";
2
3
const HomeScreen = () => {
4
React.useEffect(() => {
5
const unsubscribeSuccess = () => onSuccess((exchangeToken) => {
6
console.log("exchangeToken", exchangeToken)
7
});
8
9
const unsubscribeError = () => onError(() => {
10
console.log("error")
11
});
12
13
const unsubscribeCancel = () => onCancel(() => {
14
console.log("canceled")
15
});
16
17
unsubscribeSuccess();
18
unsubscribeError();
19
unsubscribeCancel();
20
21
return () => {
22
unsubscribeSuccess();
23
unsubscribeError();
24
unsubscribeCancel();
25
}
26
}, []);
27
}
28
29
export default HomeScreen;
Copied!

Sample Code Here