Fixed React Query provider. Removed getSession and replaced with getUser to make Supabase happy. Fixed Stepper's responsiveness.

packages/supabase/src/hooks/use-auth-change-listener.ts

@@ -7,7 +7,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
-import { useRevalidateUserSession, useUserSession } from './use-user-session';
+import { useRevalidateUserSession } from './use-user-session';
 
 /**
  * @name PRIVATE_PATH_PREFIXES
@@ -31,9 +31,7 @@ export function useAuthChangeListener({
   const pathName = usePathname();
   const router = useRouter();
   const revalidateUserSession = useRevalidateUserSession();
-  const session = useUserSession();
   const queryClient = useQueryClient();
-  const accessToken = session.data?.access_token;
 
   useEffect(() => {
     // keep this running for the whole session unless the component was unmounted
@@ -56,15 +54,6 @@ export function useAuthChangeListener({
 
         return router.refresh();
       }
-
-      // revalidate user session when access token is out of sync
-      if (accessToken) {
-        const isOutOfSync = user?.access_token !== accessToken;
-
-        if (isOutOfSync) {
-          void router.refresh();
-        }
-      }
     });
 
     // destroy listener on un-mounts
@@ -72,7 +61,6 @@ export function useAuthChangeListener({
   }, [
     client.auth,
     router,
-    accessToken,
     revalidateUserSession,
     pathName,
     appHomePath,

packages/ui/src/makerkit/stepper.tsx

@@ -155,7 +155,7 @@ function StepDivider({
   complete: boolean;
 }>) {
   const spanClassName = cn('font-medium text-sm min-w-max', {
-    ['text-muted-foreground']: !selected,
+    ['text-muted-foreground hidden sm:flex']: !selected,
     ['text-secondary-foreground']: selected || complete,
     ['font-medium']: selected,
   });
@@ -172,7 +172,7 @@ function StepDivider({
       <div
         className={
           'divider h-[1px] w-full bg-gray-200 transition-colors' +
-          ' group-last:hidden dark:bg-border'
+          ' hidden group-last:hidden dark:bg-border sm:flex'
         }
       />
     </div>