# react-sdk-examples

In the following repository you will find examples on how to integrate with the React SDK for most common use cases. 

{% embed url="<https://github.com/humanity-developers/react-sdk-examples>" %}

## Included examples&#x20;

### basic&#x20;

A complete **React + Vite** reference app demonstrating every component and hook in the SDK.

| Feature                              | Component / Hook        | Route                    |
| ------------------------------------ | ----------------------- | ------------------------ |
| OAuth login — popup & redirect modes | `HumanityConnect`       | `/login`                 |
| Authentication state                 | `useHumanity`           | Throughout               |
| Protected routes                     | `useHumanity`           | `/dashboard`             |
| User profile — card, inline, minimal | `HumanityProfile`       | `/profile`, `/dashboard` |
| Preset verification                  | `HumanityVerify`        | `/verify`                |
| Conditional content gating           | `HumanityGate`          | `/secure`                |
| Multi-preset logic (AND / OR)        | `HumanityGate`          | `/secure`                |
| Error boundaries                     | `HumanityErrorBoundary` | `/login`                 |

## humanfirst

Example of a content platform where articles are gated behind different levels of human verification.

| Tier                    | Requirement                  | SDK Feature                       |
| ----------------------- | ---------------------------- | --------------------------------- |
| 🌐 Public               | Anyone                       | Open access                       |
| 🧬 Verified Human       | Humanity Login               | `isAuthenticated` guard           |
| 🔞 Age Restricted (21+) | `age_over_21` preset         | `HumanityGate` + `HumanityVerify` |
| 💎 Accredited Investors | `accredited_investor` preset | `HumanityGate` + `HumanityVerify` |

<br>