From d3259d2f8605c0bc2059751585469d6e71c0d16f Mon Sep 17 00:00:00 2001
From: d3rpp <github@d3rpp.dev>
Date: Mon, 19 Aug 2024 10:33:49 +1200
Subject: [PATCH] moved the router into the server dir so I don't accidentally
 import it into the client, added some csp options

---
 src/hooks.server.ts                           |  2 +-
 src/lib/{ => server}/trpc/router/auth.ts      | 10 ++-----
 src/lib/{ => server}/trpc/router/greeter.ts   |  0
 src/lib/{ => server}/trpc/router/index.ts     |  0
 src/lib/{ => server}/trpc/router/init.ts      |  0
 src/lib/trpc/client.ts                        |  2 +-
 src/lib/trpc/schemas.ts                       | 13 +++++++++
 src/routes/(auth)/auth/sign-up/+page.svelte   | 29 ++++++-------------
 .../auth/sign-up/onboarding/+page.server.ts   |  3 ++
 svelte.config.js                              |  8 +++++
 10 files changed, 38 insertions(+), 29 deletions(-)
 rename src/lib/{ => server}/trpc/router/auth.ts (89%)
 rename src/lib/{ => server}/trpc/router/greeter.ts (100%)
 rename src/lib/{ => server}/trpc/router/index.ts (100%)
 rename src/lib/{ => server}/trpc/router/init.ts (100%)
 create mode 100644 src/lib/trpc/schemas.ts
 create mode 100644 src/routes/(auth)/auth/sign-up/onboarding/+page.server.ts

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index c0f1d88..97e86a1 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,5 +1,5 @@
 import { createContext } from "$lib/trpc/context";
-import { router } from "$lib/trpc/router";
+import { router } from "$lib/server/trpc/router";
 import type { Handle } from "@sveltejs/kit";
 import { createTRPCHandle } from "trpc-sveltekit";
 
diff --git a/src/lib/trpc/router/auth.ts b/src/lib/server/trpc/router/auth.ts
similarity index 89%
rename from src/lib/trpc/router/auth.ts
rename to src/lib/server/trpc/router/auth.ts
index 7b74530..336eec0 100644
--- a/src/lib/trpc/router/auth.ts
+++ b/src/lib/server/trpc/router/auth.ts
@@ -1,15 +1,11 @@
 import z from "zod";
 import { trpcInstance } from "./init";
+import { USERNAME_SCHEMA, PASSWORD_SCHEMA } from "$lib/trpc/schemas";
 
 import { DB } from "$lib/server/db";
 import { userTable, userAliasTable, passwordTable } from "$lib/drizzle";
 import { eq, or } from "drizzle-orm";
 
-const USERNAME_SCHEMA = z
-	.string()
-	.max(32, "invalid_length")
-	.regex(/^[a-z0-9_]+$/, "invalid_chars");
-
 export const authRouter = trpcInstance.router({
 	// #region Check Username
 	check_username_availability: trpcInstance.procedure
@@ -40,7 +36,7 @@ export const authRouter = trpcInstance.router({
 		.input(
 			z.object({
 				username: USERNAME_SCHEMA,
-				password: z.string().min(8),
+				password: PASSWORD_SCHEMA,
 			}),
 		)
 		.mutation(async (opts) => {
@@ -66,7 +62,7 @@ export const authRouter = trpcInstance.router({
 
 			console.log("Created User", user_id);
 
-			// todo: return user token
+			// todo: set user token cookie
 		}),
 	// #endregion
 });
diff --git a/src/lib/trpc/router/greeter.ts b/src/lib/server/trpc/router/greeter.ts
similarity index 100%
rename from src/lib/trpc/router/greeter.ts
rename to src/lib/server/trpc/router/greeter.ts
diff --git a/src/lib/trpc/router/index.ts b/src/lib/server/trpc/router/index.ts
similarity index 100%
rename from src/lib/trpc/router/index.ts
rename to src/lib/server/trpc/router/index.ts
diff --git a/src/lib/trpc/router/init.ts b/src/lib/server/trpc/router/init.ts
similarity index 100%
rename from src/lib/trpc/router/init.ts
rename to src/lib/server/trpc/router/init.ts
diff --git a/src/lib/trpc/client.ts b/src/lib/trpc/client.ts
index c1ec201..7efbdb8 100644
--- a/src/lib/trpc/client.ts
+++ b/src/lib/trpc/client.ts
@@ -1,7 +1,7 @@
 // type imported for TSDoc, ignore this.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { page } from "$app/stores";
-import type { Router } from "$lib/trpc/router";
+import type { Router } from "$lib/server/trpc/router";
 
 import { createTRPCClient, type TRPCClientInit } from "trpc-sveltekit";
 import type { QueryClient } from "@tanstack/svelte-query";
diff --git a/src/lib/trpc/schemas.ts b/src/lib/trpc/schemas.ts
new file mode 100644
index 0000000..d9dc8d5
--- /dev/null
+++ b/src/lib/trpc/schemas.ts
@@ -0,0 +1,13 @@
+import z from "zod";
+
+export const USERNAME_SCHEMA = z
+	.string()
+	.max(32, "Usernames may be between 1 and 32 characters long.")
+	.regex(
+		/^[a-z0-9_]+$/,
+		"Usernames may only contain lowercase letters, numbers, and underscores.",
+	);
+
+export const PASSWORD_SCHEMA = z
+	.string()
+	.min(8, "Password must contain at least 8 characters");
diff --git a/src/routes/(auth)/auth/sign-up/+page.svelte b/src/routes/(auth)/auth/sign-up/+page.svelte
index 3adae69..eee28e9 100644
--- a/src/routes/(auth)/auth/sign-up/+page.svelte
+++ b/src/routes/(auth)/auth/sign-up/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { page } from "$app/stores";
+	import { goto } from "$app/navigation";
+
 	import { trpc } from "$lib/trpc/client";
+	import { PASSWORD_SCHEMA } from "$lib/trpc/schemas";
 	import { debounce } from "$lib/utils";
 	import { PAGE_TRANSITION_TIME } from "$lib";
 
@@ -16,15 +19,13 @@
 	} from "svelte/store";
 	import { slide, fade } from "svelte/transition";
 
-	import { Label } from "@/ui/label";
-	import { Input } from "@/ui/input";
+	import { Button } from "@/ui/button";
 	import * as Card from "@/ui/card";
+	import { Input } from "@/ui/input";
+	import { Label } from "@/ui/label";
+	import Main from "@/main.svelte";
 
 	import { CircleCheck, CircleX, LoaderCircle } from "lucide-svelte";
-	import Main from "@/main.svelte";
-	import { Button } from "@/ui/button";
-	import { z } from "zod";
-	import { goto } from "$app/navigation";
 
 	const rpc = trpc($page);
 	// const utils = rpc.createUtils();
@@ -65,24 +66,13 @@
 			)
 				return "Unknown Error";
 
-			const reason = val.error.data.zodError.formErrors[0];
-			switch (reason) {
-				case "invalid_chars":
-					return "Usernames may only contain lowercase letters, numbers, and underscores.";
-				case "invalid_length":
-					return "Usernames may be between 1 and 32 characters long.";
-				default:
-					return "Unknown Error";
-			}
+			const first_form_error = val.error.data.zodError.formErrors[0];
+			if (first_form_error) return first_form_error;
 		});
 
 	// #endregion
 
 	// #region Password Validation
-	const PASSWORD_SCHEMA = z
-		.string()
-		.min(8, "Password must contain at least 8 characters");
-
 	let password = $state("");
 
 	const password_validation: string | boolean = $derived.by(() => {
@@ -93,7 +83,6 @@
 
 		return validity.error.format()._errors[0];
 	});
-
 	// #endregion
 
 	const sign_up_mutation = rpc.auth.sign_up.createMutation({
diff --git a/src/routes/(auth)/auth/sign-up/onboarding/+page.server.ts b/src/routes/(auth)/auth/sign-up/onboarding/+page.server.ts
new file mode 100644
index 0000000..03993db
--- /dev/null
+++ b/src/routes/(auth)/auth/sign-up/onboarding/+page.server.ts
@@ -0,0 +1,3 @@
+import type { PageServerLoad } from "./$types";
+
+export const load = (async (ev) => {}) satisfies PageServerLoad;
diff --git a/svelte.config.js b/svelte.config.js
index f29ae3b..207096b 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,6 +16,14 @@ const config = {
 		alias: {
 			"@": "./src/lib/components/*",
 		},
+
+		csp: {
+			mode: "auto",
+		},
+
+		csrf: {
+			checkOrigin: true,
+		},
 	},
 };