Fix login and redirects in Sync Diagnostics Client (#856)

Author: bean1352

.changeset/thirty-goats-shop.md

@@ -0,0 +1,5 @@
+---
+'@powersync/diagnostics-app': minor
+---
+
+Fixed redirect for removed /login route to go to home page. Fixed token query parameter deep-link and stale credential display after re-login.

tools/diagnostics-app/src/app/views/sync-diagnostics.tsx

@@ -117,7 +117,8 @@ export default function SyncDiagnosticsPage() {
         tokenPayload: decodeTokenPayload(credentials.token)
       };
     },
-    staleTime: Infinity
+    staleTime: 0,
+    refetchOnMount: 'always'
   });
 
   const { data: stats, isLoading } = useTanstackQuery({

tools/diagnostics-app/src/library/powersync/ConnectionManager.ts

@@ -145,13 +145,6 @@ export async function connect() {
   notifySyncChange();
   await sync.connect({ params, clientImplementation: client });
   await schemaManager.refreshSchemaNow(db);
-  if (!sync.syncStatus.connected) {
-    const error = sync.syncStatus.dataFlowStatus.downloadError ?? new Error('Failed to connect');
-    lastConnectionError = error;
-    notifySyncChange();
-    await sync.disconnect();
-    throw error;
-  }
 }
 
 export async function clearData() {

tools/diagnostics-app/src/routes/__root.tsx

@@ -1,9 +1,10 @@
-import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { createRootRoute, Outlet, Navigate } from '@tanstack/react-router';
 import { SystemProvider } from '@/components/providers/SystemProvider';
 import { ThemeProviderContainer } from '@/components/providers/ThemeProviderContainer';
 
 export const Route = createRootRoute({
-  component: RootComponent
+  component: RootComponent,
+  notFoundComponent: () => <Navigate to="/" />
 });
 
 function RootComponent() {

tools/diagnostics-app/src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
-import { connector } from '@/library/powersync/ConnectionManager';
+import { connector, connect } from '@/library/powersync/ConnectionManager';
+import { localStateDb } from '@/library/powersync/LocalStateManager';
 import { getTokenEndpoint } from '@/library/powersync/TokenConnector';
 import { z } from 'zod';
 import { Formik, FormikErrors } from 'formik';
@@ -30,7 +31,9 @@ export const Route = createFileRoute('/')({
         throw new Error('endpoint is required');
       }
 
-      await connector.signIn({ token: search.token, endpoint });
+      await localStateDb.init();
+      await connector.saveCredentials({ token: search.token, endpoint });
+      await connect();
 
       throw redirect({ to: '/sync-diagnostics' });
     }
@@ -86,7 +89,8 @@ function LandingPage() {
                   if (endpoint == null) {
                     throw new Error('endpoint is required');
                   }
-                  await connector.signIn({ token: values.token, endpoint });
+                  await connector.saveCredentials({ token: values.token, endpoint });
+                  await connect();
                   navigate({ to: '/sync-diagnostics' });
                 } catch (ex: any) {
                   console.error(ex);