Requirements

• React 16.8.2+

• React Native 0.55.0+

• react-native-device-info 7.3.1+

Installation

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

Credentials Access

Sign up and create an app at our developer conosole

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;

You're set!

Now you can integrate your React Native app to humanID. See the full sample here to learn more.

License

Copyright 2019-2020 Bluenumber Foundation Licensed under the GNU General Public License v3.0