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

apps/web/app/(marketing)/layout.tsx

@@ -5,7 +5,11 @@ import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 async function SiteLayout(props: React.PropsWithChildren) {
-  const user = await getUser();
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
 
   return (
     <div className={'flex min-h-[100vh] flex-col'}>
@@ -19,18 +23,3 @@ async function SiteLayout(props: React.PropsWithChildren) {
 }
 
 export default withI18n(SiteLayout);
-
-async function getUser() {
-  const client = getSupabaseServerComponentClient();
-
-  // Supabase is going to be complaining about this line
-  // since we use getSession instead of getUser
-  // we don't quite care because we only need to know if the user is logged in
-  // to display the user menu in the header.
-  // There is no need to ping the server while navigating to marketing pages.
-  const {
-    data: { session },
-  } = await client.auth.getSession();
-
-  return session?.user;
-}

apps/web/components/react-query-provider.tsx

@@ -1,21 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-// set gcTime to 0 on the server
-// as we cannot invalidate the cache on the server
-const isServer = typeof document === 'undefined';
-const gcTime = isServer ? 0 : undefined;
-const staleTime = isServer ? 0 : 60 * 1000;
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      gcTime,
-      staleTime,
-    },
-  },
-});
-
 export function ReactQueryProvider(props: React.PropsWithChildren) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  );
+
   return (
     <QueryClientProvider client={queryClient}>
       {props.children}

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>