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 (
Your Name Email - {signUpError instanceof BetterAuthError && - signUpError.errorCode === - authClient.$ERROR_CODES.INVALID_EMAIL ? ( - Invalid email address + {emailFieldError ? ( + {emailFieldError} ) : null} Password - + Confirm Password - {signUpError instanceof PasswordMismatchError ? ( - Passwords do not match + {passwordFieldError ? ( + {passwordFieldError} ) : ( Must be at least 8 characters long. @@ -186,7 +217,7 @@ function SignupForm() { {isPending ? "Creating account…" : "Create Account"} - Already have an account? Sign in + Already have an account? Sign in