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:
@@ -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]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user