Examples

Examples and code snippets to get you started.

Use when verifying ownership of an ERC-721 NFT.

Use when verifying ownership of ERC-20 tokens.

<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 or Verify with token 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 POSTrequest 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!

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.

Sample response

{
  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
    }
  ]
}

Code Samples

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

Client-side - React example:

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:

// 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);
});