React with Better Auth

import { betterAuth } from "better-auth";
import { Pool } from "pg";
import { jwt } from "better-auth/plugins";

export const auth = betterAuth({
    database: new Pool({
        connectionString: process.env.DATABASE_URL
    }),
    emailAndPassword: {
        enabled: true,
    },
    plugins: [
        jwt({
            jwks: {
                keyPairConfig: {
                    alg: "RS256",
                    modulusLength: 2048,
                }
            },
            jwt: {
                issuer: process.env.JWT_ISSUER,
                audience: process.env.JWT_AUDIENCE,
                expirationTime: "15m"
            }
        })
    ]
});

npm install @chipi-stack/chipi-react

# Your existing Better Auth variables
DATABASE_URL=your_database_url
JWT_ISSUER=your_jwt_issuer
JWT_AUDIENCE=your_jwt_audience

# Add the Chipi Variables
VITE_CHIPI_API_KEY=your_chipi_api_public_key

// App.tsx

import { ChipiProvider } from "@chipi-stack/chipi-react";

export default function App() {
  return (
    <ChipiProvider config={{ apiPublicKey: import.meta.env.VITE_CHIPI_API_KEY }}>
      {/* Your app components */}
    </ChipiProvider>
  );
}

// components/CreateWallet.tsx

import { useState } from "react";
import { useCreateWallet } from "@chipi-stack/chipi-react";
import { authClient } from "../lib/auth-client";

export default function CreateWallet() {
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [encryptKey, setEncryptKey] = useState("");

  const handleCreateWallet = async () => {
    // Get JWT from Better Auth (returned in set-auth-jwt header)
    const { data, response: sessionResponse } = await authClient.getSession({
      fetchOptions: { onSuccess: (ctx) => ctx },
    });
    const bearerToken = sessionResponse?.headers?.get("set-auth-jwt") ?? data?.session?.token;
    const userId = data?.user?.id;

    if (!bearerToken || !userId) {
      console.error("Please sign in first");
      return;
    }

    const walletResponse = await createWalletAsync({
      params: {
        encryptKey,
        externalUserId: userId,
      },
      bearerToken,
    });

    console.log("Wallet created:", walletResponse.publicKey);
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Enter encryption key"
        value={encryptKey}
        onChange={(e) => setEncryptKey(e.target.value)}
      />
      <button onClick={handleCreateWallet} disabled={isLoading}>
        {isLoading ? "Creating..." : "Create Wallet"}
      </button>
    </div>
  );
}