⚛️ React + Vite

To begin integrating PramanAuth, install the SDK along with its peer dependency, tslib (required for bundler helper resolution):

npm install @praman-network/sdk tslib

If you are using Vite, you must configure polyfills for Node.js variables such as Buffer and global.

1. Install the Polyfill Plugin

npm install vite-plugin-node-polyfills --save-dev

2. Update vite.config.ts (or vite.config.js)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    react(),
    // Ye plugin global, Buffer, process sabko browser me available kar dega
    nodePolyfills({
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
    }),
  ],
  optimizeDeps: {
    include: ['@praman-network/sdk', '@lit-protocol/lit-node-client', 'tslib']
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    }
  }
})

---

Basic Usage Example

Once installed and configured, initialize the SDK and trigger login from a component:

import { useState } from "react";
import { initPraman } from "@praman-network/sdk";

const praman = initPraman({
  apiKey: "pm_dev_your_api_key_here",
  network: "polygon-amoy",
  idpUrl: "https://auth.praman.network",
  backendUrl: "https://api.praman.network",
});

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleLogin = async () => {
    setLoading(true);
    setError("");

    try {
      const result = await praman.loginWithPopup({
        scopes: ["email", "profile"],
      });

      if (result.success) {
        setUser(result.user);
      } else {
        setError("Authentication failed");
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {!user ? (
        <>
          <h2>PramanAuth Test</h2>

          <button onClick={handleLogin} disabled={loading}>
            {loading ? "Loading..." : "Login with PramanAuth"}
          </button>

          {error && <p>{error}</p>}
        </>
      ) : (
        <>
          <h2>Authenticated Successfully</h2>

          <p>DID: {user.did}</p>

          <button onClick={() => setUser(null)}>
            Sign Out
          </button>
        </>
      )}
    </div>
  );
}

export default App;

Looking for a fully styled, production-ready login card instead? See the Premium Login Component Examples.