extend with privy based app

Author: nikgraf

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

@@ -1,11 +1,14 @@
 import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { usePrivy } from '@privy-io/react-auth';
 import { useRouter } from '@tanstack/react-router';
 import { Button } from './ui/button';
 
 export function Logout() {
   const { logout: graphLogout } = useHypergraphApp();
+  const { logout: privyLogout } = usePrivy();
   const router = useRouter();
   const disconnectWallet = async () => {
+    privyLogout();
     graphLogout(); // needs to be called after privy logout since it triggers a re-render
     router.navigate({
       to: '/login',

apps/privy-login-example/src/routes/__root.tsx

@@ -1,7 +1,7 @@
-import { Logout } from '@/components/logout';
 import { usePrivy } from '@privy-io/react-auth';
 import { createRootRoute, Link, Outlet, useLayoutEffect, useRouter } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+import { Logout } from '@/components/logout';
 
 export const Route = createRootRoute({
   component: () => {

apps/privy-login-example/src/routes/account-inbox/$inboxId.tsx

@@ -7,11 +7,11 @@ export const Route = createFileRoute('/account-inbox/$inboxId')({
 
 function RouteComponent() {
   const { inboxId } = Route.useParams();
-  const { identity } = useHypergraphAuth();
+  const { privyIdentity } = useHypergraphAuth();
   const { messages, loading, error } = useOwnAccountInbox(inboxId);
 
   // Ensure we have an authenticated user
-  if (!identity?.accountAddress) {
+  if (!privyIdentity?.accountAddress) {
     return <div>Please login to view your inbox</div>;
   }
 

apps/privy-login-example/src/routes/login.lazy.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@/components/ui/button';
-import { Connect, type Identity } from '@graphprotocol/hypergraph';
-import { ConnectedWallet, useIdentityToken, usePrivy, useWallets } from '@privy-io/react-auth';
+import { Connect, type Identity, PrivyAuth } from '@graphprotocol/hypergraph';
+import { type ConnectedWallet, useIdentityToken, usePrivy, useWallets } from '@privy-io/react-auth';
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router';
 import { useCallback, useEffect, useState } from 'react';
 import { createWalletClient, custom, type WalletClient } from 'viem';
+import { Button } from '@/components/ui/button';
 
 const CHAIN = import.meta.env.VITE_HYPERGRAPH_CHAIN === 'geogenesis' ? Connect.GEOGENESIS : Connect.GEO_TESTNET;
 const syncServerUri = import.meta.env.VITE_HYPERGRAPH_SYNC_SERVER_ORIGIN;
@@ -23,7 +23,6 @@ function Login() {
 
   const hypergraphLogin = useCallback(
     async (walletClient: WalletClient, embeddedWallet: ConnectedWallet) => {
-      console.log('hypergraphLogin');
       if (!identityToken) {
         return;
       }
@@ -49,10 +48,7 @@ function Login() {
 
       const rpcUrl = import.meta.env.VITE_HYPERGRAPH_RPC_URL;
 
-      console.log(walletClient);
-      console.log(rpcUrl);
-      console.log(CHAIN);
-      await Connect.login({
+      await PrivyAuth.login({
         walletClient,
         signer,
         syncServerUri,
@@ -67,14 +63,12 @@ function Login() {
   );
 
   useEffect(() => {
-    console.log('useEffect in login.lazy.tsx');
     if (
       !hypergraphLoginStarted && // avoid re-running the effect too often
       privyAuthenticated && // privy must be authenticated to run it
       walletsReady && // wallets must be ready to run it
       wallets.length > 0 // wallets must have at least one wallet to run it
     ) {
-      console.log('running login effect');
       setHypergraphLoginStarted(true);
       (async () => {
         try {
@@ -100,9 +94,11 @@ function Login() {
   return (
     <div className="flex flex-1 justify-center items-center flex-col gap-4">
       <Button
+        disabled={!privyReady || privyAuthenticated}
         onClick={() => {
           privyLogin();
         }}
+        className="c-button c-button--primary sm:c-button--large mt-6"
       >
         Authenticate with Privy
       </Button>

apps/server/src/services/connections.ts

@@ -4,7 +4,7 @@ import type * as Mailbox from 'effect/Mailbox';
 
 type Connection = {
   accountAddress: string;
-  appIdentityAddress: string;
+  appIdentityAddress: string | undefined;
   mailbox: Mailbox.Mailbox<Messages.ResponseMessage>;
   subscribedSpaces: Set<string>;
 };
@@ -14,7 +14,7 @@ export class ConnectionsService extends Context.Tag('ConnectionsService')<
   {
     readonly registerConnection: (params: {
       accountAddress: string;
-      appIdentityAddress: string;
+      appIdentityAddress: string | undefined;
       mailbox: Mailbox.Mailbox<Messages.ResponseMessage>;
     }) => Effect.Effect<string>;
     readonly removeConnection: (connectionId: string) => Effect.Effect<void>;
@@ -45,7 +45,7 @@ export const layer = Effect.gen(function* () {
     mailbox,
   }: {
     accountAddress: string;
-    appIdentityAddress: string;
+    appIdentityAddress: string | undefined;
     mailbox: Mailbox.Mailbox<Messages.ResponseMessage>;
   }) {
     const nextId = yield* Ref.updateAndGet(connectionCounter, (n) => n + 1);

apps/server/src/services/invitations.ts

@@ -7,7 +7,7 @@ import * as IdentityService from './identity.js';
 export class InvitationsService extends Context.Tag('InvitationsService')<
   InvitationsService,
   {
-    readonly listByAppIdentity: (
+    readonly listByAccountAddress: (
       appIdentityAddress: string,
     ) => Effect.Effect<Messages.Invitation[], DatabaseService.DatabaseError>;
   }
@@ -18,7 +18,7 @@ const decodeSpaceState = Schema.decodeUnknownEither(SpaceEvents.SpaceState);
 export const layer = Effect.gen(function* () {
   const { use } = yield* DatabaseService.DatabaseService;
 
-  const listByAppIdentity = Effect.fn('listByAppIdentity')(function* (accountAddress: string) {
+  const listByAccountAddress = Effect.fn('listByAccountAddress')(function* (accountAddress: string) {
     const invitations = yield* use((client) =>
       client.invitation.findMany({
         where: {
@@ -57,6 +57,6 @@ export const layer = Effect.gen(function* () {
   });
 
   return {
-    listByAppIdentity,
+    listByAccountAddress,
   } as const;
 }).pipe(Layer.effect(InvitationsService), Layer.provide(DatabaseService.layer), Layer.provide(IdentityService.layer));

apps/server/src/services/spaces.ts

@@ -77,7 +77,7 @@ export interface CreateSpaceParams {
 export interface GetSpaceParams {
   spaceId: string;
   accountAddress: string;
-  appIdentityAddress: string;
+  appIdentityAddress?: string | undefined;
 }
 
 export interface AddAppIdentityToSpacesParams {
@@ -103,9 +103,13 @@ export class SpacesService extends Context.Tag('SpacesService')<
     readonly addAppIdentityToSpaces: (
       params: AddAppIdentityToSpacesParams,
     ) => Effect.Effect<void, DatabaseService.DatabaseError>;
-    readonly listByAppIdentity: (
-      appIdentityAddress: string,
-    ) => Effect.Effect<SpaceListEntry[], DatabaseService.DatabaseError>;
+    readonly listByAppIdentityOrAccount: ({
+      appIdentityAddress,
+      accountAddress,
+    }: {
+      appIdentityAddress?: string | undefined;
+      accountAddress: string;
+    }) => Effect.Effect<SpaceListEntry[], DatabaseService.DatabaseError>;
     readonly getSpace: (
       params: GetSpaceParams,
     ) => Effect.Effect<GetSpaceResult, ResourceNotFoundError | DatabaseService.DatabaseError>;
@@ -141,6 +145,7 @@ export const layer = Effect.gen(function* () {
               keyBoxes: {
                 where: {
                   accountAddress,
+                  appIdentityAddress: null,
                 },
               },
             },
@@ -171,16 +176,30 @@ export const layer = Effect.gen(function* () {
     }));
   });
 
-  const listByAppIdentity = Effect.fn('listByAppIdentity')(function* (appIdentityAddress: string) {
+  const listByAppIdentityOrAccount = Effect.fn('listByAppIdentityOrAccount')(function* ({
+    appIdentityAddress,
+    accountAddress,
+  }: {
+    appIdentityAddress?: string | undefined;
+    accountAddress: string;
+  }) {
     return yield* use((client) =>
       client.space.findMany({
-        where: {
-          appIdentities: {
-            some: {
-              address: appIdentityAddress,
+        where: appIdentityAddress
+          ? {
+              appIdentities: {
+                some: {
+                  address: appIdentityAddress,
+                },
+              },
+            }
+          : {
+              members: {
+                some: {
+                  address: accountAddress,
+                },
+              },
             },
-          },
-        },
         include: {
           appIdentities: {
             select: {
@@ -191,9 +210,15 @@ export const layer = Effect.gen(function* () {
           keys: {
             include: {
               keyBoxes: {
-                where: {
-                  appIdentityAddress,
-                },
+                where: appIdentityAddress
+                  ? {
+                      accountAddress,
+                      appIdentityAddress,
+                    }
+                  : {
+                      accountAddress,
+                      appIdentityAddress: null,
+                    },
               },
             },
           },
@@ -224,10 +249,15 @@ export const layer = Effect.gen(function* () {
           keys: {
             include: {
               keyBoxes: {
-                where: {
-                  accountAddress,
-                  appIdentityAddress,
-                },
+                where: appIdentityAddress
+                  ? {
+                      accountAddress,
+                      appIdentityAddress,
+                    }
+                  : {
+                      accountAddress,
+                      appIdentityAddress: null,
+                    },
                 select: {
                   nonce: true,
                   ciphertext: true,
@@ -534,7 +564,7 @@ export const layer = Effect.gen(function* () {
 
   return {
     listByAccount,
-    listByAppIdentity,
+    listByAppIdentityOrAccount,
     getSpace,
     createSpace,
     addAppIdentityToSpaces,

apps/server/src/websocket.ts

@@ -13,6 +13,7 @@ import * as AppIdentityService from './services/app-identity.ts';
 import * as ConnectionsService from './services/connections.ts';
 import * as IdentityService from './services/identity.ts';
 import * as InvitationsService from './services/invitations.ts';
+import * as PrivyAuthService from './services/privy-auth.ts';
 import * as SpaceInboxService from './services/space-inbox.ts';
 import * as SpacesService from './services/spaces.ts';
 import * as UpdatesService from './services/updates.ts';
@@ -30,18 +31,34 @@ export const WebSocketLayer = HttpLayerRouter.add(
     const connectionsService = yield* ConnectionsService.ConnectionsService;
     const accountInboxService = yield* AccountInboxService.AccountInboxService;
     const spaceInboxService = yield* SpaceInboxService.SpaceInboxService;
+    const appIdentityService = yield* AppIdentityService.AppIdentityService;
+    const identityService = yield* IdentityService.IdentityService;
+    const privyAuthService = yield* PrivyAuthService.PrivyAuthService;
     const responseMailbox = yield* Mailbox.make<Messages.ResponseMessage>();
 
     const searchParams = HttpServerRequest.searchParamsFromURL(new URL(request.url, 'http://localhost'));
     const token = isArray(searchParams.token) ? searchParams.token[0] : searchParams.token;
-
-    if (!token) {
+    const privyIdentityToken = isArray(searchParams['privy-identity-token'])
+      ? searchParams['privy-identity-token'][0]
+      : searchParams['privy-identity-token'];
+    const privyAccountAddress = isArray(searchParams['account-address'])
+      ? searchParams['account-address'][0]
+      : searchParams['account-address'];
+
+    if (!token && (!privyIdentityToken || !privyAccountAddress)) {
       return yield* HttpServerResponse.empty({ status: 400 });
     }
 
-    const appIdentityService = yield* AppIdentityService.AppIdentityService;
-    const identityService = yield* IdentityService.IdentityService;
-    const { accountAddress, address } = yield* appIdentityService.getBySessionToken(token).pipe(Effect.orDie);
+    let accountAddress: string;
+    let address: string | undefined;
+    if (privyIdentityToken && privyAccountAddress) {
+      yield* privyAuthService.authenticateRequest(privyIdentityToken, privyAccountAddress).pipe(Effect.orDie);
+      accountAddress = privyAccountAddress;
+    } else {
+      const result = yield* appIdentityService.getBySessionToken(token).pipe(Effect.orDie);
+      accountAddress = result.accountAddress;
+      address = result.address;
+    }
 
     // Register this connection
     const connectionId = yield* connectionsService.registerConnection({
@@ -60,14 +77,17 @@ export const WebSocketLayer = HttpLayerRouter.add(
           const request = yield* decodeRequestMessage(json);
           switch (request.type) {
             case 'list-spaces': {
-              const spaces = yield* spacesService.listByAppIdentity(address);
+              const spaces = yield* spacesService.listByAppIdentityOrAccount({
+                appIdentityAddress: address,
+                accountAddress,
+              });
               const outgoingMessage: Messages.ResponseListSpaces = { type: 'list-spaces', spaces: spaces };
               // TODO: fix Messages.serialize
               yield* responseMailbox.offer(Messages.serializeV2(outgoingMessage));
               break;
             }
             case 'list-invitations': {
-              const invitations = yield* invitationsService.listByAppIdentity(accountAddress);
+              const invitations = yield* invitationsService.listByAccountAddress(accountAddress);
               const outgoingMessage: Messages.ResponseListInvitations = {
                 type: 'list-invitations',
                 invitations,
@@ -215,7 +235,7 @@ export const WebSocketLayer = HttpLayerRouter.add(
                 const inviteeAccountAddress = request.event.transaction.inviteeAccountAddress;
 
                 // Get the updated invitation list for the invitee
-                const invitations = yield* invitationsService.listByAppIdentity(inviteeAccountAddress);
+                const invitations = yield* invitationsService.listByAccountAddress(inviteeAccountAddress);
                 const invitationMessage: Messages.ResponseListInvitations = {
                   type: 'list-invitations',
                   invitations,
@@ -432,5 +452,6 @@ export const WebSocketLayer = HttpLayerRouter.add(
     .pipe(Effect.provide(IdentityService.layer))
     .pipe(Effect.provide(UpdatesService.layer))
     .pipe(Effect.provide(AccountInboxService.layer))
-    .pipe(Effect.provide(SpaceInboxService.layer)),
+    .pipe(Effect.provide(SpaceInboxService.layer))
+    .pipe(Effect.provide(PrivyAuthService.layer)),
 );