Improved cache invalidation, and minor design fixes

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -69,7 +69,7 @@ export function PersonalAccountDropdown({
     const phone = user?.phone ?? undefined;
 
     return email ?? phone;
-  }, [user?.email, user?.phone]);
+  }, [user]);
 
   const displayName =
     personalAccountData?.name ?? account?.name ?? user?.email ?? '';

packages/features/admin/src/components/admin-impersonate-user-dialog.tsx

@@ -140,6 +140,7 @@ function useSetSession(tokens: { accessToken: string; refreshToken: string }) {
 
   return useQuery({
     queryKey: ['impersonate-user', tokens.accessToken, tokens.refreshToken],
+    gcTime: 0,
     queryFn: async () => {
       await supabase.auth.setSession({
         refresh_token: tokens.refreshToken,

packages/supabase/package.json

@@ -33,6 +33,7 @@
     "@types/react": "^18.3.3",
     "next": "14.2.3",
     "react": "18.3.1",
+    "server-only": "^0.0.1",
     "zod": "^3.23.8"
   },
   "eslintConfig": {

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

@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 
 import { usePathname, useRouter } from 'next/navigation';
 
+import { useQueryClient } from '@tanstack/react-query';
+
 import { useSupabase } from './use-supabase';
 import { useRevalidateUserSession, useUserSession } from './use-user-session';
 
@@ -30,11 +32,12 @@ export function useAuthChangeListener({
   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
-    const listener = client.auth.onAuthStateChange((event, user) => {
+    const listener = client.auth.onAuthStateChange(async (event, user) => {
       // log user out if user is falsy
       // and if the current path is a private route
       const shouldRedirectUser =
@@ -47,10 +50,14 @@ export function useAuthChangeListener({
         return;
       }
 
+      // revalidate user session when user signs in or out
       if (event === 'SIGNED_OUT') {
+        await queryClient.invalidateQueries();
+
         return router.refresh();
       }
 
+      // revalidate user session when access token is out of sync
       if (accessToken) {
         const isOutOfSync = user?.access_token !== accessToken;
 
@@ -70,6 +77,7 @@ export function useAuthChangeListener({
     pathName,
     appHomePath,
     privatePathPrefixes,
+    queryClient,
   ]);
 }
 

packages/supabase/src/hooks/use-sign-out.ts

@@ -1,13 +1,15 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
 
 export function useSignOut() {
   const client = useSupabase();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async () => {
       await client.auth.signOut();
+      await queryClient.invalidateQueries();
     },
   });
 }

packages/supabase/src/hooks/use-user.ts

@@ -24,14 +24,10 @@ export function useUser(initialData?: User | null) {
     return Promise.reject('Unexpected result format');
   };
 
-  // update staleTime to 5 minutes
-  const staleTime = 1000 * 60 * 5;
-
   return useQuery({
     queryFn,
     queryKey,
     initialData,
-    staleTime,
     refetchInterval: false,
     refetchOnMount: false,
     refetchOnWindowFocus: false,

packages/ui/src/makerkit/stepper.tsx

@@ -92,7 +92,7 @@ function getClassNameBuilder() {
       },
       selected: {
         true: '',
-        false: '',
+        false: 'hidden sm:flex',
       },
       complete: {
         true: '',