add privy login support (#537)

Author: nikgraf

.changeset/config.json

@@ -7,6 +7,13 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["events", "next-example", "docs", "hypergraph-vite-react-template", "hypergraph-template-nextjs"],
+  "ignore": [
+    "events",
+    "privy-login-example",
+    "next-example",
+    "docs",
+    "hypergraph-vite-react-template",
+    "hypergraph-template-nextjs"
+  ],
   "prettier": false
 }

.changeset/silver-bikes-lie.md

@@ -0,0 +1,9 @@
+---
+"@graphprotocol/hypergraph-react": patch
+"@graphprotocol/hypergraph": patch
+"connect": patch
+"server": patch
+---
+
+add privy authentication functionality for internal apps
+  

CLAUDE.md

@@ -12,6 +12,7 @@ Hypergraph is a local-first framework for building web3 consumer applications th
 ```bash
 # Run specific apps
 cd apps/events && pnpm dev      # Events demo app
+cd apps/privy-login-example && pnpm dev # Privy login example app
 cd apps/server && pnpm dev      # Backend sync server
 cd apps/connect && pnpm dev     # Geo Connect auth app
 ```
@@ -52,6 +53,7 @@ pnpm clean                      # Clean all build artifacts
 - **apps/** - Complete applications
   - `server/` - Backend sync server (Express + Prisma + SQLite/PostgreSQL)
   - `events/` - Demo app showcasing the framework (Vite + React)
+  - `privy-login-example/` - Privy login example app (Vite + React)
   - `connect/` - Geo Connect authentication app
   - `next-example/` - Next.js integration example
 - **docs/** - Docusaurus documentation site

apps/connect/src/routes/authenticate.tsx

@@ -336,8 +336,6 @@ function AuthenticateComponent() {
 
       const newAppIdentity = Connect.createAppIdentity();
 
-      console.log('creating smart session');
-      console.log('public spaces data', publicSpacesData);
       const spaces =
         publicSpacesData
           // .filter((space) => selectedPublicSpaces.has(space.id))
@@ -348,10 +346,8 @@ function AuthenticateComponent() {
                 : (space.mainVotingAddress as `0x${string}`),
             type: space.type as 'personal' | 'public',
           })) ?? [];
-      console.log('spaces', spaces);
 
       const localAccount = privateKeyToAccount(keys.signaturePrivateKey as `0x${string}`);
-      console.log('local account', localAccount.address);
       // TODO: add additional actions (must be passed from the app)
       const permissionId = await Connect.createSmartSession(
         localAccount,
@@ -365,17 +361,14 @@ function AuthenticateComponent() {
           additionalActions: [],
         },
       );
-      console.log('smart session created');
       const smartAccountClient = await Connect.getSmartAccountWalletClient({
         owner: localAccount,
         address: accountAddress,
         chain: CHAIN,
         rpcUrl: import.meta.env.VITE_HYPERGRAPH_RPC_URL,
       });
 
-      console.log('encrypting app identity');
       const { ciphertext } = await Connect.encryptAppIdentity({ ...newAppIdentity, permissionId }, keys);
-      console.log('proving ownership');
       const { accountProof, keyProof } = await Identity.proveIdentityOwnership(
         smartAccountClient,
         accountAddress,

apps/privy-login-example/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

apps/privy-login-example/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

apps/privy-login-example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/privy-login-example/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "privy-login-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --force",
+    "preview": "vite preview",
+    "typesync": "hypergraph typesync"
+  },
+  "dependencies": {
+    "@graphprotocol/grc-20": "^0.24.1",
+    "@graphprotocol/hypergraph": "workspace:*",
+    "@graphprotocol/hypergraph-react": "workspace:*",
+    "@noble/hashes": "^1.8.0",
+    "@privy-io/react-auth": "^2.21.4",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-router": "^1.131.27",
+    "@tanstack/react-router-devtools": "^1.131.27",
+    "@xstate/store": "^3.9.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "effect": "^3.17.9",
+    "framer-motion": "^12.23.12",
+    "graphql-request": "^7.2.0",
+    "isomorphic-ws": "^5.0.0",
+    "lucide-react": "^0.541.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-select": "^5.10.2",
+    "siwe": "^3.0.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0",
+    "viem": "^2.34.0",
+    "vite": "^7.1.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.2.0",
+    "@tailwindcss/vite": "^4.1.12",
+    "@tanstack/router-plugin": "^1.131.27",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^5.0.1",
+    "globals": "^16.3.0",
+    "tailwindcss": "^4.1.12"
+  }
+}

apps/privy-login-example/public/vite.svg

@@ -0,0 +1,41 @@
+import { HypergraphAppProvider } from '@graphprotocol/hypergraph-react';
+import { PrivyProvider } from '@privy-io/react-auth';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { mapping } from './mapping.js';
+import { routeTree } from './routeTree.gen';
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export function Boot() {
+  return (
+    <PrivyProvider
+      appId={import.meta.env.VITE_PRIVY_APP_ID}
+      config={{
+        loginMethods: ['email', 'google'],
+        appearance: {
+          theme: 'light',
+          accentColor: '#6833ff',
+        },
+        embeddedWallets: {
+          createOnLogin: 'users-without-wallets',
+        },
+      }}
+    >
+      <HypergraphAppProvider
+        syncServerUri="http://localhost:3030"
+        mapping={mapping}
+        appId="93bb8907-085a-4a0e-83dd-62b0dc98e793"
+      >
+        <RouterProvider router={router} />
+      </HypergraphAppProvider>
+    </PrivyProvider>
+  );
+}