add privy login support

.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/src/Boot.tsx

@@ -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>
+  );
+}

apps/privy-login-example/src/components/InboxCard.tsx

@@ -0,0 +1,54 @@
+import { useExternalAccountInbox } from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+
+interface InboxCardProps {
+  accountAddress: string;
+  inboxId: string;
+}
+
+export function InboxCard({ accountAddress, inboxId }: InboxCardProps) {
+  const [message, setMessage] = useState('');
+  const { loading, error, sendMessage, isPublic, authPolicy } = useExternalAccountInbox(accountAddress, inboxId);
+
+  const handleSendMessage = async () => {
+    if (!message.trim()) return;
+
+    try {
+      await sendMessage(message.trim());
+      setMessage(''); // Clear the input after sending
+    } catch (err) {
+      console.error('Failed to send message:', err);
+    }
+  };
+
+  return (
+    <div className="p-4 border rounded">
+      <h2 className="text-lg mb-2">Inbox: {inboxId}</h2>
+      <div className="text-sm text-muted-foreground mb-4">
+        <div>{isPublic ? 'Public' : 'Private'} inbox</div>
+        <div>Auth Policy: {authPolicy}</div>
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Type a message..."
+          className="flex-1 px-3 py-2 border rounded"
+          disabled={loading}
+        />
+        <button
+          type="button"
+          onClick={handleSendMessage}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+          disabled={loading || !message.trim()}
+        >
+          Send
+        </button>
+      </div>
+
+      {error && <div className="text-red-500 mt-2">{error.message}</div>}
+    </div>
+  );
+}

apps/privy-login-example/src/components/SpaceChat.tsx

@@ -0,0 +1,71 @@
+import { useOwnSpaceInbox } from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+import { Button } from './ui/button';
+
+interface SpaceChatProps {
+  spaceId: string;
+}
+
+export function SpaceChat({ spaceId }: SpaceChatProps) {
+  const [message, setMessage] = useState('');
+
+  // This will create the inbox if it doesn't exist, or use the first inbox in the space
+  const { messages, error, sendMessage, loading } = useOwnSpaceInbox({
+    spaceId,
+    autoCreate: true,
+  });
+
+  if (loading) {
+    return <div>Creating space chat...</div>;
+  }
+
+  const handleSendMessage = async () => {
+    if (!message.trim()) return;
+
+    try {
+      await sendMessage(message.trim());
+      setMessage(''); // Clear the input after sending
+    } catch (err) {
+      console.error('Failed to send message:', err);
+    }
+  };
+
+  return (
+    <div className="mt-8">
+      <h3 className="text-xl font-bold mb-4">Space Chat</h3>
+
+      <div className="border rounded-lg p-4">
+        {/* Messages */}
+        <div className="space-y-4 mb-4 max-h-[400px] overflow-y-auto">
+          {messages?.map((msg) => (
+            <div key={msg.id} className="bg-muted p-3 rounded">
+              <div className="text-sm text-muted-foreground mb-1">
+                <div>From: {msg.authorAccountAddress?.substring(0, 6) || 'Anonymous'}</div>
+                <div>{new Date(msg.createdAt).toLocaleString()}</div>
+              </div>
+              <div>{msg.plaintext}</div>
+            </div>
+          ))}
+          {messages?.length === 0 && <div className="text-center text-muted-foreground py-4">No messages yet</div>}
+        </div>
+
+        {/* Input */}
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Type a message..."
+            className="flex-1 px-3 py-2 border rounded"
+            disabled={loading}
+          />
+          <Button onClick={handleSendMessage} disabled={loading || !message.trim()}>
+            Send
+          </Button>
+        </div>
+
+        {error && <div className="text-red-500 mt-2">{error.message}</div>}
+      </div>
+    </div>
+  );
+}