HumanID React Native

General Documentation • Contributing • Gallery • FAQ

Meet humanID - An anonymous online identity, enabling platforms to offer the speed and comfort of social logins, while guaranteeing absolute privacy and protecting our communities by permanently blocking bots, spams, and trolls.

Requirements

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

Installation

Yarn

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

npm

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

linking assets (IMPORTANT)

npx react-native link

Credentials Access

Configuration

at your index.js file

import {configureHumanID} from "@human-internet/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-internet/react-native-humanid";

const App = () => {
    return (
        <View>
            <HumanIDProvider />
        </View>
    );
};

export default App;

Login

import {logIn} from "@human-internet/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-internet/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.

human-internet / humanid-reactnative-sdk

readme