1. Getting Started

npm install @zappahq/react

// or

yarn add @zappahq/react

The Zappa interface works via 3 components: ZappaComponent and 2 Challenges.

The ZappaComponent is a wrapper for a Challenge that handles the instantiation of the Challenge, passes data to Zappa Protect, and manages callbacks.

1.1. Creating a Zappa Protect Account

In order to use the Zappa Protect services, you must first create a Zappa Protect account.

See Zappa Protect Portal to get started.

Obtaining a Site Key

Once an account has been created on the Zappa Protect Portal, create a new site. Each site comes with a Site Key.

Test Site Keys

These site keys are intended for development purposes only, and will only work from http://localhost or https://localhost (any port).

| Key | Purpose | | ---------- | --------------------------- | | 11111111 | Passed | | 22222222 | Site Key Validation Failure | | 33333333 | Failure |

1.2. Challenges

The Challenges RoadMap is listed below.

| Implemented | In Progress | Planned | | ----------- | ----------- | ------- | | TracedLine | PalmVerify | | | Transparent | | |

1.3. Using ZappaComponent

To utilize the ZappaComponent with your desired challenge:

import { ZappaComponent } from '@zappahq/react';
import { Button } from "@zappahq/challenge-button";
import { Tracedline } from "@zappahq/challenge-tracedline";

Then, implementation is a cinch!

<ZappaComponent
    siteKey='11111111'
    challenges={[Button, Tracedline]}
    acceptableScore={70} // Default: 90
    verifyCallback={(score, recommendation, passed) => {
        // Handle the response here.
        // If passed, perhaps enable the "submit" button
        // If failed, perhaps force the user to log in before submitting
        console.log(`Score: ${score} - Passed: ${passed}`);
    }}
    onLoadCallback={() => {
        // Informs your application that the component has loaded.
        console.log('loaded!')
    }}
    onBlur={() => {
        // Informs your application of the ZappaComponent losing focus
        console.log('onBlur')
    }}
/>

1.4 Finding Challenges

Zappa Protect has an ever-growing marketplace of Challenges. Challenges can be found on the Zappa Protect Portal or by searching the NPM under the search term @zappahq/challenge-. For example: https://registry.npmjs.com/-/v1/search?text=@zappahq/challenge-