feat: improve sign up error handling

apps/server/schema/schema.graphql

@@ -305,9 +305,15 @@ type mutation {
 type RegisterUserPayload {
   token: String
   user: User
+  errors: [RegisterMutationErrors!]
   clientMutationId: String
 }
 
+enum RegisterMutationErrors {
+  USERNAME_TAKEN
+  EMAIL_TAKEN
+}
+
 input RegisterUserInput {
   username: String!
   email: EmailAddress

apps/server/src/modules/user/mutations/RegisterMutation.ts

@@ -1,7 +1,12 @@
 import { generateToken } from "@/auth";
 import type { Context } from "@/context";
-import { genSaltSync, hashSync } from "bcrypt";
-import { GraphQLNonNull, GraphQLString } from "graphql";
+import { genSalt, hash } from "bcrypt";
+import {
+	GraphQLEnumType,
+	GraphQLList,
+	GraphQLNonNull,
+	GraphQLString,
+} from "graphql";
 import { mutationWithClientMutationId } from "graphql-relay";
 import { EmailAddressResolver } from "graphql-scalars";
 import { type User, UserModel } from "../UserModel";
@@ -13,9 +18,12 @@ type RegisterInput = {
 	password: string;
 };
 
+type RegisterError = "USERNAME_TAKEN" | "EMAIL_TAKEN";
+
 type RegisterOutput = {
 	token: string | null;
 	user: User | null;
+	errors: RegisterError[] | null;
 };
 
 export const Register = mutationWithClientMutationId<
@@ -31,31 +39,53 @@ export const Register = mutationWithClientMutationId<
 		user: {
 			type: UserType,
 		},
+		errors: {
+			type: new GraphQLList(
+				new GraphQLNonNull(
+					new GraphQLEnumType({
+						name: "RegisterMutationErrors",
+						values: {
+							USERNAME_TAKEN: { value: "USERNAME_TAKEN" },
+							EMAIL_TAKEN: { value: "EMAIL_TAKEN" },
+						},
+					}),
+				),
+			),
+		},
 	},
 	inputFields: {
 		username: { type: new GraphQLNonNull(GraphQLString) },
 		email: { type: EmailAddressResolver },
 		password: { type: new GraphQLNonNull(GraphQLString) },
 	},
 	mutateAndGetPayload: async ({ email, password, username }) => {
-		const userAlreadyExists = !!(await UserModel.findOne({
-			$or: [
-				{ email: email.trim().toLowerCase() },
-				{ username: username.trim() },
-			],
-		}));
+		const cleanUsername = username.trim();
+		const cleanEmail = email.trim().toLowerCase();
+
+		const duplicateUser = await UserModel.findOne({
+			$or: [{ email: cleanEmail }, { username: cleanUsername }],
+		});
+
+		if (duplicateUser) {
+			const errors: RegisterError[] = [];
+
+			if (duplicateUser.email === cleanEmail) {
+				errors.push("EMAIL_TAKEN");
+			}
+			if (duplicateUser.username === cleanUsername) {
+				errors.push("USERNAME_TAKEN");
+			}
 
-		if (userAlreadyExists) {
-			throw new Error("User already exists");
+			return { errors, token: null, user: null };
 		}
 
-		const salt = genSaltSync();
-		const hashedPassword = hashSync(password, salt);
+		const salt = await genSalt();
+		const hashedPassword = await hash(password, salt);
 
 		const user = await UserModel.create({
-			email: email.trim(),
+			email: cleanEmail,
 			password: hashedPassword,
-			username: username.trim(),
+			username: cleanUsername,
 		});
 		const token = generateToken(user);
 
@@ -65,6 +95,6 @@ export const Register = mutationWithClientMutationId<
 			throw new Error(JSON.stringify(err));
 		}
 
-		return { token, user };
+		return { token, user, errors: null };
 	},
 });

apps/web/data/schema.graphql

@@ -305,9 +305,15 @@ type mutation {
 type RegisterUserPayload {
   token: String
   user: User
+  errors: [RegisterMutationErrors!]
   clientMutationId: String
 }
 
+enum RegisterMutationErrors {
+  USERNAME_TAKEN
+  EMAIL_TAKEN
+}
+
 input RegisterUserInput {
   username: String!
   email: EmailAddress

apps/web/src/components/sign-up.tsx

@@ -27,6 +27,7 @@ const UserRegisterFormSchema = z.object({
 const RegisterUserMutation = graphql`
   mutation signUpMutation($input: RegisterUserInput!) {
     register(input: $input) {
+			errors
       token
     }
   }
@@ -39,16 +40,25 @@ export function SignUp() {
 	const onSubmit = form.handleSubmit((data) => {
 		register({
 			variables: { input: data },
-			updater: (store, data) => {
-				if (data?.register?.token) {
-					store.invalidateStore();
-				}
-			},
 			onCompleted: (data) => {
 				if (data.register?.token) {
 					login(data.register.token);
 					location.reload();
 				}
+				if (data.register?.errors) {
+					for (const error of data.register.errors) {
+						switch (error) {
+							case "EMAIL_TAKEN":
+								form.setError("email", { message: "Email already taken" });
+								break;
+							case "USERNAME_TAKEN":
+								form.setError("username", {
+									message: "Username already taken",
+								});
+								break;
+						}
+					}
+				}
 			},
 		});
 	});