Refactor sign out and auth change listener hooks

In the use-sign-out.ts file, the use of query client has been removed and error handling has been improved during sign-out operations. Meanwhile, in the use-auth-change-listener.ts file, an unnecessary usage of query client and router has been removed. Event handling logic has also been simplified by using window.location.reload() instead of router.refresh() on user sign-out.
This commit is contained in:
giancarlo
2024-06-04 19:38:51 +07:00
parent d203c9782d
commit 8808e37558
2 changed files with 7 additions and 22 deletions

View File

@@ -2,9 +2,7 @@
import { useEffect } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { usePathname } from 'next/navigation';
import { useSupabase } from './use-supabase';
@@ -28,12 +26,10 @@ export function useAuthChangeListener({
}) {
const client = useSupabase();
const pathName = usePathname();
const router = useRouter();
const queryClient = useQueryClient();
useEffect(() => {
// keep this running for the whole session unless the component was unmounted
const listener = client.auth.onAuthStateChange(async (event, user) => {
const listener = client.auth.onAuthStateChange((event, user) => {
// log user out if user is falsy
// and if the current path is a private route
const shouldRedirectUser =
@@ -48,22 +44,13 @@ export function useAuthChangeListener({
// revalidate user session when user signs in or out
if (event === 'SIGNED_OUT') {
await queryClient.invalidateQueries();
return router.refresh();
window.location.reload();
}
});
// destroy listener on un-mounts
return () => listener.data.subscription.unsubscribe();
}, [
client.auth,
router,
pathName,
appHomePath,
privatePathPrefixes,
queryClient,
]);
}, [client.auth, pathName, appHomePath, privatePathPrefixes]);
}
/**

View File

@@ -1,15 +1,13 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useMutation } 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();
mutationFn: () => {
return client.auth.signOut();
},
});
}