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,7 +86,14 @@ const AppContent = () => {
     );
   }
 
-  return (
+  return <AppRoutes />;
+};
+
+const MockAppContent = () => {
+  return <AppRoutes />;
+};
+
+const AppRoutes = () => (
   <OnboardingProvider>
     <Router>
       <Routes>
@@ -117,6 +124,15 @@ const AppContent = () => {
     </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">
+        {isNextGraphEnabled() ? (
           <BrowserNGLdoProvider>
             <AppContent />
           </BrowserNGLdoProvider>
+        ) : (
+          <AppContent />
+        )}
       </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,7 +598,8 @@ const AccountPage = () => {
         </TabPanel>
       </Box>
 
-      {/* Logout Button - Always visible at bottom */}
+      {/* Logout Button - Only show in NextGraph mode */}
+      {useNextGraph && (
         <Box sx={{ mt: 3, mb: 2, textAlign: 'center' }}>
           <Button
             variant="outlined"
@@ -606,7 +609,7 @@ const AccountPage = () => {
                 console.log('NextGraph Auth object:', nextGraphAuth);
                 console.log('Available methods:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'none');
                 
-              if (nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
+                if (useNextGraph && nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
                   console.log('Calling logout...');
                   await nextGraphAuth.logout();
                 } else {
@@ -628,6 +631,7 @@ const AccountPage = () => {
             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