Poc for completing logout loop.

Author: Chriztiaan

demos/react-supabase-todolist-optional-sync/src/app/views/layout.tsx

@@ -24,7 +24,7 @@ import {
 import React from 'react';
 import { usePowerSync, useStatus } from '@powersync/react';
 import { useNavigate } from 'react-router-dom';
-import { useSupabase } from '@/components/providers/SystemProvider';
+import { useReset, useSupabase } from '@/components/providers/SystemProvider';
 import { useNavigationPanel } from '@/components/navigation/NavigationPanelContext';
 import { DEFAULT_ENTRY_ROUTE, LOGIN_ROUTE, SQL_CONSOLE_ROUTE, TODO_LISTS_ROUTE } from '@/app/router';
 import { setSyncEnabled } from '@/library/powersync/SyncMode';
@@ -35,6 +35,7 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
   const status = useStatus();
   const supabase = useSupabase();
   const navigate = useNavigate();
+  const reset = useReset();
   const [authText, setAuthText] = React.useState(supabase?.currentSession ? 'Sign Out' : 'Sign In');
 
   const [openDrawer, setOpenDrawer] = React.useState(false);
@@ -63,6 +64,8 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
             setSyncEnabled(powerSync.database.name, false);
 
             await switchToLocalSchema(powerSync);
+
+            reset?.();
             navigate(DEFAULT_ENTRY_ROUTE);
             return true;
           }

demos/react-supabase-todolist-optional-sync/src/components/providers/SystemProvider.tsx

@@ -4,13 +4,16 @@ import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
 import { PowerSyncDatabase } from '@powersync/web';
 import Logger from 'js-logger';
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 import { getSyncEnabled } from '@/library/powersync/SyncMode';
 
 const SupabaseContext = React.createContext<SupabaseConnector | null>(null);
 export const useSupabase = () => React.useContext(SupabaseContext);
 
+const ResetContext = React.createContext<(() => void) | null>(null);
+export const useReset = () => React.useContext(ResetContext);
+
 const dbName = 'example.db';
 const syncEnabled = getSyncEnabled(dbName);
 
@@ -23,7 +26,7 @@ const db = new PowerSyncDatabase({
 
 export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
   const [connector] = React.useState(new SupabaseConnector());
-  const [powerSync] = React.useState(db);
+  const [powerSync, setPowersync] = React.useState(db);
 
   React.useEffect(() => {
     // Linting thinks this is a hook due to it's name
@@ -53,11 +56,16 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <Suspense fallback={<CircularProgress />}>
-      <PowerSyncContext.Provider value={powerSync}>
-        <SupabaseContext.Provider value={connector}>
-          <NavigationPanelContextProvider>{children}</NavigationPanelContextProvider>
-        </SupabaseContext.Provider>
-      </PowerSyncContext.Provider>
+      <ResetContext.Provider
+        value={() => {
+          setPowersync(new PowerSyncDatabase({ schema: makeSchema(syncEnabled), database: { dbFilename: dbName } }));
+        }}>
+        <PowerSyncContext.Provider value={powerSync}>
+          <SupabaseContext.Provider value={connector}>
+            <NavigationPanelContextProvider>{children}</NavigationPanelContextProvider>
+          </SupabaseContext.Provider>
+        </PowerSyncContext.Provider>
+      </ResetContext.Provider>
     </Suspense>
   );
 };