Privy

Quickstart

The Privy React Auth SDK simplifies user authentication in React apps, providing tools for various login methods and user management.

1. Installation

Install the SDK using npm:

npm install @privy-io/react-auth

2. Get API Keys

Retrieve your Privy app ID from the developer console.

3. Setting up your App

You have to define a custom chain configuration in so it can be used with PrivyProvider

import { defineChain } from "viem-15";
export const config = {
  unreal: {
    privyConfig: defineChain({
      id: 18231,
      network: "unreal",
      name: "Unreal",
      nativeCurrency: {
        name: "unreal Ether",
        symbol: "ETH",
        decimals: 18,
      },
      rpcUrls: {
        public: {
          http: ["https://rpc.unreal.gelato.digital"],
        },
        default: {
          http: ["https://rpc.unreal.gelato.digital"],
        },
      },
      blockExplorers: {
        default: {
          name: "Block Scout",
          url: "https://unreal.blockscout.com/",
        },
      },
      contracts: {
        multicall3: {
          address: "0xca11bde05977b3631167028862be2a173976ca11",
          blockCreated: 31317,
        },
      },
      testnet: true,
    }),
    privyId: "YOUR_PRIVY_ID",
    zeroDevId: "ZERODEV_ID",
    simpleCounter: "0x47A9064a8D242860ABb43FC8340B3680487CC088",
  },
};

// Example for NextJS
import { PrivyProvider } from "@privy-io/react-auth";
// ... other imports

function MyApp({ Component, pageProps }) {
  // ... setup
  return (
    <PrivyProvider appId="your-app-id" /* ...other config */>
      {/* ... rest of your app */}
    </PrivyProvider>
  );
}

// Example for Create React App
import { PrivyProvider } from "@privy-io/react-auth";
// ... other imports

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <PrivyProvider appId="your-app-id" defaultChain: config[raasNetwork].privyConfig,
                supportedChains: [config[raasNetwork].privyConfig], /* ...other config */>
      <App />
    </PrivyProvider>
  </React.StrictMode>
);

Just usePrivy!