> For the complete documentation index, see [llms.txt](https://docs.connect.inloop.to/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.connect.inloop.to/examples.md).

# Examples

<div align="center"><img src="https://connect.inloop.to/verify-with-nft.svg" alt="Use when verifying ownership of an ERC-721 NFT."></div>

![Use when verifying ownership of ERC-20 tokens.](https://connect.inloop.to/verify-with-token.svg)

```
<a href='http://connect.inloop.to/oauth/authorize?redirect_uri=YOUR_WEBSITE'>
    <img src='https://connect.inloop.to/verify-with-nft.svg' alt='Verify with NFT' />
</a>
```

#### Overview

1. Add a [Verify with NFT](https://connect.inloop.to/verify-with-nft.svg) or [Verify with token](https://connect.inloop.to/verify-with-token.svg) button to your page with the code snippet above.
2. Create a backend endpoint to redirect users to after connecting with their wallet. The `redirect_uri` value in the snippet should be set to this URL.
3. Once connected, users will be navigated to `<redirect_uri>?code=<authCode>`. This endpoint should send a `POST`request to `https://connect.inloop.to/api/v1/oauth/token` with JSON body `{code: <authCode>}`. Remember to set an `Authorization: Bearer <api_key>` header.
4. The response should be `{user_token: <userToken>}`. Query the list of NFT or ERC-20 tokens owned by the user by sending a `GET` request to `https://connect.inloop.to/api/v1/users/`*`:user_token`*`/tokens`, replacing *:user\_token* with the `<userToken>`. Make sure to specify the NFTs or tokens you are looking for in your [InLoop Connect dashboard](https://connect.inloop.to/dashboard)!
5. The response should be a JSON structure like the one below. **You're pretty much done!** Now you can grant your users benefits associated with the tokens or NFTs they own.

{% code title="Sample response" %}

```json
{
  user_token: 'eyJ...',
  wallet_address: '0xa5B8...',
  tokens_owned: [
    {
      contract_name: 'My NFT',
      contract_address: '0xc048...',
      network: 'polygon',
      token_type: 'erc721',
      token_ids: [42],
      quantity: 1
    }
  ]
}
```

{% endcode %}

## **Code Samples**

**See a complete, working repo with React.js and Express.js at** [**https://github.com/inloop-to/inloop-example**](https://github.com/inloop-to/inloop-example)**.**

**Client-side** - React example:&#x20;

```jsx
import React, { useEffect, useState } from "react";

export default function NFTVerify() {
  const search = window.location.search;
  const code = new URLSearchParams(search).get("code");

  const [tokens, setTokens] = useState();
  const [wallet, setWallet] = useState();

  useEffect(() => {
    if (!code) {
      return;
    }

    (async () => {
      // Exchange temporary authorization code with permanent user token
      // Implement this on your backend (example in the next code block)
      // Do not expose your API secret key on the client side!
      const user_token_fetch = await fetch(
        "http://localhost:3001/api/user-token",
        {
          body: JSON.stringify({
            code: code,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        }
      );
      const user_token_response = await user_token_fetch.json();

      // Call the list tokens API
      // Implement this on your backend (example in the next code block)
      // Do not expose your API secret key on the client side!
      const list_tokens_fetch = await fetch(
        "http://localhost:3001/api/list-tokens",
        {
          body: JSON.stringify({
            user_token: user_token_response.user_token,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        }
      );
      const list_tokens_response = await list_tokens_fetch.json();
      setTokens(list_tokens_response.tokens_owned);
      setWallet(list_tokens_response.wallet_address);
    })();
  }, [code]);

  return (
    <>
      {tokens && wallet ? (
        <>
          <h1>Tokens owned by {wallet}</h1>
          {tokens.map((token) => (
            <>
              <p>Name: {token.contract_name}</p>
              <p>Contract Address: {token.contract_address}</p>
              <p>Quantity Owned: {token.quantity}</p>
              <p>ID(s) of token(s) owned: {token.token_ids}</p>
            </>
          ))}
        </>
      ) : (
        <a href="http://connect.inloop.to/oauth/authorize?redirect_uri=http://localhost:3000">
          <img
            src="https://connect.inloop.to/verify-with-nft.svg"
            alt="Verify with NFT"
          />
        </a>
      )}
    </>
  );
}
```

**Server-side** - Node.js example:

```javascript
// REPLACE WITH YOUR API SECRET KEY HERE
const API_SECRET_KEY = "XXXXXXXXXX";

const app = express();

// Take authorization code and exchange for permanent user token
app.post("/api/user-token", async function (req, res) {
  const response = await axios({
    method: "POST",
    url: "https://connect.inloop.to/api/v1/oauth/token",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_SECRET_KEY}`,
    },
    data: {
      code: req.body.code,
    },
  });
  return res.status(200).json(response.data);
});

// Fetch the list of ERC-20 tokens or NFTs for a user
app.post("/api/list-tokens", async function (req, res) {
  const response = await axios({
    method: "GET",
    url: `https://connect.inloop.to/api/v1/users/${req.body.user_token}/tokens`,
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_SECRET_KEY}`,
    },
  });
  return res.status(200).json(response.data);
});

```