zinid-react

💾 Installation

npm install zinid-react

or with yarn

yarn add zinid-react

📄 Usage

This library can be used in any react application for sign in and KYC verification. The signin can only be implemented via a signin button exported by the library, while the KYC verification can be implemeted via a verification button or a custom hook exported by the library

1. Sign in using the zinid signin button

// Import ZinIdSignInButton component
import {ZinIdSignInButton} from "zinid-react"

// Use it in your code like so
export const MyComponent = () => {

  const sdkToken = "your_unique_sdk_token_generated_on_the_zinid_vendor_website"

       // you can call this function anything
    const handleZinidSigninSuccess = (data: SignInCredentialresponse) => {
      // Implementation for whatever you want to do with data after success call.
      console.log(data);
    };

    const handleZinidSigninError = (error: Error) => {
       // Implementation for whatever you want to do with the error 
      console.log(error);
    }


  return (
    <>
      <ZinIdSignInButton  className="mt-2" sdkToken={sdkToken} onSuccess={handleZinidSigninSuccess} onError={handleZinidSigninError} />
    </>
  );
};

🪄 Props for the ZinId Signin Button

Here's a table of all available props for the ZinIdSignIn Button.

Required | Prop | Description | Type | default | --- | --- | --- | --- | --- | ✓ | sdkToken | SDK token which is unique to every vendor. This token can be generated on the Zinid vendor app| string |   | onSuccess | Callback fires with credential response after successfully sign in. | (response: {data:{email: "[email protected]", first_name: "user_first_name", zinid:"user_zinid"}, success: true}) => void |   | onError | Callback fires with error after failed sign in. | ({error:string}) => void |   | text | Sets the button text. | string | Sign in with ZinID |   | className | Custom classname for the button | string |   | disabled | Boolean Condition to disable button | boolean |

2. Verify KYC using the zinid verify button

// Import ZinIdVerifyButton component
import {ZinIdVerifyButton} from "zinid-react"

// Use it in your code like so
export const MyComponent = () => {

  const sdkToken = "your_unique_sdk_token_generated_on_the_zinid_vendor_website"

  const customerId = "" // the customerId could be a unique string or integer or uuid which serves as a reference for identifying each verification instance and is recommended to be generated on the backend.

       // you can call this function anything
    const handleZinIdVerifySuccess = (data: VerifyCredentialResponse) => {
      // Implementation for whatever you want to do with data after success call.
      console.log(data);
    };

     const handleZinIdVerifyError = (error: Error) => {
       // Implementation for whatever you want to do with the error 
      console.log(error);
    }


  return (
    <>
      <ZinIdVerifyButton  className="mt-2" sdkToken={sdkToken} customerId={customerId} onSuccess={handleZinIdVerifySuccess} onError={handleZinIdVerifyError} />
    </>
  );
};

🪄 Props for the ZinId Verify Button

Here's a table of all available props for the ZinIdVerify Button

Required | Prop | Description | Type | default | --- | --- | --- | --- | --- | ✓ | sdkToken | SDK token which is unique to every vendor. This token can be generated on the Zinid vendor app| string | ✓ | customerId | unique string or integer or uuid which serves as a reference for identifying each verification instance and is recommended to be generated on the backend.| any |   | onSuccess | Callback fires with credential response after successful verification. | ({data:{success: true, end: true, message: "Verification completed."}) => void |   | onError | Callback fires with error after failed KYC verification. | ({error:string}) => void |   | text | Sets the button text. | string | Verify with ZinID |   | className | Custom classname for the button | string |   | disabled | Boolean Condition to disable button | boolean |

3. Verify KYC using the useZinIdVerification hook

// Import useZinIdVerification hook
import {useZinIdVerification} from "zinid-react"

// Use it in your code like so
export const MyComponent = () => {

  const sdkToken = "your_unique_sdk_token_generated_on_the_zinid_vendor_website"

    const config: VerifyConfig = {
    sdkToken,
    onSuccess: (data: VerifyCredentialResponse)=> console.log(data, "data"),
    onError: (error: Error) => console.log(error, 'error')
  };

    const initializeVerification = useZinIdVerification(config);

    const customerId = "" // the customerId could be a unique string or integer or uuid which serves as a reference for identifying each verification instance and is recommended to be generated on the backend. 

    const handleVerificationClick = () => {
    initializeVerification(customerId)
  }


  return (
    <>
      <button onClick={handleVerificationClick} > Verify With ZinId </button>
    </>
  );
};

🪄 Props for the useZinIdVerification hook

Here's a table of all available config options for the useZinIdVerification hook.

Required | Prop | Description | Type | default | --- | --- | --- | --- | --- | ✓ | sdkToken | SDK token which is unique to every vendor. This token can be generated on the Zinid vendor app| string | ✓ | customerId | unique string or integer or uuid which serves as a reference for identifying each verification instance and is recommended to be generated on the backend.| any |   | onSuccess | Callback fires with credential response after successful verification. | ({data:{success: true, end: true, message: "Verification completed."}) => void |   | onError | Callback fires with error after failed KYC verification. | ({error:string}) => void |