> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neus.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Ship trust in your app with drop-in widgets — VerifyGate, ProofBadge, and a server check.

The fastest way to add trust to an app: gate content with **`<VerifyGate>`**, show status with **`<ProofBadge>`**, and confirm on your server before trusted actions. Your app never implements check logic — a published gate owns the checks, pricing, and checkout.

**End users never need a NEUS account, an API key, or extra setup in your product.**

## Build it

<Steps>
  <Step title="Publish a gate">
    Sign in at [neus.network](https://neus.network), open your profile → **Portals**, choose the checks visitors must pass, set pricing (you pay by default, or charge visitors), and **Publish**. Copy your `gateId` — visitors only ever need that.
  </Step>

  <Step title="Gate content with VerifyGate">
    ```jsx theme={"dark"}
    import { VerifyGate } from '@neus/sdk/widgets';

    <VerifyGate gateId="gate_your-app-name">
      <ProtectedContent />
    </VerifyGate>;
    ```

    `VerifyGate` looks for an existing receipt, opens **Hosted Verify** only when a new one is needed, then renders your content. Wallet, passkey, and OAuth all happen on NEUS — not inside your app.
  </Step>

  <Step title="Show status with ProofBadge">
    ```jsx theme={"dark"}
    import { ProofBadge } from '@neus/sdk/widgets';

    <ProofBadge qHash={proof.qHash} />;
    ```

    Optional: pass `showChains` when you want on-chain status in the badge.
  </Step>

  <Step title="Confirm before trusted actions">
    On your server, check the visitor still satisfies the gate before you act. Pass the **account address** from the Hosted Verify callback or the receipt you stored — every NEUS account has one (passkey and OAuth included). You do not need a separate crypto wallet in your product for this path:

    ```js theme={"dark"}
    import { NeusClient } from '@neus/sdk';

    const client = new NeusClient();
    const result = await client.gateCheck({
      gateId: 'gate_your-app-name',
      address: user.accountAddress, // from Hosted Verify / stored receipt subject
    });

    if (!result.data?.gate?.allRequiredSatisfied) {
      // send the user back to VerifyGate or Hosted Verify
    }
    ```
  </Step>
</Steps>

The visitor’s receipt is theirs. If they return or visit another gate that needs the same checks, they can reuse it.

## Not using React? Send users to Hosted Verify

```js theme={"dark"}
import { getHostedCheckoutUrl } from '@neus/sdk';

window.location.assign(
  getHostedCheckoutUrl({
    gateId: 'gate_your-app-name',
    returnUrl: 'https://myapp.com/auth/callback',
  }),
);
```

Read the **receipt ID** (`qHash`) from the callback URL or popup message, then store it. Details: [Hosted Verify](./cookbook/auth-hosted-verify).

## Adding trust to an agent instead?

[Install NEUS](./install), then ask: **"Use NEUS Verify before taking sensitive actions."**

## Next

<CardGroup cols={3}>
  <Card title="VerifyGate" icon="square-check" href="./widgets/verifygate">
    Props, modes, and OAuth.
  </Card>

  <Card title="Hosted Verify" icon="key" href="./cookbook/auth-hosted-verify">
    The browser flow on NEUS.
  </Card>

  <Card title="Integration" icon="compass" href="./integration">
    Check, verify, save, reuse.
  </Card>
</CardGroup>

Backend-created receipts after a one-time approval: [Integrations](./cookbook/integrations).