put nexgraph auth and data access behind a url based feature flag

src/App.tsx

@@ -3,7 +3,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { OnboardingProvider } from '@/contexts/OnboardingContext';
 import { BrowserNGLdoProvider, useNextGraphAuth } from '@/lib/nextgraph';
-import type { NextGraphAuth } from '@/types/nextgraph';
 import DashboardLayout from '@/components/layout/DashboardLayout';
 import SocialContractPage from '@/pages/SocialContractPage';
 import GroupJoinPage from '@/pages/GroupJoinPage';
@@ -22,10 +21,11 @@ import AccountPage from '@/pages/AccountPage';
 import NotificationsPage from '@/pages/NotificationsPage';
 import { createAppTheme } from '@/theme/theme';
 import { Container, Box, Typography, Button } from '@mui/material';
+import { isNextGraphEnabled } from '@/utils/featureFlags';
 
 const theme = createAppTheme('light');
 
-const AppContent = () => {
+const NextGraphAppContent = () => {
   const nextGraphAuth = useNextGraphAuth();
   const { session, login, logout } = nextGraphAuth || {};
   
@@ -86,37 +86,53 @@ const AppContent = () => {
     );
   }
 
-  return (
+  return <AppRoutes />;
-    <OnboardingProvider>
+};
-      <Router>
+
-        <Routes>
+const MockAppContent = () => {
-          <Route path="/onboarding" element={<SocialContractPage />} />
+  return <AppRoutes />;
-          <Route path="/join-group" element={<GroupJoinPage />} />
+};
-          
+
-          <Route path="/*" element={
+const AppRoutes = () => (
-            <DashboardLayout>
+  <OnboardingProvider>
-              <Routes>
+    <Router>
-                <Route path="/" element={<FeedPage />} />
+      <Routes>
-                <Route path="/feed" element={<FeedPage />} />
+        <Route path="/onboarding" element={<SocialContractPage />} />
-                <Route path="/import" element={<ImportPage />} />
+        <Route path="/join-group" element={<GroupJoinPage />} />
-                <Route path="/contacts" element={<ContactListPage />} />
+        
-                <Route path="/contacts/:id" element={<ContactViewPage />} />
+        <Route path="/*" element={
-                <Route path="/groups" element={<GroupPage />} />
+          <DashboardLayout>
-                <Route path="/groups/:groupId" element={<GroupDetailPage />} />
+            <Routes>
-                <Route path="/groups/:groupId/info" element={<GroupInfoPage />} />
+              <Route path="/" element={<FeedPage />} />
-                <Route path="/posts" element={<PostsOffersPage />} />
+              <Route path="/feed" element={<FeedPage />} />
-                <Route path="/messages" element={<MessagesPage />} />
+              <Route path="/import" element={<ImportPage />} />
-                <Route path="/notifications" element={<NotificationsPage />} />
+              <Route path="/contacts" element={<ContactListPage />} />
-                <Route path="/account" element={<AccountPage />} />
+              <Route path="/contacts/:id" element={<ContactViewPage />} />
-                <Route path="/invite" element={<InvitationPage />} />
+              <Route path="/groups" element={<GroupPage />} />
-                <Route path="/onboarding/setup" element={<OnboardingPage />} />
+              <Route path="/groups/:groupId" element={<GroupDetailPage />} />
-              </Routes>
+              <Route path="/groups/:groupId/info" element={<GroupInfoPage />} />
-            </DashboardLayout>
+              <Route path="/posts" element={<PostsOffersPage />} />
-          } />
+              <Route path="/messages" element={<MessagesPage />} />
-        </Routes>
+              <Route path="/notifications" element={<NotificationsPage />} />
-      </Router>
+              <Route path="/account" element={<AccountPage />} />
-    </OnboardingProvider>
+              <Route path="/invite" element={<InvitationPage />} />
-  );
+              <Route path="/onboarding/setup" element={<OnboardingPage />} />
+            </Routes>
+          </DashboardLayout>
+        } />
+      </Routes>
+    </Router>
+  </OnboardingProvider>
+);
+
+const AppContent = () => {
+  const useNextGraph = isNextGraphEnabled();
+  
+  if (useNextGraph) {
+    return <NextGraphAppContent />;
+  }
+  
+  return <MockAppContent />;
 };
 
 function App() {
@@ -124,9 +140,13 @@ function App() {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Container maxWidth="lg">
-        <BrowserNGLdoProvider>
+        {isNextGraphEnabled() ? (
+          <BrowserNGLdoProvider>
+            <AppContent />
+          </BrowserNGLdoProvider>
+        ) : (
           <AppContent />
-        </BrowserNGLdoProvider>
+        )}
       </Container>
     </ThemeProvider>
   );

src/components/layout/DashboardLayout.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useNextGraphAuth } from '@/lib/nextgraph';
 import {
   Box,
   Drawer,

src/pages/AccountPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNextGraphAuth } from '@/lib/nextgraph';
+import { isNextGraphEnabled } from '@/utils/featureFlags';
 import {
   Typography,
   Box,
@@ -61,6 +62,7 @@ const AccountPage = () => {
   const theme = useTheme();
   const [searchParams] = useSearchParams();
   const nextGraphAuth = useNextGraphAuth();
+  const useNextGraph = isNextGraphEnabled();
   
   // Initialize tab from URL parameter
   const initialTab = parseInt(searchParams.get('tab') || '0', 10);
@@ -596,38 +598,40 @@ const AccountPage = () => {
         </TabPanel>
       </Box>
 
-      {/* Logout Button - Always visible at bottom */}
+      {/* Logout Button - Only show in NextGraph mode */}
-      <Box sx={{ mt: 3, mb: 2, textAlign: 'center' }}>
+      {useNextGraph && (
-        <Button
+        <Box sx={{ mt: 3, mb: 2, textAlign: 'center' }}>
-          variant="outlined"
+          <Button
-          startIcon={<Logout />}
+            variant="outlined"
-          onClick={async () => {
+            startIcon={<Logout />}
-            try {
+            onClick={async () => {
-              console.log('NextGraph Auth object:', nextGraphAuth);
+              try {
-              console.log('Available methods:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'none');
+                console.log('NextGraph Auth object:', nextGraphAuth);
-              
+                console.log('Available methods:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'none');
-              if (nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
+                
-                console.log('Calling logout...');
+                if (useNextGraph && nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
-                await nextGraphAuth.logout();
+                  console.log('Calling logout...');
-              } else {
+                  await nextGraphAuth.logout();
-                console.log('Logout function not available or not a function');
+                } else {
+                  console.log('Logout function not available or not a function');
+                }
+              } catch (error) {
+                console.error('Logout failed:', error);
               }
-            } catch (error) {
+            }}
-              console.error('Logout failed:', error);
+            sx={{ 
-            }
+              color: 'error.main',
-          }}
+              borderColor: 'error.main',
-          sx={{ 
+              '&:hover': {
-            color: 'error.main',
+                borderColor: 'error.dark',
-            borderColor: 'error.main',
+                backgroundColor: 'error.light'
-            '&:hover': {
+              }
-              borderColor: 'error.dark',
+            }}
-              backgroundColor: 'error.light'
+          >
-            }
+            Logout
-          }}
+          </Button>
-        >
+        </Box>
-          Logout
+      )}
-        </Button>
-      </Box>
 
       {/* rCard Management Dialog */}
       <RCardManagement

src/utils/featureFlags.ts

@@ -0,0 +1,11 @@
+export const getFeatureFlags = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  
+  return {
+    useNextGraph: urlParams.get('nextgraph') === 'true'
+  };
+};
+
+export const isNextGraphEnabled = (): boolean => {
+  return getFeatureFlags().useNextGraph;
+};

test-feature-flag.md

@@ -0,0 +1,19 @@
+# Feature Flag Testing
+
+## Default Mode (Mock Data)
+- URL: `http://localhost:5173/`
+- Expected: App loads directly without NextGraph login
+- Features: Uses mock JSON data from `/public/contacts.json`
+- No logout button shown in Account page
+
+## NextGraph Mode  
+- URL: `http://localhost:5173/?nextgraph=true`
+- Expected: Shows NextGraph login screen initially
+- Features: Uses LDO and NextGraph auth system
+- Logout button shown in Account page
+
+## Implementation Details
+- Feature flag detected via URL parameter `nextgraph=true`
+- Utility: `/src/utils/featureFlags.ts`
+- Main conditional logic in `/src/App.tsx`
+- Account page conditionally shows logout in NextGraph mode only