diff --git a/packages/web/src/routes/__root.tsx b/packages/web/src/routes/__root.tsx
index eed92c2..68dc6d3 100644
--- a/packages/web/src/routes/__root.tsx
+++ b/packages/web/src/routes/__root.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { createRootRoute, Outlet } from "@tanstack/react-router"
import { ConvexReactClient } from "convex/react"
import { toast } from "sonner"
+import { Toaster } from "@/components/ui/sonner"
import { formatError } from "@/lib/error"
import { useKeyboardModifierListener } from "@/lib/keyboard"
import { authClient } from "../auth-client"
@@ -35,6 +36,7 @@ function RootLayout() {
authClient={authClient}
>
+
)
diff --git a/packages/web/src/routes/sign-up.tsx b/packages/web/src/routes/sign-up.tsx
index 28a3290..c5cb9a2 100644
--- a/packages/web/src/routes/sign-up.tsx
+++ b/packages/web/src/routes/sign-up.tsx
@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query"
import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { GalleryVerticalEnd } from "lucide-react"
import type React from "react"
+import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import {
Card,
@@ -109,6 +110,10 @@ function SignupForm() {
replace: true,
})
},
+ onError: (error) => {
+ console.error(error)
+ toast.error("Unable to create your account")
+ },
})
const handleSubmit = (event: React.FormEvent) => {
@@ -122,12 +127,33 @@ function SignupForm() {
})
}
+ let passwordFieldError = null
+ let emailFieldError = null
+ if (signUpError instanceof BetterAuthError) {
+ switch (signUpError.errorCode) {
+ case "PASSWORD_TOO_SHORT":
+ passwordFieldError =
+ "Password must be at least 8 characters long"
+ break
+ case "INVALID_EMAIL":
+ emailFieldError = "Invalid email address"
+ break
+ default:
+ passwordFieldError = null
+ }
+ } else if (signUpError instanceof PasswordMismatchError) {
+ passwordFieldError = "Passwords do not match"
+ }
+
+ console.log({ passwordFieldError })
+
return (