feat: identity and authentication

Author: pcarranzav

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.removeUnused.ts": "explicit",
     "source.organizeImports.biome": "explicit"
   },
   "[javascript]": {
@@ -42,5 +41,6 @@
     },
     "editor.suggest.insertMode": "replace",
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "editor.tabSize": 2
 }

apps/events/package.json

@@ -37,9 +37,11 @@
     "lucide-react": "^0.441.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "siwe": "^2.3.2",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.0.3",
+    "viem": "^2.21.56",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "devDependencies": {

apps/events/src/Boot.tsx

@@ -1,6 +1,6 @@
-import { PrivyProvider } from '@privy-io/react-auth';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 
+import { AuthProvider } from './components/auth';
 import { routeTree } from './routeTree.gen';
 
 // Create a new router instance
@@ -15,23 +15,8 @@ declare module '@tanstack/react-router' {
 
 export function Boot() {
   return (
-    <PrivyProvider
-      appId="cm1gt9i1b002g12ih6b6l4vvi"
-      config={{
-        // Display email and wallet as login methods
-        loginMethods: ['wallet'],
-        // Customize Privy's appearance in your app
-        appearance: {
-          theme: 'light',
-          accentColor: '#676FFF',
-        },
-        // Create embedded wallets for users who don't have a wallet
-        // embeddedWallets: {
-        //   createOnLogin: "users-without-wallets",
-        // },
-      }}
-    >
+    <AuthProvider>
       <RouterProvider router={router} />
-    </PrivyProvider>
+    </AuthProvider>
   );
 }

apps/events/src/components/auth.tsx

@@ -0,0 +1,91 @@
+import { GraphLogin, useGraphLogin } from '@graph-framework/identity';
+import type { Signer } from '@graph-framework/identity/types';
+import { PrivyProvider, usePrivy, useWallets } from '@privy-io/react-auth';
+import { useRouter } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+
+function DoGraphLogin() {
+  const { login } = useGraphLogin();
+  useEffect(() => {
+    console.log('Logging in to The Graph');
+    login();
+  }, []);
+  return <div />;
+}
+
+function Auth({ children }: { children: React.ReactNode }) {
+  const { signMessage, authenticated } = usePrivy();
+  const { wallets } = useWallets();
+  const [signer, setSigner] = useState<Signer | null>(null);
+
+  useEffect(() => {
+    const getSigner = async () => {
+      const embeddedWallet = wallets.find((wallet) => wallet.walletClientType === 'privy') || wallets[0];
+      const provider = await embeddedWallet.getEthersProvider();
+      const newSigner = provider.getSigner();
+      if (embeddedWallet.walletClientType === 'privy') {
+        newSigner.signMessage = async (message) => {
+          // @ts-expect-error signMessage is a string in this case
+          const signature = await signMessage(message); //, uiConfig);
+
+          return signature;
+        };
+      }
+      setSigner(newSigner);
+    };
+
+    if (wallets.length > 0) {
+      getSigner();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallets]);
+
+  return (
+    <>
+      {signer && authenticated ? (
+        <GraphLogin storage={localStorage} signer={signer}>
+          <DoGraphLogin />
+          {children}
+        </GraphLogin>
+      ) : (
+        children
+      )}
+    </>
+  );
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <PrivyProvider
+      appId="cm4wx6ziv00ngrmfjf9ik36iu"
+      config={{
+        // Display email and wallet as login methods
+        loginMethods: ['email', 'wallet', 'google', 'twitter', 'github'],
+        // Customize Privy's appearance in your app
+        appearance: {
+          theme: 'light',
+          accentColor: '#676FFF',
+        },
+        // Create embedded wallets for users who don't have a wallet
+        embeddedWallets: {
+          createOnLogin: 'users-without-wallets',
+        },
+      }}
+    >
+      <Auth>{children}</Auth>
+    </PrivyProvider>
+  );
+}
+
+export function RequireAuth({ children }: { children: React.ReactNode }) {
+  const { authenticated } = usePrivy();
+  const { authenticated: graphAuthenticated } = useGraphLogin();
+  const router = useRouter();
+  if (!authenticated || !graphAuthenticated) {
+    router.navigate({
+      to: '/login',
+    });
+    return <div />;
+  }
+  return <>{children}</>;
+}

apps/events/src/components/debug-invitations.tsx

@@ -4,24 +4,12 @@ import { Button } from './ui/button';
 
 type Props = {
   invitations: Invitation[];
-  encryptionPublicKey: string;
-  encryptionPrivateKey: string;
-  signaturePrivateKey: string;
   accept: (params: {
-    encryptionPublicKey: string;
-    encryptionPrivateKey: string;
-    signaturePrivateKey: string;
     invitation: Invitation;
   }) => Promise<unknown>;
 };
 
-export function DebugInvitations({
-  invitations,
-  accept,
-  encryptionPublicKey,
-  encryptionPrivateKey,
-  signaturePrivateKey,
-}: Props) {
+export function DebugInvitations({ invitations, accept }: Props) {
   return (
     <ul className="text-xs">
       {invitations.map((invitation) => {
@@ -31,9 +19,6 @@ export function DebugInvitations({
             <Button
               onClick={() => {
                 accept({
-                  encryptionPublicKey,
-                  encryptionPrivateKey,
-                  signaturePrivateKey,
                   invitation,
                 });
               }}

apps/events/src/components/logout.tsx

@@ -1,16 +1,16 @@
-import { wipeKeys } from '@/lib/keyStorage';
-import { redirect } from '@tanstack/react-router';
+import { useGraphLogin } from '@graph-framework/identity';
+import { usePrivy } from '@privy-io/react-auth';
+import { useRouter } from '@tanstack/react-router';
 import { Button } from './ui/button';
 
 export function Logout() {
+  const { logout: graphLogout } = useGraphLogin();
+  const { logout: privyLogout } = usePrivy();
+  const router = useRouter();
   const disconnectWallet = () => {
-    const localStorageSignerAddress = localStorage.getItem('signerAddress');
-    localStorage.removeItem('signerAddress');
-    if (!localStorageSignerAddress) {
-      return;
-    }
-    wipeKeys(localStorageSignerAddress);
-    redirect({
+    graphLogout();
+    privyLogout();
+    router.navigate({
       to: '/login',
     });
   };

apps/events/src/lib/isAuthenticated.ts

@@ -19,17 +19,10 @@ import { Route as SpaceSpaceIdImport } from './routes/space/$spaceId'
 
 // Create Virtual Routes
 
-const Login2LazyImport = createFileRoute('/login2')()
 const LoginLazyImport = createFileRoute('/login')()
 
 // Create/Update Routes
 
-const Login2LazyRoute = Login2LazyImport.update({
-  id: '/login2',
-  path: '/login2',
-  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/login2.lazy').then((d) => d.Route))
-
 const LoginLazyRoute = LoginLazyImport.update({
   id: '/login',
   path: '/login',
@@ -79,13 +72,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginLazyImport
       parentRoute: typeof rootRoute
     }
-    '/login2': {
-      id: '/login2'
-      path: '/login2'
-      fullPath: '/login2'
-      preLoaderRoute: typeof Login2LazyImport
-      parentRoute: typeof rootRoute
-    }
     '/space/$spaceId': {
       id: '/space/$spaceId'
       path: '/space/$spaceId'
@@ -102,15 +88,13 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
-  '/login2': typeof Login2LazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
-  '/login2': typeof Login2LazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
@@ -119,38 +103,29 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
-  '/login2': typeof Login2LazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/playground' | '/login' | '/login2' | '/space/$spaceId'
+  fullPaths: '/' | '/playground' | '/login' | '/space/$spaceId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/playground' | '/login' | '/login2' | '/space/$spaceId'
-  id:
-    | '__root__'
-    | '/'
-    | '/playground'
-    | '/login'
-    | '/login2'
-    | '/space/$spaceId'
+  to: '/' | '/playground' | '/login' | '/space/$spaceId'
+  id: '__root__' | '/' | '/playground' | '/login' | '/space/$spaceId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   PlaygroundRoute: typeof PlaygroundRoute
   LoginLazyRoute: typeof LoginLazyRoute
-  Login2LazyRoute: typeof Login2LazyRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   PlaygroundRoute: PlaygroundRoute,
   LoginLazyRoute: LoginLazyRoute,
-  Login2LazyRoute: Login2LazyRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRoute,
 }
 
@@ -167,7 +142,6 @@ export const routeTree = rootRoute
         "/",
         "/playground",
         "/login",
-        "/login2",
         "/space/$spaceId"
       ]
     },
@@ -180,9 +154,6 @@ export const routeTree = rootRoute
     "/login": {
       "filePath": "login.lazy.tsx"
     },
-    "/login2": {
-      "filePath": "login2.lazy.tsx"
-    },
     "/space/$spaceId": {
       "filePath": "space/$spaceId.tsx"
     }