✨ Add Sign Up and make OPEN_USER_REGISTRATION=True by default (#1265)

frontend/src/hooks/useAuth.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { useState } from "react"
 
@@ -8,8 +8,10 @@ import {
   type ApiError,
   LoginService,
   type UserPublic,
+  type UserRegister,
   UsersService,
 } from "../client"
+import useCustomToast from "./useCustomToast"
 
 const isLoggedIn = () => {
   return localStorage.getItem("access_token") !== null
@@ -18,12 +20,36 @@ const isLoggedIn = () => {
 const useAuth = () => {
   const [error, setError] = useState<string | null>(null)
   const navigate = useNavigate()
+  const showToast = useCustomToast()
+  const queryClient = useQueryClient()
   const { data: user, isLoading } = 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" })
+      showToast("Success!", "User created successfully.", "success")
+    },
+    onError: (err: ApiError) => {
+      let errDetail = (err.body as any)?.detail
+
+      if (err instanceof AxiosError) {
+        errDetail = err.message
+      }
+
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] })
+    },
+  })
+
   const login = async (data: AccessToken) => {
     const response = await LoginService.loginAccessToken({
       formData: data,
@@ -57,6 +83,7 @@ const useAuth = () => {
   }
 
   return {
+    signUpMutation,
     loginMutation,
     logout,
     user,