🌱 Jainam D. B.

Integrating Anon Aadhaar with Next.js

4 min read

In the era of privacy-first applications, identity verification without compromising user anonymity is gaining momentum. Anon Aadhaar offers a unique solution — users can prove their identity using their Aadhaar card without revealing sensitive personal data. In this guide, we’ll walk through integrating Anon Aadhaar into a Next.js app (page-based routing) with detailed steps and code snippets.

What is Anon Aadhaar?

Anon Aadhaar is a zk-SNARK-based identity verification mechanism allowing users to authenticate with their Aadhaar credentials anonymously. It provides zero-knowledge proofs to applications without revealing any personally identifiable information (PII).

Getting Started with the Integration

Follow these simple steps to add Anon Aadhaar to your Next.js app:

1. Create a New Next.js App

First, initialize a new Next.js app using the create-next-app utility:

npx create-next-app@latest

Choose TypeScript when prompted. Once the setup is complete, navigate to your new project directory:

cd your-app-name

2. Install the Anon Aadhaar React SDK

Install the SDK with npm, making sure to include the --legacy-peer-deps flag to avoid dependency conflicts:

npm i @anon-aadhaar/react --legacy-peer-deps

3. Setup the Provider in _app.tsx

To use Anon Aadhaar throughout your app, wrap your application in the AnonAadhaarProvider. In pages/_app.tsx, update the file as follows:

import "@/styles/globals.css";  
import type { AppProps } from "next/app";  
import { AnonAadhaarProvider } from "@anon-aadhaar/react";  
  
export default function App({ Component, pageProps }: AppProps) {  
  return (  
    <AnonAadhaarProvider  
      _artifactslinks={{  
        zkey_url: "https://anon-aadhaar-artifacts.s3.eu-central-1.amazonaws.com/v2.0.0/circuit_final.zkey",  
        vkey_url: "https://anon-aadhaar-artifacts.s3.eu-central-1.amazonaws.com/v2.0.0/vkey.json",  
        wasm_url: "https://anon-aadhaar-artifacts.s3.eu-central-1.amazonaws.com/v2.0.0/aadhaar-verifier.wasm",  
      }}  
    >  
      <Component {...pageProps} />  
    </AnonAadhaarProvider>  
  );  
}

4. Create the Homepage (index.tsx)

Use the SDK’s built-in hooks and components to add the login functionality and display the generated proof:

import {  
  AnonAadhaarProof,  
  LogInWithAnonAadhaar,  
  useAnonAadhaar,  
  useProver,  
} from "@anon-aadhaar/react";  
import { useEffect } from "react";  
  
  
type HomeProps = {  
  setUseTestAadhaar: (state: boolean) => void;  
  useTestAadhaar: boolean;  
};  
export default function Home({ setUseTestAadhaar, useTestAadhaar }: HomeProps) {  
  const [anonAadhaar] = useAnonAadhaar();  
  const [, latestProof] = useProver();  
  useEffect(() => {  
    if (anonAadhaar.status === "logged-in") {  
      console.log(anonAadhaar.status);  
    }  
  }, [anonAadhaar]);  
  const switchAadhaar = () => {  
    setUseTestAadhaar(!useTestAadhaar);  
  };  
  return (  
    <div className="min-h-screen bg-gray-100 px-4 py-8">  
      <main className="flex flex-col items-center gap-8 bg-white rounded-2xl max-w-screen-sm mx-auto h-[24rem] md:h-[20rem] p-8">  
        <h1 className="font-bold text-2xl">Welcome to Anon Aadhaar Example</h1>  
        <p>Prove your Identity anonymously using your Aadhaar card.</p>  
        <LogInWithAnonAadhaar nullifierSeed={1234} />  
        {useTestAadhaar ? (  
          <p>You&apos;re using the <strong>test</strong> Aadhaar mode</p>  
        ) : (  
          <p>You&apos;re using the <strong>real</strong> Aadhaar mode</p>  
        )}  
        <button  
          onClick={switchAadhaar}  
          className="rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"  
        >  
          Switch to {useTestAadhaar ? "real" : "test"} Aadhaar  
        </button>  
      </main>  
      <div className="flex flex-col items-center gap-4 rounded-2xl max-w-screen-sm mx-auto p-8">  
        {anonAadhaar.status === "logged-in" && (  
          <>  
            <p>✅ Proof is valid</p>  
            <p>Got your Aadhaar Identity Proof</p>  
            <p>Welcome anon!</p>  
            {latestProof && (  
              <AnonAadhaarProof code={JSON.stringify(latestProof, null, 2)} />  
            )}  
          </>  
        )}  
      </div>  
    </div>  
  );  
}

5. Webpack Configuration

To avoid issues with Node.js modules like fs and readline, update next.config.ts:

/** @type {import('next').NextConfig} */  
const nextConfig = {  
  reactStrictMode: false,  
  webpack: (config: NextConfig) => {  
    config.resolve.fallback = {  
      fs: false,  
      readline: false,  
    };  
    return config;  
  },  
};  
module.exports = nextConfig;

6. Fixing the vkey Fetch Error

You may encounter a runtime error related to the vkey fetching in the SDK (index.js inside node_modules). To resolve this:

  1. Open the file mentioned in the error logs (index.js inside @anon-aadhaar/react).

  2. Replace the function with the below function:

function getVerifyKey() {  
  return __async(this, null, function* () {  
    let vk;  
    if (!initArgs) {  
      throw new Error(  
        "cannot make Anon Aadhaar proof: init has not been called yet"  
      );  
    }  
    if (initArgs.artifactsOrigin === 1 /* local */) {  
      // vk = require(initArgs.vkeyURL);  
    } else {  
      const response = yield fetch("https://anon-aadhaar-artifacts.s3.eu-central-1.amazonaws.com/v2.0.0/vkey.json");  
      if (!response.ok) {  
        throw new Error(`Failed to fetch the verify key from server`);  
      }  
      vk = yield response.json();  
    }  
    return vk;  
  });  
}

Run the App

Once all changes are in place, start the development server:

npm run dev

Navigate to http://localhost:3000, and you should see the Anon Aadhaar integration in action!

Conclusion

Anon Aadhaar enables privacy-preserving identity verification using zero-knowledge proofs, and integrating it into a Next.js app is straightforward with the React SDK. By following the steps above, you can empower users to authenticate anonymously, making your app more secure and privacy-conscious.

Graph View