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
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
Last updated
Was this helpful?