React Native SDK Integration Guide

Overview

  1. Video

Video

Coming Soon!

Requirements

  • React 16.8.2+

  • React Native 0.55.0+

  • react-native-device-info 7.3.1+

Steps

1. Installations

Yarn

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

npm

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

linking assets (IMPORTANT)

npx react-native link

2. Credentials Access

Receive the appId and appSecret through the App Registration Form.

3. Configuration

at your index.js file

import {configureHumanID} from "@human-id/react-native-humanid";
import AppLogo from "path/your-app-logo";
configureHumanID({
appName: "Your application NAme",
clientSecret: "APP_SECRET",
clientId: "APP_ID",
Icon: AppLogo // Icon is JSX.Element
});
AppRegistry.registerComponent(appName, () => App);

How To Use

Register humanID Provider at your Top Container Application

import {HumanIDProvider} from "@human-id/react-native-humanid";
const App = () => {
return (
<View>
<HumanIDProvider />
</View>
);
};
export default App;

Login

import {logIn} from "@human-id/react-native-humanid";
const HomeScreen = () => {
const handleLogin = () => {
logIn();
};
return <Button title="Login" onPress={handleLogin} />;
}
export default HomeScreen;

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

import {onCancel, onSuccess, onError} from "@human-id/react-native-humanid";
const HomeScreen = () => {
React.useEffect(() => {
const unsubscribeSuccess = () => onSuccess((exchangeToken) => {
console.log("exchangeToken", exchangeToken)
});
const unsubscribeError = () => onError(() => {
console.log("error")
});
const unsubscribeCancel = () => onCancel(() => {
console.log("canceled")
});
unsubscribeSuccess();
unsubscribeError();
unsubscribeCancel();
return () => {
unsubscribeSuccess();
unsubscribeError();
unsubscribeCancel();
}
}, []);
}
export default HomeScreen;

Sample Code Here