View: frontend/src/hooks/useAuth.ts — full-stack-fastapi-template

← full-stack-fastapi-template / frontend/src/hooks/useAuth.ts

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useNavigate } from "@tanstack/react-router"

import {
  type Body_login_login_access_token as AccessToken,
  LoginService,
  type UserPublic,
  type UserRegister,
  UsersService,
} from "@/client"
import { handleError } from "@/utils"
import useCustomToast from "./useCustomToast"

const isLoggedIn = () => {
  return localStorage.getItem("access_token") !== null
}

const useAuth = () => {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const { showErrorToast } = useCustomToast()

  const { data: user } = useQuery<UserPublic | null, Error>({
    queryKey: ["currentUser"],
    queryFn: UsersService.readUserMe,
    enabled: isLoggedIn(),
  })

  const signUpMutation = useMutation({
    mutationFn: (data: UserRegister) =>
      UsersService.registerUser({ requestBody: data }),
    onSuccess: () => {
      navigate({ to: "/login" })
    },
    onError: handleError.bind(showErrorToast),
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["users"] })
    },
  })

  const login = async (data: AccessToken) => {
    const response = await LoginService.loginAccessToken({
      formData: data,
    })
    localStorage.setItem("access_token", response.access_token)
  }

  const loginMutation = useMutation({
    mutationFn: login,
    onSuccess: () => {
      navigate({ to: "/" })
    },
    onError: handleError.bind(showErrorToast),
  })

  const logout = () => {
    localStorage.removeItem("access_token")
    navigate({ to: "/login" })
  }

  return {
    signUpMutation,
    loginMutation,
    logout,
    user,
  }
}

export { isLoggedIn }
export default useAuth


1	import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
2	import { useNavigate } from "@tanstack/react-router"
3
4	import {
5	type Body_login_login_access_token as AccessToken,
6	LoginService,
7	type UserPublic,
8	type UserRegister,
9	UsersService,
10	} from "@/client"
11	import { handleError } from "@/utils"
12	import useCustomToast from "./useCustomToast"
13
14	const isLoggedIn = () => {
15	return localStorage.getItem("access_token") !== null
16	}
17
18	const useAuth = () => {
19	const navigate = useNavigate()
20	const queryClient = useQueryClient()
21	const { showErrorToast } = useCustomToast()
22
23	const { data: user } = useQuery<UserPublic \| null, Error>({
24	queryKey: ["currentUser"],
25	queryFn: UsersService.readUserMe,
26	enabled: isLoggedIn(),
27	})
28
29	const signUpMutation = useMutation({
30	mutationFn: (data: UserRegister) =>
31	UsersService.registerUser({ requestBody: data }),
32	onSuccess: () => {
33	navigate({ to: "/login" })
34	},
35	onError: handleError.bind(showErrorToast),
36	onSettled: () => {
37	queryClient.invalidateQueries({ queryKey: ["users"] })
38	},
39	})
40
41	const login = async (data: AccessToken) => {
42	const response = await LoginService.loginAccessToken({
43	formData: data,
44	})
45	localStorage.setItem("access_token", response.access_token)
46	}
47
48	const loginMutation = useMutation({
49	mutationFn: login,
50	onSuccess: () => {
51	navigate({ to: "/" })
52	},
53	onError: handleError.bind(showErrorToast),
54	})
55
56	const logout = () => {
57	localStorage.removeItem("access_token")
58	navigate({ to: "/login" })
59	}
60
61	return {
62	signUpMutation,
63	loginMutation,
64	logout,
65	user,
66	}
67	}
68
69	export { isLoggedIn }
70	export default useAuth
71