zupass gating and some app state

Author: lassejaco

devconnect-app/src/app/api/auth/middleware.ts

@@ -1,9 +1,11 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { createClient, type User } from '@supabase/supabase-js'
-import { jwtVerify, createRemoteJWKSet } from 'jose'
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient, type User } from '@supabase/supabase-js';
+import { jwtVerify, createRemoteJWKSet } from 'jose';
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY
+const supabaseUrl =
+  process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL;
+const supabaseAnonKey =
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY;
 
 // Define Para JWKS URLs based on environment
 const PARA_JWKS_URLS = {
@@ -43,11 +45,11 @@ interface ParaJwtPayload {
 
 export type AuthResult =
   | { success: true; user: User }
-  | { success: false; error: NextResponse }
+  | { success: false; error: NextResponse };
 
 export type AuthResultWithHeaders =
   | { success: true; user: User }
-  | { success: false; error: string }
+  | { success: false; error: string };
 
 // Core verification logic that works with any headers-like object
 async function verifyAuthCore(
@@ -58,26 +60,27 @@ async function verifyAuthCore(
   if (!supabaseUrl || !supabaseAnonKey) {
     return {
       success: false,
-      error: 'Supabase configuration missing'
-    }
+      error: 'Supabase configuration missing',
+    };
   }
 
-  const supabase = createClient(supabaseUrl, supabaseAnonKey)
+  const supabase = createClient(supabaseUrl, supabaseAnonKey);
 
   if (!authHeader || !authHeader.startsWith('Bearer ')) {
     return {
       success: false,
-      error: 'Authorization header required'
-    }
+      error: 'Authorization header required',
+    };
   }
 
-  const token = authHeader.replace('Bearer ', '')
+  const token = authHeader.replace('Bearer ', '');
 
   if (authMethod === 'para') {
     // Verify as Para JWT
     try {
       // Get JWKS URL based on environment
-      const env = (process.env.PARA_ENVIRONMENT || 'prod') as keyof typeof PARA_JWKS_URLS;
+      const env = (process.env.PARA_ENVIRONMENT ||
+        'prod') as keyof typeof PARA_JWKS_URLS;
       const jwksUrl = PARA_JWKS_URLS[env];
       const JWKS = createRemoteJWKSet(new URL(jwksUrl));
 
@@ -87,7 +90,8 @@ async function verifyAuthCore(
       });
 
       // If Para JWT verification succeeds, create a mock user object
-      const email = payload.data.email || `${payload.data.userId}@para-fallback.com`;
+      const email =
+        payload.data.email || `${payload.data.userId}@para-fallback.com`;
       const paraUser: User = {
         id: payload.data.userId,
         email,
@@ -107,60 +111,69 @@ async function verifyAuthCore(
 
       return {
         success: true,
-        user: paraUser
+        user: paraUser,
       };
     } catch (paraError) {
       console.log('Para JWT verification failed:', paraError);
       return {
         success: false,
-        error: 'Invalid or expired Para JWT token'
-      }
+        error: 'Invalid or expired Para JWT token',
+      };
     }
   } else {
     // Verify as Supabase JWT
-    const { data: { user }, error: authError } = await supabase.auth.getUser(token)
+    const {
+      data: { user },
+      error: authError,
+    } = await supabase.auth.getUser(token);
 
     if (authError || !user) {
       return {
         success: false,
-        error: 'Invalid or expired Supabase token'
-      }
+        error: 'Invalid or expired Supabase token',
+      };
     }
 
     console.log('Supabase user:', user);
 
     return {
       success: true,
-      user
-    }
+      user,
+    };
   }
 }
 
 // For use with NextRequest (API routes, middleware)
 export async function verifyAuth(request: NextRequest): Promise<AuthResult> {
-  const authHeader = request.headers.get('authorization')
-  const authMethod = request.headers.get('x-auth-method')
+  const authHeader = request.headers.get('authorization');
+  const authMethod = request.headers.get('x-auth-method');
 
-  const result = await verifyAuthCore(authHeader, authMethod)
+  const result = await verifyAuthCore(authHeader, authMethod);
 
   if (!result.success) {
     return {
       success: false,
-      error: NextResponse.json({ error: result.error }, {
-        status: result.error.includes('configuration') ? 500 : 401
-      })
-    }
+      error: NextResponse.json(
+        { error: result.error },
+        {
+          status: result.error.includes('configuration') ? 500 : 401,
+        }
+      ),
+    };
   }
 
-  return result
+  return result;
 }
 
 // For use with Headers from Server Components (layouts, pages)
 export async function verifyAuthWithHeaders(
   headers: Headers
 ): Promise<AuthResultWithHeaders> {
-  const authHeader = headers.get('authorization')
-  const authMethod = headers.get('x-auth-method')
+  const authHeader = headers.get('authorization');
+  const authMethod = headers.get('x-auth-method');
+
+  console.log(authHeader, 'authHeader');
+  console.log(authMethod, 'authMethod');
 
-  return verifyAuthCore(authHeader, authMethod)
+  return verifyAuthCore(authHeader, authMethod);
 }

devconnect-app/src/app/layout.tsx

@@ -7,8 +7,9 @@ import { Toaster } from 'sonner';
 import { WalletsProviders } from '@/context/WalletProviders';
 import PWAProvider from '@/components/PWAProvider';
 import { GlobalStoreProvider } from '@/app/store.provider';
-import { verifyAuthWithHeaders } from '@/app/api/auth/middleware';
 import { getAtprotoEvents } from '@/utils/atproto-events';
+import { unstable_cache } from 'next/cache';
+import { verifyAuthWithHeaders } from '@/app/api/auth/middleware';
 import { headers } from 'next/headers';
 import { ensureUser } from '@/app/api/auth/user-data/ensure-user';
 
@@ -90,6 +91,8 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
+export const revalidate = 300; // 5 minutes
+
 export default async function RootLayout({
   children,
 }: Readonly<{
@@ -104,24 +107,39 @@ export default async function RootLayout({
   // Check if Supabase is configured
   // const hasSupabase = !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
-  const headersList = await headers();
-  const authResult = await verifyAuthWithHeaders(headersList as Headers);
-  let userData = null;
-  if (authResult.success) {
-    userData = await ensureUser(authResult.user?.email || '');
-  }
-  const atprotoEvents = await getAtprotoEvents();
+  // This does not work on the server side because the relevant headers are not available
+  // We could use cookies instead so its autoincluded?
+  // const headersList = await headers();
+  // const authResult = await verifyAuthWithHeaders(headersList as Headers);
+
+  // let userData = null;
+
+  // if (authResult.success) {
+  //   userData = await ensureUser(authResult.user?.email || '');
+  // }
+
+  // Cache the atproto events for 5 minutes - wrapped in unstable_cache to avoid re-fetching the events on every request
+  const atprotoEvents = await unstable_cache(
+    getAtprotoEvents,
+    ['atproto-events'],
+    {
+      revalidate: 300,
+    }
+  )();
+
+  // console.log(atprotoEvents, 'atprotoEvents');
+  // console.log(userData, 'userData');
 
   return (
     <html lang="en">
       <head>
         {/* Progressive Web App */}
-        <link
+        {/* <link
           rel="manifest"
           href="/manifest.json"
           crossOrigin="use-credentials"
-        />
-        <link rel="apple-touch-icon" href="/app-icon.png" />
+        /> */}
+        {/* <link rel="apple-touch-icon" href="/app-icon.png" /> */}
 
         {/* Meta tags now handled by generateMetadata function above */}
         {/*
@@ -177,7 +195,7 @@ export default async function RootLayout({
       >
         <PWAProvider>
           <WalletsProviders>
-            <GlobalStoreProvider events={atprotoEvents} userData={userData}>
+            <GlobalStoreProvider events={atprotoEvents} /*userData={userData}*/>
               {children}
             </GlobalStoreProvider>
             <NewDeployment />

devconnect-app/src/app/page.tsx

@@ -24,7 +24,7 @@ export default function HomePageContent() {
 
   return (
     <PageLayout title="Ethereum World's Fair" tabs={homeTabs()}>
-      <div className="bg-[rgba(246,250,254,1)] grow">
+      <div className="bg-[rgba(246,250,254,1)] grow pb-8">
         <LoopingHeader />
         <WelcomeSection />
         <TodaysSchedule />

devconnect-app/src/app/store.hooks.ts

@@ -13,8 +13,6 @@ export const useFavorites = () => {
   const userData = useGlobalStore(useShallow((state) => state.userData));
   const favorites =
     useGlobalStore((state) => {
-      console.log('SELECTOR RUNNING, state:', state);
-
       return state.userData?.favorite_events;
     }) || [];
   const setFavoriteEvents = useGlobalStore((state) => state.setFavoriteEvents);
@@ -79,6 +77,7 @@ export const useEnsureUserData = (isConnected: boolean) => {
 
   useEffect(() => {
     if (isConnected) {
+      console.log('ensuring user data');
       ensureUserData(setUserData);
     } else {
       setUserData(null);

devconnect-app/src/app/store.provider.tsx

@@ -9,7 +9,6 @@ import {
   createRef,
 } from 'react';
 import { useStore } from 'zustand';
-
 import { useWalletManager } from '@/hooks/useWalletManager';
 
 import {
@@ -18,6 +17,7 @@ import {
   createGlobalStore,
   initGlobalStore,
 } from '@/app/store';
+// import { ensureUserData } from './store.hooks';
 
 export const GlobalStoreContext = createContext<AppStore | undefined>(
   undefined
@@ -26,40 +26,40 @@ export const GlobalStoreContext = createContext<AppStore | undefined>(
 export interface GlobalStoreProviderProps {
   children: ReactNode;
   events: AppState['events'];
-  userData: AppState['userData'];
+  userData?: AppState['userData'];
 }
 
-const WalletProvider = ({ children }: { children: ReactNode }) => {
+const AuthProvider = ({ children }: { children: ReactNode }) => {
   useWalletManager();
 
   return children;
 };
 
-// const storeRef = createRef<AppStore | null>();
-
 export const GlobalStoreProvider = ({
   events,
   userData,
   children,
 }: GlobalStoreProviderProps) => {
+  // useWalletManager();
   const storeRef = useRef<AppStore | null>(null);
 
   if (storeRef.current === null) {
-    console.log('creating store');
     storeRef.current = createGlobalStore(initGlobalStore(events, userData));
-  } else {
-    console.log('store already created');
   }
 
-  useStore(storeRef.current, (state) => console.log('STATE', state));
+  // useEffect(() => {
+  //   if (!storeRef.current) return;
 
-  useEffect(() => {
-    console.log('MOUNTED THE PROVIDER, SHOULD RUN JUST ONCE');
-  }, []);
+  //   if (email) {
+  //     ensureUserData(storeRef.current?.getState().setUserData);
+  //   } else {
+  //     storeRef.current?.getState().setUserData(null);
+  //   }
+  // }, [email]);
 
   return (
     <GlobalStoreContext.Provider value={storeRef.current}>
-      <WalletProvider>{children}</WalletProvider>
+      <AuthProvider>{children}</AuthProvider>
     </GlobalStoreContext.Provider>
   );
 };

devconnect-app/src/app/store.ts

@@ -3,6 +3,7 @@
 import { createStore } from 'zustand';
 
 export interface AppState {
+  initializing: boolean;
   // User data from supabase (so basically data attached to the logged in email)
   userData: {
     additional_ticket_emails?: string[];
@@ -23,6 +24,7 @@ export const initGlobalStore = (
 ): Omit<AppState, 'setUserData' | 'setFavoriteEvents' | 'logout'> => ({
   events: events,
   userData: userData || null,
+  initializing: true,
 });
 
 export const createGlobalStore = (