diff --git a/apps/react-vite/package.json b/apps/react-vite/package.json index e25894d1..c2a4bf48 100644 --- a/apps/react-vite/package.json +++ b/apps/react-vite/package.json @@ -42,7 +42,7 @@ "react-error-boundary": "^4.0.13", "react-helmet-async": "^2.0.4", "react-hook-form": "^7.51.3", - "react-query-auth": "^2.3.0", + "react-query-auth": "^2.4.3", "react-router": "^7.0.2", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", diff --git a/apps/react-vite/src/app/provider.tsx b/apps/react-vite/src/app/provider.tsx index 717330ab..d2161b59 100644 --- a/apps/react-vite/src/app/provider.tsx +++ b/apps/react-vite/src/app/provider.tsx @@ -35,7 +35,15 @@ export const AppProvider = ({ children }: AppProviderProps) => { {import.meta.env.DEV && } - {children} + ( +
+ +
+ )} + > + {children} +
diff --git a/apps/react-vite/src/components/layouts/dashboard-layout.tsx b/apps/react-vite/src/components/layouts/dashboard-layout.tsx index a7bb976f..51823918 100644 --- a/apps/react-vite/src/components/layouts/dashboard-layout.tsx +++ b/apps/react-vite/src/components/layouts/dashboard-layout.tsx @@ -189,7 +189,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) { logout.mutate()} + onClick={() => logout.mutate({})} > Sign Out diff --git a/apps/react-vite/src/lib/auth.tsx b/apps/react-vite/src/lib/auth.tsx index 5bb7379b..15379814 100644 --- a/apps/react-vite/src/lib/auth.tsx +++ b/apps/react-vite/src/lib/auth.tsx @@ -1,13 +1,7 @@ -import { - queryOptions, - useMutation, - useQuery, - useQueryClient, -} from '@tanstack/react-query'; +import { configureAuth } from 'react-query-auth'; import { Navigate, useLocation } from 'react-router'; import { z } from 'zod'; -import { Spinner } from '@/components/ui/spinner'; import { paths } from '@/config/paths'; import { AuthResponse, User } from '@/types/api'; @@ -16,56 +10,12 @@ import { api } from './api-client'; // api call definitions for auth (types, schemas, requests): // these are not part of features as this is a module shared across features -export const getUser = async (): Promise => { - const response = (await api.get('/auth/me')) as { data: User }; +const getUser = async (): Promise => { + const response = await api.get('/auth/me'); return response.data; }; -const userQueryKey = ['user']; - -export const getUserQueryOptions = () => { - return queryOptions({ - queryKey: userQueryKey, - queryFn: getUser, - }); -}; - -export const useUser = () => useQuery(getUserQueryOptions()); - -export const useLogin = ({ onSuccess }: { onSuccess?: () => void } = {}) => { - const queryClient = useQueryClient(); - return useMutation({ - mutationFn: loginWithEmailAndPassword, - onSuccess: (data) => { - queryClient.setQueryData(userQueryKey, data.user); - onSuccess?.(); - }, - }); -}; - -export const useRegister = ({ onSuccess }: { onSuccess?: () => void } = {}) => { - const queryClient = useQueryClient(); - return useMutation({ - mutationFn: registerWithEmailAndPassword, - onSuccess: (data) => { - queryClient.setQueryData(userQueryKey, data.user); - onSuccess?.(); - }, - }); -}; - -export const useLogout = ({ onSuccess }: { onSuccess?: () => void } = {}) => { - const queryClient = useQueryClient(); - return useMutation({ - mutationFn: logout, - onSuccess: () => { - queryClient.removeQueries({ queryKey: userQueryKey }); - onSuccess?.(); - }, - }); -}; - const logout = (): Promise => { return api.post('/auth/logout'); }; @@ -109,6 +59,22 @@ const registerWithEmailAndPassword = ( return api.post('/auth/register', data); }; +const authConfig = { + userFn: getUser, + loginFn: async (data: LoginInput) => { + const response = await loginWithEmailAndPassword(data); + return response.user; + }, + registerFn: async (data: RegisterInput) => { + const response = await registerWithEmailAndPassword(data); + return response.user; + }, + logoutFn: logout, +}; + +export const { useUser, useLogin, useLogout, useRegister, AuthLoader } = + configureAuth(authConfig); + export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { const user = useUser(); const location = useLocation(); @@ -121,16 +87,3 @@ export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { return children; }; - -export const AuthLoader = ({ children }: { children: React.ReactNode }) => { - const user = useUser(); - if (!user.isFetched) { - return ( -
- -
- ); - } - - return children; -}; diff --git a/apps/react-vite/yarn.lock b/apps/react-vite/yarn.lock index 865e5e2b..f673c893 100644 --- a/apps/react-vite/yarn.lock +++ b/apps/react-vite/yarn.lock @@ -8738,10 +8738,10 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react-query-auth@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/react-query-auth/-/react-query-auth-2.3.0.tgz#2c03e4cd3c75a01bde0cfa97168b857906315449" - integrity sha512-42IvqDxnQMOCdPmf+H8hMscO+1EgDPMuNnJrYEJwe8Itsd2z96obtlm85PvBk8BgvOQrKGEGx1VDsAIzk6y7yw== +react-query-auth@^2.4.3: + version "2.4.3" + resolved "https://registry.yarnpkg.com/react-query-auth/-/react-query-auth-2.4.3.tgz#63d0faf866a5844b18c89257f9c17121ac3b682c" + integrity sha512-sSDX4OZSyBTvTOItiWEH/SsTfKg7AEAc7qOL1qsxx+vIx5s82VeUyj4W1vNlHY9nFeU1accm1hRW1FVF2TzaiA== react-refresh@^0.14.0: version "0.14.2"