reclaim Protocol

Introduction

In the digital age, data is the new gold. Yet, accessing and utilizing data from various websites can often be a challenge, especially when API endpoints are unavailable. Enter Reclaim Protocol, a groundbreaking Zero-Knowledge Protocol that allows users to securely retrieve data from any website with user consent. This article will explore what Reclaim Protocol is, how it works, and the myriad of use cases it offers for developers and businesses alike

🚀🔐 Meet the Reclaim Protocol: Your Secret Agent for Secure Data Retrieval! 🔐🚀

Imagine you’ve got a digital superhero, swooping in to save the day every time you need data from a website. Even if that website doesn’t have a fancy API or an "official" data retrieval system, our superhero—Reclaim Protocol—is here to make sure your data gets to you safely and securely! 🦸‍♂️🌐

How does it work? 🤔

Secret Agent Mode: Reclaim Protocol plays the role of a stealthy witness proxy between you and the website. Think of it as your undercover agent ensuring your data journey is smooth and secure! 🕵️‍♂️✨
Zero-Knowledge Magic: It uses super cool Zero-Knowledge Protocols to keep everything hush-hush. Your data privacy is maintained because only you (and not the website) know the details! 🎩🔮
Cryptographic Nature: With ZkCircuits, Reclaim Protocol crafts cryptographic proofs (ZkProofs) right on your device. It’s like having a wizard’s spellbook, but for securing data! 📜✨

So, whether a website’s API is on vacation or simply doesn’t exist, Reclaim Protocol ensures you get your data safely, all while keeping it a well-guarded secret. Say goodbye to data mishaps and hello to secure, private data retrieval! 🌟🛡️

🌟 Unlock the Magic of Reclaim Protocol: Exciting Use Cases for Your Digital World! 🌟

Ride-Sharing Revolution 🚗💨 Picture this: You’re creating the next big thing in ride-sharing. With Reclaim Protocol, you can magically import a user's ride history from Uber (with their permission, of course!). This means you can roll out personalized discounts, loyalty perks, and supercharged services tailored to their past rides. It's like having a crystal ball to make your ride-sharing app irresistible! 🧙‍♂️✨
Blockchain Brilliance 🔗🚀 Dive into the world of blockchain with a twist! Reclaim Protocol lets you blend off-chain data (like user activities on other platforms) into your blockchain apps. This means users’ actions across various sites can now impact their blockchain experience, ensuring they get the rewards and recognition they deserve in the digital ledger. It’s blockchain with a personalized touch! 🌐✨
E-commerce Personalization Running an e-commerce site? Think of Reclaim Protocol as your new personal shopper! It can pull in purchasing preferences from Amazon and use that info to tailor discounts and recommendations just for your users. Imagine offering spot-on deals and suggestions that make each shopping trip a breeze. It’s a recipe for happier customers and boosted sales! 📈🎉

Educational Platforms: The Academic Transcript 🎓 Think of your online learning platform as a new school you’re joining. To tailor your learning path, the platform would love to see your previous academic records. Using Reclaim Protocol is like sharing your academic transcript from another school (with your consent) so that the new platform can recommend courses and track progress based on your past studies.
Travel Booking Sites: The Frequent Flyer’s Logbook ✈️ Suppose you’re using a new travel booking site and want it to offer deals based on your past flights. Reclaim Protocol is like giving this site access to your frequent flyer logbook (with your permission) so they can offer you special deals and upgrades based on your previous travel patterns.
Gaming Platforms: The Gamer’s Achievement Log 🎮 Imagine you’re joining a new gaming platform, and it wants to recognize your past gaming achievements. Using Reclaim Protocol is like letting the new platform view your old game achievements log (with your consent) so it can reward you based on your previous gaming successes and skills.

🌟 "Reclaim" - Built by Developers, for Developers 🌟

Integrating Reclaim on a Desktop Website

Imagine you're building a sleek new website, and you want to incorporate Reclaim to offer an amazing user experience. Here’s how the magic happens:

User Login: Our journey begins as a user logs into your site. Simple enough, right?
Session Creation: Next, we use the Reclaim SDK to create a fresh session for this user. This step involves requesting some data from the site you've configured in the SDK, and voilà—out comes a unique URI.
QR Code Display: Now, we display a QR code on the screen, which is like a secret key to the user's session.
QR Code Scan: The user then grabs their mobile phone, opens the camera, and scans the QR code. It’s like sending a digital postcard from their desktop to their mobile device!
Login Prompt: Up next, they get a prompt to log in to Acme.com via a webview on their phone. It’s a quick pitstop to ensure everything is in order.
Proof Generation: Once they’ve logged in, their device generates a proof—a unique confirmation of their session.
Proof Submission: They hit submit, sending this proof back to your site.
Business Logic: Finally, your website processes this proof and performs any necessary actions based on it. And just like that, the integration is complete!

Integrating Reclaim on a Mobile Website

Now, let’s switch gears and look at how we handle things on a mobile website. The process is quite similar but with a few twists:

User Login: Our user starts by logging into your mobile site.
Session Creation: The Reclaim SDK springs into action, creating a session and generating a URI.
Device Detection: Here’s where we get a bit clever—we detect whether the user is on a desktop or mobile device.
Button Display: Instead of a QR code, we show a button linked to the URI. It’s a more mobile-friendly approach.
Interaction: The user taps the button, and the journey continues.
Login Prompt: They’re prompted to log in via a webview on their mobile device.
Proof Generation: After logging in, the proof is generated on their device.
Proof Submission: They submit the proof, and it’s sent back to your site.
Business Logic: Your site processes the proof and executes any required actions. The integration is smooth and seamless!

Let's start with the Frontend.

Are you ready to dive into the world of Reclaim Protocol? Because I am 🎉. In this article, we'll embark on an exciting journey to integrate Reclaim into your frontend using React. We’ll keep things straightforward and showcase just the frontend implementation here. But don’t worry—if you’re curious about the backend, we’ll point you to additional resources. Let’s get started!

Prerequisites

Node.js version 18.0.0 or later

Quickstart

Create an Application on Dev Tool: Head over to Reclaim ’s Dev Tool and create a new application. You’ll be asked to provide the websites you want to import data from. Once your application is created, you’ll receive an application ID and secret. Jot these down—they’ll be crucial for the next steps!
Install Reclaim SDK: In your project directory, install the Reclaim SDK with:
```
 bashCopy codenpm i @reclaimprotocol/js-sdk
```

Import Reclaim Client: Bring the Reclaim client into your project:

 javascriptCopy codeimport { Reclaim } from '@reclaimprotocol/js-sdk';

Initialize Reclaim Client: Start with the basics by initializing the Reclaim client:

 javascriptCopy codeimport './App.css';
 import { Reclaim } from '@reclaimprotocol/js-sdk';

 function App() {
   const APP_ID = "YOUR_APPLICATION_ID"; // Replace with your application ID
   const reclaimClient = new Reclaim.ProofRequest(APP_ID);

   return <div className='App'></div>;
 }

 export default App;

Add a Function to Request Proofs: Add a function to request verification proofs:

 javascriptCopy codeasync function generateVerificationRequest() {
   const providerId = 'PROVIDER_ID'; // Replace with your provider ID

   reclaimClient.addContext(
     ('user\'s address'),
     ('for acmecorp.com on 1st January')
   );

   await reclaimClient.buildProofRequest(providerId);
 }

Add Context to the Proof (Optional but Recommended): Enhance the proof by adding context:

 javascriptCopy codereclaimClient.addContext(
   ('user\'s address'),
   ('for acmecorp.com on 1st January')
 );

Build the Proof Request Object: Complete the setup by building the proof request:
```
 javascriptCopy codeawait reclaimClient.buildProofRequest(providerId);
```
Set Signature for Request: Protect your users by setting a signature on the request:
```
 javascriptCopy codereclaimClient.setSignature(
   await reclaimClient.generateSignature(
     APP_SECRET // Replace with your app secret
   )
 );
```
Note: For security, consider generating the signature on the backend rather than the frontend. More details are available in the Sign Proof Requests documentation.

Get the Request URL: Retrieve the request URL and set it in your state:

 javascriptCopy codeconst { requestUrl, statusUrl } =
   await reclaimClient.createVerificationRequest();

 setUrl(requestUrl);

Display the QR Code: Show a QR code for mobile users:

javascriptCopy codeimport QRCode from "react-qr-code";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "50vh" }}>
      {!url && (
        <button onClick={generateVerificationRequest}>
          Create Claim QR Code
        </button>
      )}
      {url && (
        <QRCode value={url} />
      )}
    </div>
  );
}

Start Session & Set Callbacks: Handle user interactions with callbacks:

javascriptCopy codeawait reclaimClient.startSession({
  onSuccessCallback: proof => {
    console.log('Verification success', proof);
    // Your business logic here
  },
  onFailureCallback: error => {
    console.error('Verification failed', error);
    // Your error handling logic here
  }
});

Summarizing

If you skip the optional steps, your codebase will look like this, giving you a functional verification request system:

javascriptCopy codeimport './App.css';
import { Reclaim } from '@reclaimprotocol/js-sdk';
import { useState } from 'react';
import QRCode from "react-qr-code";

function App() {
  const [url, setUrl] = useState('');
  const APP_ID = "YOUR_APPLICATION_ID"; // Replace with your application ID
  const reclaimClient = new Reclaim.ProofRequest(APP_ID);

  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID'; // Replace with your provider ID

    reclaimClient.addContext(
      ('user\'s address'),
      ('for acmecorp.com on 1st January')
    );

    await reclaimClient.buildProofRequest(providerId);
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET // Replace with your app secret
      )
    );

    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest();

    setUrl(requestUrl);

    await reclaimClient.startSession({
      onSuccessCallback: proofs => {
        console.log('Verification success', proofs);
        // Your business logic here
      },
      onFailureCallback: error => {
        console.error('Verification failed', error);
        // Your error handling logic here
      }
    });
  }

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "50vh" }}>
      {!url && (
        <button onClick={generateVerificationRequest}>
          Create Claim QR Code
        </button>
      )}
      {url && (
        <QRCode value={url} />
      )}
    </div>
  );
}

export default App;

With this guide, you’re all set to integrate Reclaim into your frontend using React. For those interested in backend details, a link to the additional information will be provided. Happy coding! 🚀

Now that you have a basic understanding, please refer to the documentation for more detailed information.

Revolutionize Your Data Access with Reclaim Protocol: The Future of Secure Data Retrieval

Table of contents

Introduction

🌟 Unlock the Magic of Reclaim Protocol: Exciting Use Cases for Your Digital World! 🌟

🌟 "Reclaim" - Built by Developers, for Developers 🌟

Let's start with the Frontend.