From 7f876ecf1ffe73e0d08cb794eab08f9836b5d99d Mon Sep 17 00:00:00 2001
From: 727021 <1834544+727021@users.noreply.github.com>
Date: Tue, 22 Apr 2025 21:17:45 -0600
Subject: [PATCH 1/4] update todo list

---
 TODO.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TODO.md b/TODO.md
index 43f9144..a85ea1b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -28,6 +28,7 @@
   - [ ] rebel
 - [X] home page (maybe just replace with games page?)
 - [ ] landing page (before login)
+- [ ] Migrate from remix to react-router@7
 
 # Stretch
 

From 575ec562ee96d582809a56120a9925100ba6f030 Mon Sep 17 00:00:00 2001
From: 727021 <1834544+727021@users.noreply.github.com>
Date: Thu, 24 Apr 2025 00:11:45 -0600
Subject: [PATCH 2/4] start on clerk auth

---
 README.md                         |   9 +-
 TODO.md                           |   2 +
 app/components/AppNav/index.tsx   |  85 ++++---
 app/components/Footer/index.tsx   |   4 +-
 app/root.tsx                      |  16 +-
 app/routes/_account.sign-in.$.tsx |  15 ++
 app/routes/_account.sign-up.$.tsx |  15 ++
 app/routes/_account.tsx           |  15 ++
 app/routes/_app.home.tsx          |  22 --
 app/routes/_app.tsx               |  24 +-
 app/routes/_app.user.$.tsx        |  15 ++
 app/routes/_index.tsx             |  24 +-
 app/routes/api.webhooks.ts        |  43 ++++
 package-lock.json                 | 353 ++++++++++++++++++++++++++++--
 package.json                      |   2 +
 15 files changed, 536 insertions(+), 108 deletions(-)
 create mode 100644 app/routes/_account.sign-in.$.tsx
 create mode 100644 app/routes/_account.sign-up.$.tsx
 create mode 100644 app/routes/_account.tsx
 delete mode 100644 app/routes/_app.home.tsx
 create mode 100644 app/routes/_app.user.$.tsx
 create mode 100644 app/routes/api.webhooks.ts

diff --git a/README.md b/README.md
index 62620f3..f4f12e7 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,14 @@
 
 An online campaign manager for [Star Wars: Imperial Assault](https://www.fantasyflightgames.com/en/products/star-wars-imperial-assault/)
 
-<br><br><br><br><br>
+[![Remix](https://img.shields.io/badge/remix-%23000.svg?style=for-the-badge&logo=remix&logoColor=white)](https://remix.run)
+[![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)](https://vite.dev)
+[![Prisma](https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white)](https://www.prisma.io)
+[![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com)
+[![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com)
+[![DaisyUI](https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white)](https://daisyui.com)
+[![Clerk](https://img.shields.io/badge/Clerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white)](https://clerk.com/)
+[![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=Cloudflare&logoColor=white)](https://cloudflare.com)
 
 ---
 
diff --git a/TODO.md b/TODO.md
index a85ea1b..eac31cc 100644
--- a/TODO.md
+++ b/TODO.md
@@ -29,6 +29,8 @@
 - [X] home page (maybe just replace with games page?)
 - [ ] landing page (before login)
 - [ ] Migrate from remix to react-router@7
+- [ ] Clerk auth
+- [ ] Default theme picker to "os"
 
 # Stretch
 
diff --git a/app/components/AppNav/index.tsx b/app/components/AppNav/index.tsx
index 1a469c8..4846724 100644
--- a/app/components/AppNav/index.tsx
+++ b/app/components/AppNav/index.tsx
@@ -1,58 +1,51 @@
-import { Link, NavLink } from '@remix-run/react'
+import {
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  UserButton,
+  useUser
+} from '@clerk/remix'
+import { NavLink } from '@remix-run/react'
 import ThemePicker from '~/components/ThemePicker'
-import type { getUser } from '~/services/auth.server'
-import { getAvatarUrls } from '~/utils/avatar'
 
-type Props = {
-  user: Awaited<ReturnType<typeof getUser>>
-}
-
-const AppNav = ({ user }: Props) => {
-  const urls = getAvatarUrls(user, 32)
+const AppNav = ({ minimal = false }) => {
+  const { isSignedIn } = useUser()
 
   return (
-    <div className="navbar bg-base-300 text-base-content mb-4">
+    <div className="navbar bg-base-300 text-base-content mb-4 pr-4 gap-2">
       <div className="flex-1">
-        <NavLink to="/games" className="btn btn-ghost text-xl">
+        <NavLink
+          to={isSignedIn ? '/games' : '/'}
+          className="btn btn-ghost text-xl"
+        >
           Unquestable
         </NavLink>
       </div>
-      <div className="flex-none">
-        <ul className="menu menu-horizontal px-1">
-          <li>
-            <NavLink to="/collection">Collection</NavLink>
-          </li>
-          <li>
-            <NavLink to="/games" end>
-              Games
-            </NavLink>
-          </li>
-        </ul>
-      </div>
-      <div className="flex-none">
-        <ThemePicker />
-      </div>
-      <div className="flex-none dropdown dropdown-end">
-        <button className="btn btn-ghost btn-circle avatar">
-          <div className="w-8 rounded-full">
-            <picture>
-              {urls.webp && <source src={urls.webp} />}
-              <img src={urls.gif ?? urls.png} alt="" />
-            </picture>
+      {!minimal && (
+        <>
+          <SignedIn>
+            <div className="flex-none">
+              <ul className="menu menu-horizontal px-1">
+                <li>
+                  <NavLink to="/collection">Collection</NavLink>
+                </li>
+                <li>
+                  <NavLink to="/games" end>
+                    Games
+                  </NavLink>
+                </li>
+              </ul>
+            </div>
+          </SignedIn>
+          <div className="flex-none">
+            <ThemePicker />
           </div>
-        </button>
-        <ul
-          tabIndex={0}
-          className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-300 text-base-content rounded-box w-52"
-        >
-          <li>
-            <NavLink to="/profile">Profile</NavLink>
-          </li>
-          <li>
-            <Link to="/logout">Log Out</Link>
-          </li>
-        </ul>
-      </div>
+          <UserButton userProfileMode="navigation" userProfileUrl="/user" />
+          <SignedOut>
+            <SignInButton />
+          </SignedOut>
+        </>
+      )}
     </div>
   )
 }
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index 1d8d963..e7d6be2 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { Link } from '@remix-run/react'
 
 const Footer = () => {
   return (
-    <footer className="footer footer-center p-10 bg-base-300 text-base-content">
+    <footer className="footer footer-center p-10 bg-base-300 text-base-content mt-4">
       <nav className="grid grid-flow-col gap-4">
         <Link to="#" className="link link-hover">
           About Us
@@ -14,7 +14,7 @@ const Footer = () => {
           Privacy Policy
         </Link>
       </nav>
-      <div className="text-left">
+      <div className="text-left max-w-screen-lg">
         {/* Disclaimer copied from https://cards.boardwars.eu/ */}
         This website is not produced, endorsed, supported, or affiliated with
         Fantasy Flight Games. The copyrightable portions of Star Wars: Imperial
diff --git a/app/root.tsx b/app/root.tsx
index 83e5ab4..af5dac9 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,4 +1,4 @@
-import type { LinksFunction } from '@vercel/remix'
+import type { LinksFunction, LoaderFunction } from '@vercel/remix'
 import {
   Links,
   Meta,
@@ -6,15 +6,19 @@ import {
   Scripts,
   ScrollRestoration
 } from '@remix-run/react'
+import { rootAuthLoader } from '@clerk/remix/ssr.server'
 
 import stylesheet from '~/tailwind.css?url'
 import { useTheme } from './context/theme-context'
+import { ClerkApp } from '@clerk/remix'
+
+export const loader: LoaderFunction = (args) => rootAuthLoader(args)
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesheet }
 ]
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   const { theme } = useTheme()
 
   return (
@@ -26,10 +30,16 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   )
 }
+
+function App() {
+  return <Outlet />
+}
+
+export default ClerkApp(App)
diff --git a/app/routes/_account.sign-in.$.tsx b/app/routes/_account.sign-in.$.tsx
new file mode 100644
index 0000000..2dfc1d3
--- /dev/null
+++ b/app/routes/_account.sign-in.$.tsx
@@ -0,0 +1,15 @@
+import { SignIn } from "@clerk/remix"
+
+export default function Page() {
+  return (
+    <SignIn
+      appearance={{
+        elements: {
+          rootBox: {
+            margin: '0 auto'
+          }
+        }
+      }}
+    />
+  )
+}
\ No newline at end of file
diff --git a/app/routes/_account.sign-up.$.tsx b/app/routes/_account.sign-up.$.tsx
new file mode 100644
index 0000000..09f57af
--- /dev/null
+++ b/app/routes/_account.sign-up.$.tsx
@@ -0,0 +1,15 @@
+import { SignUp } from '@clerk/remix'
+
+export default function Page() {
+  return (
+    <SignUp
+      appearance={{
+        elements: {
+          rootBox: {
+            margin: '0 auto'
+          }
+        }
+      }}
+    />
+  )
+}
diff --git a/app/routes/_account.tsx b/app/routes/_account.tsx
new file mode 100644
index 0000000..8465e8b
--- /dev/null
+++ b/app/routes/_account.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "@remix-run/react"
+import AppNav from "~/components/AppNav"
+import Footer from "~/components/Footer"
+
+export default function Page() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <AppNav minimal />
+      <main className="grow max-w-screen-xl w-full mx-auto">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/app/routes/_app.home.tsx b/app/routes/_app.home.tsx
deleted file mode 100644
index 8048248..0000000
--- a/app/routes/_app.home.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { LoaderFunctionArgs } from '@vercel/remix'
-import { json } from '@vercel/remix'
-import { Link, useLoaderData } from '@remix-run/react'
-import { getUser } from '~/services/auth.server'
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
-  return json({ user })
-}
-
-const Index = () => {
-  const data = useLoaderData<typeof loader>()
-
-  return (
-    <div>
-      <Link to="/games">My Games</Link>
-      <Link to="/collection">My Collection</Link>
-    </div>
-  )
-}
-
-export default Index
diff --git a/app/routes/_app.tsx b/app/routes/_app.tsx
index 30944b8..4f440cf 100644
--- a/app/routes/_app.tsx
+++ b/app/routes/_app.tsx
@@ -1,22 +1,26 @@
-import type { LoaderFunctionArgs } from '@vercel/remix'
-import { Outlet, json, useLoaderData } from '@remix-run/react'
-import { getUser } from '~/services/auth.server'
+import type { LoaderFunction } from '@vercel/remix'
+import { Outlet, redirect } from '@remix-run/react'
 import Footer from '~/components/Footer'
 import AppNav from '~/components/AppNav'
+import { getAuth } from '@clerk/remix/ssr.server'
+import { SignedIn } from '@clerk/remix'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
-  return json({ user })
+export const loader: LoaderFunction = async (args) => {
+  const { userId } = await getAuth(args)
+  if (!userId) {
+    return redirect(`/sign-in?redirect_url=${args.request.url}`)
+  }
+  return {}
 }
 
 const App = () => {
-  const data = useLoaderData<typeof loader>()
-
   return (
     <div className="min-h-screen flex flex-col">
-      <AppNav user={data.user} />
+      <AppNav />
       <main className="grow max-w-screen-xl w-full mx-auto">
-        <Outlet />
+        <SignedIn>
+          <Outlet />
+        </SignedIn>
       </main>
       <Footer />
     </div>
diff --git a/app/routes/_app.user.$.tsx b/app/routes/_app.user.$.tsx
new file mode 100644
index 0000000..a8da55b
--- /dev/null
+++ b/app/routes/_app.user.$.tsx
@@ -0,0 +1,15 @@
+import { UserProfile } from '@clerk/remix'
+
+export default function Page() {
+  return (
+    <UserProfile
+      appearance={{
+        elements: {
+          rootBox: {
+            margin: '0 auto'
+          }
+        }
+      }}
+    />
+  )
+}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 1cc40bd..f917bb4 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,15 +1,27 @@
-import type { MetaFunction } from '@vercel/remix'
-import { Link } from '@remix-run/react'
+import type { LoaderFunction, MetaFunction } from '@vercel/remix'
+import { Link, redirect } from '@remix-run/react'
+import AppNav from '~/components/AppNav'
+import { getAuth } from '@clerk/remix/ssr.server'
 
 export const meta: MetaFunction = () => {
   return [{ title: 'Unquestable' }]
 }
 
+export const loader: LoaderFunction = async (args) => {
+  const user = await getAuth(args)
+  if (user.userId) {
+    return redirect('/games')
+  }
+  return {}
+}
+
 export default function Index() {
   return (
-    <div className="prose">
-      <h1>Unquestable</h1>
-      <Link to="/games">App &rarr;</Link>
-    </div>
+    <>
+      <AppNav />
+      <div className="prose">
+        <Link to="/games">App &rarr;</Link>
+      </div>
+    </>
   )
 }
diff --git a/app/routes/api.webhooks.ts b/app/routes/api.webhooks.ts
new file mode 100644
index 0000000..1fb7c60
--- /dev/null
+++ b/app/routes/api.webhooks.ts
@@ -0,0 +1,43 @@
+import type { ActionFunction } from '@remix-run/node'
+import { Webhook } from 'svix'
+
+const deleteUser = async (userId: string) => {
+  // TODO: delete user from db
+
+  return new Response(null, { status: 204 })
+}
+
+export const action: ActionFunction = async ({ request }) => {
+  const svix = new Webhook(process.env.CLERK_WEBHOOK_SIGNING_SECRET ?? '')
+
+  let hook
+
+  try {
+    hook = svix.verify(await request.text(), {
+      'svix-id': request.headers.get('svix-id') ?? '',
+      'svix-timestamp': request.headers.get('svix-timestamp') ?? '',
+      'svix-signature': request.headers.get('svix-signature') ?? ''
+    }) as
+      | {
+          type: 'user.deleted'
+          data: {
+            id: string
+          }
+        }
+      | {
+          type: ''
+        }
+  } catch (error) {
+    return new Response(null, { status: 400 })
+  }
+
+  switch (hook.type) {
+    case 'user.deleted': {
+      return await deleteUser(hook.data.id)
+    }
+    default: {
+      console.log('Unhandled webhook type:', hook.type)
+      return new Response(null, { status: 400 })
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 861ec51..ec72203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
+        "@clerk/remix": "^4.5.20",
         "@heroicons/react": "^2.1.5",
         "@prisma/client": "^5.19.1",
         "@remix-run/node": "^2.12.0",
@@ -23,6 +24,7 @@
         "remix-auth": "^3.7.0",
         "remix-auth-discord": "^1.4.0",
         "remix-validated-form": "^5.1.5",
+        "svix": "^1.64.1",
         "zod": "^3.23.8",
         "zod-form-data": "^2.0.2"
       },
@@ -870,6 +872,140 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@clerk/backend": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-1.29.2.tgz",
+      "integrity": "sha512-mBvGyHjNj/t2X2y0Dn1V1EgsffhgNH1TJhB98k40dHxVxvosY9QdgCDMtru/Q1uZ7EXNOzYqzcB5FzAKCxFRZw==",
+      "dependencies": {
+        "@clerk/shared": "^3.7.3",
+        "@clerk/types": "^4.55.0",
+        "cookie": "1.0.2",
+        "snakecase-keys": "8.0.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "svix": "^1.62.0"
+      },
+      "peerDependenciesMeta": {
+        "svix": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@clerk/backend/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@clerk/backend/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/@clerk/clerk-react": {
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.29.0.tgz",
+      "integrity": "sha512-S8wenyl5R/8YmUT1tElQZdmHe/MASM9JDJRKqhy0kVYXdKzjhuwTBgT+m3hXl3zdq/Gwi3hgv7pRnQWpQisutQ==",
+      "dependencies": {
+        "@clerk/shared": "^3.7.3",
+        "@clerk/types": "^4.55.0",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
+      }
+    },
+    "node_modules/@clerk/clerk-react/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/@clerk/remix": {
+      "version": "4.5.20",
+      "resolved": "https://registry.npmjs.org/@clerk/remix/-/remix-4.5.20.tgz",
+      "integrity": "sha512-MilbzWFLVxPSAjZG+NDpnQUqCoIJW3IJdKBVG8YqrBHw7y7CbCuMy7oNYzmhFJLjMyKVLWaXZevoDS7/RxMGwQ==",
+      "dependencies": {
+        "@clerk/backend": "^1.29.2",
+        "@clerk/clerk-react": "^5.29.0",
+        "@clerk/shared": "^3.7.3",
+        "@clerk/types": "^4.55.0",
+        "cookie": "0.7.2",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "@remix-run/react": "^2.0.0",
+        "@remix-run/server-runtime": "^2.0.0",
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-router": "^6.0.0"
+      }
+    },
+    "node_modules/@clerk/remix/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@clerk/remix/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/@clerk/shared": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.7.3.tgz",
+      "integrity": "sha512-IMpz1bgZZzlxNLyFliE0GrA3NT1Wgidl2CBORkE2S/YUSCH4ge8EPg5tfQq9Ja6d17TfarkzEafrm1b/BHxSWg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@clerk/types": "^4.55.0",
+        "dequal": "2.0.3",
+        "glob-to-regexp": "0.4.1",
+        "js-cookie": "3.0.5",
+        "std-env": "^3.8.1",
+        "swr": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@clerk/types": {
+      "version": "4.55.0",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.55.0.tgz",
+      "integrity": "sha512-MJc/zo9vJOq1mY37RbRjrZ883AKe9gitlYFyVB3R+ChKm0uBl2Mm8R2gkYy1GGKYvqBm27GJooWHxdcM1Yv1eQ==",
+      "dependencies": {
+        "csstype": "3.1.3"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -2395,6 +2531,11 @@
       "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
       "dev": true
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ=="
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz",
@@ -2608,12 +2749,11 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "22.5.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
-      "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
-      "dev": true,
+      "version": "22.14.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
+      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/prop-types": {
@@ -5277,8 +5417,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/culori": {
       "version": "3.3.0",
@@ -5467,7 +5606,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5541,6 +5679,20 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "node_modules/dotenv": {
       "version": "16.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
@@ -5858,6 +6010,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "node_modules/esbuild": {
       "version": "0.17.6",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.6.tgz",
@@ -7285,6 +7442,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ=="
+    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -7734,6 +7896,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -8684,6 +8851,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8973,6 +9148,19 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lower-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -9021,6 +9209,17 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
@@ -10352,11 +10551,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/no-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "node_modules/node-fetch": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -11515,6 +11727,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11926,6 +12143,11 @@
         "node": ">=0.10.5"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -12374,6 +12596,44 @@
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/snake-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/snakecase-keys": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-8.0.1.tgz",
+      "integrity": "sha512-Sj51kE1zC7zh6TDlNNz0/Jn1n5HiHdoQErxO8jLtnyrkJW/M5PrI7x05uDgY3BO7OUQYKCvmeMurW6BPUdwEOw==",
+      "dependencies": {
+        "map-obj": "^4.1.0",
+        "snake-case": "^3.0.4",
+        "type-fest": "^4.15.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/snakecase-keys/node_modules/type-fest": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.0.tgz",
+      "integrity": "sha512-ABHZ2/tS2JkvH1PEjxFDTUWC8dB5OsIGZP4IFLhR293GqT5Y5qB1WwL2kMPYhQW9DVgVD8Hd7I8gjwPIf5GFkw==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -12476,6 +12736,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -12826,6 +13091,48 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svix": {
+      "version": "1.64.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.64.1.tgz",
+      "integrity": "sha512-9qq8h7Ex6IjtaDiuq93tL4/YfnV431/e1ieVfkwVaiyVbLUuOfScgary1a+uGygdbqARj9ye/yO+kBun7oCnbA==",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "@types/node": "^22.7.5",
+        "es6-promise": "^4.2.8",
+        "fast-sha256": "^1.3.0",
+        "svix-fetch": "^3.0.0",
+        "url-parse": "^1.5.10"
+      }
+    },
+    "node_modules/svix-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/svix-fetch/-/svix-fetch-3.0.0.tgz",
+      "integrity": "sha512-rcADxEFhSqHbraZIsjyZNh4TF6V+koloX1OzZ+AQuObX9mZ2LIMhm1buZeuc5BIZPftZpJCMBsSiBaeszo9tRw==",
+      "dependencies": {
+        "node-fetch": "^2.6.1",
+        "whatwg-fetch": "^3.4.1"
+      }
+    },
+    "node_modules/swr": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.3.tgz",
+      "integrity": "sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/swr/node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.12",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz",
@@ -13117,8 +13424,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tree-kill": {
       "version": "1.2.2",
@@ -13449,10 +13755,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
     },
     "node_modules/unified": {
       "version": "10.1.2",
@@ -13670,6 +13975,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -14870,14 +15184,17 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.20",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
diff --git a/package.json b/package.json
index 624878a..3e854ce 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@clerk/remix": "^4.5.20",
     "@heroicons/react": "^2.1.5",
     "@prisma/client": "^5.19.1",
     "@remix-run/node": "^2.12.0",
@@ -37,6 +38,7 @@
     "remix-auth": "^3.7.0",
     "remix-auth-discord": "^1.4.0",
     "remix-validated-form": "^5.1.5",
+    "svix": "^1.64.1",
     "zod": "^3.23.8",
     "zod-form-data": "^2.0.2"
   },

From be077a908af0cca7e100b52f4988dc9bb3ef9699 Mon Sep 17 00:00:00 2001
From: 727021 <1834544+727021@users.noreply.github.com>
Date: Thu, 24 Apr 2025 00:25:42 -0600
Subject: [PATCH 3/4] update database for clerk

---
 app/routes/api.webhooks.ts                    | 26 ++++++++++-
 .../20250424061817_clerk_user/migration.sql   | 46 +++++++++++++++++++
 prisma/schema.prisma                          |  9 +---
 3 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 prisma/migrations/20250424061817_clerk_user/migration.sql

diff --git a/app/routes/api.webhooks.ts b/app/routes/api.webhooks.ts
index 1fb7c60..70c62c7 100644
--- a/app/routes/api.webhooks.ts
+++ b/app/routes/api.webhooks.ts
@@ -1,12 +1,27 @@
 import type { ActionFunction } from '@remix-run/node'
 import { Webhook } from 'svix'
+import { prisma } from '~/services/db.server'
 
 const deleteUser = async (userId: string) => {
-  // TODO: delete user from db
+  await prisma.user.delete({
+    where: {
+      id: userId
+    }
+  })
 
   return new Response(null, { status: 204 })
 }
 
+const createUser = async (userId: string) => {
+  await prisma.user.create({
+    data: {
+      id: userId
+    }
+  })
+
+  return new Response(null, { status: 201 })
+}
+
 export const action: ActionFunction = async ({ request }) => {
   const svix = new Webhook(process.env.CLERK_WEBHOOK_SIGNING_SECRET ?? '')
 
@@ -24,6 +39,12 @@ export const action: ActionFunction = async ({ request }) => {
             id: string
           }
         }
+      | {
+          type: 'user.created'
+          data: {
+            id: string
+          }
+        }
       | {
           type: ''
         }
@@ -35,6 +56,9 @@ export const action: ActionFunction = async ({ request }) => {
     case 'user.deleted': {
       return await deleteUser(hook.data.id)
     }
+    case 'user.created': {
+      return await createUser(hook.data.id)
+    }
     default: {
       console.log('Unhandled webhook type:', hook.type)
       return new Response(null, { status: 400 })
diff --git a/prisma/migrations/20250424061817_clerk_user/migration.sql b/prisma/migrations/20250424061817_clerk_user/migration.sql
new file mode 100644
index 0000000..dbcd81f
--- /dev/null
+++ b/prisma/migrations/20250424061817_clerk_user/migration.sql
@@ -0,0 +1,46 @@
+/*
+  Warnings:
+
+  - The primary key for the `User` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `avatar` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `discordId` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `discriminator` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `displayName` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `email` on the `User` table. All the data in the column will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Game" DROP CONSTRAINT "Game_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_ExpansionToUser" DROP CONSTRAINT "_ExpansionToUser_B_fkey";
+
+-- DropIndex
+DROP INDEX "User_discordId_key";
+
+-- DropIndex
+DROP INDEX "User_email_key";
+
+-- AlterTable
+ALTER TABLE "Game" ALTER COLUMN "userId" SET DATA TYPE TEXT;
+
+-- AlterTable
+ALTER TABLE "User" DROP CONSTRAINT "User_pkey",
+DROP COLUMN "avatar",
+DROP COLUMN "discordId",
+DROP COLUMN "discriminator",
+DROP COLUMN "displayName",
+DROP COLUMN "email",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "User_pkey" PRIMARY KEY ("id");
+DROP SEQUENCE "User_id_seq";
+
+-- AlterTable
+ALTER TABLE "_ExpansionToUser" ALTER COLUMN "B" SET DATA TYPE TEXT;
+
+-- AddForeignKey
+ALTER TABLE "Game" ADD CONSTRAINT "Game_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_ExpansionToUser" ADD CONSTRAINT "_ExpansionToUser_B_fkey" FOREIGN KEY ("B") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 62c7519..d08014f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -14,12 +14,7 @@ datasource db {
 
 // #region User Data
 model User {
-  id            Int         @id @default(autoincrement())
-  discordId     String      @unique
-  displayName   String
-  discriminator String
-  email         String?     @unique
-  avatar        String?
+  id            String @id
   collection    Expansion[]
   games         Game[]
 }
@@ -294,7 +289,7 @@ model MissionSlot {
 model Game {
   id              Int             @id @default(autoincrement())
   owner           User            @relation(fields: [userId], references: [id], onDelete: Cascade)
-  userId          Int
+  userId          String
   name            String
   started         DateTime        @default(now())
   rebelPlayers    RebelPlayer[]

From 584017cfc1cc1bf43bd1cf215af7243ee61ece09 Mon Sep 17 00:00:00 2001
From: 727021 <1834544+727021@users.noreply.github.com>
Date: Thu, 24 Apr 2025 23:52:49 -0600
Subject: [PATCH 4/4] clerk auth

---
 README.md                                     |  3 +-
 TODO.md                                       | 32 ++++----
 app/components/ItemManager/index.tsx          | 16 +---
 app/routes/_account.sign-in.$.tsx             |  4 +-
 app/routes/_account.tsx                       |  6 +-
 app/routes/_app.collection.tsx                | 16 ++--
 app/routes/_app.games.$game.empire.agendas.ts | 12 +--
 app/routes/_app.games.$game.empire.class.ts   | 12 +--
 app/routes/_app.games.$game.empire.rewards.ts | 12 +--
 app/routes/_app.games.$game.empire.summary.ts | 14 ++--
 app/routes/_app.games.$game.empire.tsx        | 18 ++++-
 .../_app.games.$game.empire.villains.ts       | 14 ++--
 app/routes/_app.games.$game.rebels.allies.ts  | 12 +--
 app/routes/_app.games.$game.rebels.class.ts   | 24 +++---
 app/routes/_app.games.$game.rebels.items.ts   | 12 +--
 app/routes/_app.games.$game.rebels.rewards.ts | 12 +--
 .../_app.games.$game.rebels.summary.tsx       | 14 ++--
 app/routes/_app.games.$game.rebels.tsx        | 19 ++++-
 ...pp.games.$game.resolve.$mission._index.tsx | 33 +++++----
 ...games.$game.resolve.$mission.buy.rebel.tsx | 28 +++++--
 app/routes/_app.games.$game.tsx               | 12 +--
 app/routes/_app.games._index.tsx              |  8 +-
 app/routes/_app.games.new.tsx                 | 41 ++++++++--
 app/routes/_app.profile.tsx                   | 29 --------
 app/routes/_app.tsx                           |  9 +--
 app/routes/api.webhooks.ts                    | 40 ++++++++--
 app/routes/auth.discord.callback.tsx          |  9 ---
 app/routes/auth.discord.tsx                   |  9 ---
 app/routes/login.tsx                          | 74 -------------------
 app/routes/logout.tsx                         |  8 --
 app/services/auth.server.ts                   | 62 ----------------
 app/services/session.server.ts                | 14 ----
 app/utils/avatar.ts                           | 32 --------
 app/utils/requireAuth.server.ts               | 13 ++++
 vite.config.ts                                |  9 ++-
 35 files changed, 277 insertions(+), 405 deletions(-)
 delete mode 100644 app/routes/_app.profile.tsx
 delete mode 100644 app/routes/auth.discord.callback.tsx
 delete mode 100644 app/routes/auth.discord.tsx
 delete mode 100644 app/routes/login.tsx
 delete mode 100644 app/routes/logout.tsx
 delete mode 100644 app/services/auth.server.ts
 delete mode 100644 app/services/session.server.ts
 delete mode 100644 app/utils/avatar.ts
 create mode 100644 app/utils/requireAuth.server.ts

diff --git a/README.md b/README.md
index f4f12e7..e996c0b 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,14 @@
 
 An online campaign manager for [Star Wars: Imperial Assault](https://www.fantasyflightgames.com/en/products/star-wars-imperial-assault/)
 
+![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
 [![Remix](https://img.shields.io/badge/remix-%23000.svg?style=for-the-badge&logo=remix&logoColor=white)](https://remix.run)
 [![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)](https://vite.dev)
 [![Prisma](https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white)](https://www.prisma.io)
-[![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com)
 [![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com)
 [![DaisyUI](https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white)](https://daisyui.com)
 [![Clerk](https://img.shields.io/badge/Clerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white)](https://clerk.com/)
+[![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com)
 [![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=Cloudflare&logoColor=white)](https://cloudflare.com)
 
 ---
diff --git a/TODO.md b/TODO.md
index eac31cc..2cda641 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,20 +1,20 @@
 # MVP
 
-- [X] empire page
-  - [X] view only
-  - [X] manage owned agendas (discard and reshuffle)
-  - [X] arbitrary updates (agendas, villains, class cards, rewards, xp, name, influence)
-  - [X] BUG - fix styling for class card edit mode
-  - [X] BUG - fix styling for villains manager edit mode
+- [x] empire page
+  - [x] view only
+  - [x] manage owned agendas (discard and reshuffle)
+  - [x] arbitrary updates (agendas, villains, class cards, rewards, xp, name, influence)
+  - [x] BUG - fix styling for class card edit mode
+  - [x] BUG - fix styling for villains manager edit mode
   - [ ] move save buttons to match rebels page
-- [X] rebels page
-  - [X] view only
-  - [X] update player name and xp
-  - [X] update player class cards
-  - [X] update player rewards
-  - [X] update allies
-  - [X] update items and credits
-- [X] Move drawing side missions to resolve mission page, with mission rewards
+- [x] rebels page
+  - [x] view only
+  - [x] update player name and xp
+  - [x] update player class cards
+  - [x] update player rewards
+  - [x] update allies
+  - [x] update items and credits
+- [x] Move drawing side missions to resolve mission page, with mission rewards
 - [ ] Edit side mission deck
 - [ ] Delete games
 - [ ] mobile view
@@ -26,10 +26,10 @@
   - [ ] imperial buy
   - [ ] empire
   - [ ] rebel
-- [X] home page (maybe just replace with games page?)
+- [x] home page (maybe just replace with games page?)
 - [ ] landing page (before login)
 - [ ] Migrate from remix to react-router@7
-- [ ] Clerk auth
+- [x] Clerk auth
 - [ ] Default theme picker to "os"
 
 # Stretch
diff --git a/app/components/ItemManager/index.tsx b/app/components/ItemManager/index.tsx
index 419711b..21a43c8 100644
--- a/app/components/ItemManager/index.tsx
+++ b/app/components/ItemManager/index.tsx
@@ -2,19 +2,11 @@ import type { LoaderData as GameLoaderData } from '~/routes/_app.games.$game'
 import type { LoaderData } from '~/routes/_app.games.$game.rebels'
 import EditButton from '../EditButton'
 import { sortItems } from '~/utils/sortItems'
-import {
-  Reducer,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useReducer
-} from 'react'
+import type { Reducer } from 'react'
+import { useCallback, useEffect, useId, useMemo, useReducer } from 'react'
 import { useFetcher } from 'react-router-dom'
-import {
-  ActionData,
-  itemValidator
-} from '~/routes/_app.games.$game.rebels.items'
+import type { ActionData } from '~/routes/_app.games.$game.rebels.items'
+import { itemValidator } from '~/routes/_app.games.$game.rebels.items'
 import SubmitButton from '../SubmitButton'
 import TextInput from '../TextInput'
 import { ValidatedForm } from 'remix-validated-form'
diff --git a/app/routes/_account.sign-in.$.tsx b/app/routes/_account.sign-in.$.tsx
index 2dfc1d3..f6203f0 100644
--- a/app/routes/_account.sign-in.$.tsx
+++ b/app/routes/_account.sign-in.$.tsx
@@ -1,4 +1,4 @@
-import { SignIn } from "@clerk/remix"
+import { SignIn } from '@clerk/remix'
 
 export default function Page() {
   return (
@@ -12,4 +12,4 @@ export default function Page() {
       }}
     />
   )
-}
\ No newline at end of file
+}
diff --git a/app/routes/_account.tsx b/app/routes/_account.tsx
index 8465e8b..3613a60 100644
--- a/app/routes/_account.tsx
+++ b/app/routes/_account.tsx
@@ -1,6 +1,6 @@
-import { Outlet } from "@remix-run/react"
-import AppNav from "~/components/AppNav"
-import Footer from "~/components/Footer"
+import { Outlet } from '@remix-run/react'
+import AppNav from '~/components/AppNav'
+import Footer from '~/components/Footer'
 
 export default function Page() {
   return (
diff --git a/app/routes/_app.collection.tsx b/app/routes/_app.collection.tsx
index 4b8d2d9..445e843 100644
--- a/app/routes/_app.collection.tsx
+++ b/app/routes/_app.collection.tsx
@@ -4,11 +4,11 @@ import { useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
 import CollectionItem from '~/components/CollectionItem'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
 
   const allExpansions = await prisma.expansion.findMany({
     include: { boxArt: true }
@@ -18,7 +18,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       where: {
         owners: {
           some: {
-            id: user.id
+            id: userId
           }
         }
       },
@@ -36,12 +36,12 @@ const addRemoveSchema = zfd.formData({
   action: zfd.text(z.enum(['add', 'remove']))
 })
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async (args: ActionFunctionArgs) => {
   const { action, expansionId } = addRemoveSchema.parse(
-    await request.formData()
+    await args.request.formData()
   )
 
-  const user = await getUser(request)
+  const { userId } = await requireAuth(args)
 
   const expansion = await prisma.expansion.findUnique({
     where: {
@@ -59,7 +59,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   await prisma.user.update({
     where: {
-      id: user.id
+      id: userId
     },
     data: {
       collection: {
diff --git a/app/routes/_app.games.$game.empire.agendas.ts b/app/routes/_app.games.$game.empire.agendas.ts
index 3f8d8f2..94a79bc 100644
--- a/app/routes/_app.games.$game.empire.agendas.ts
+++ b/app/routes/_app.games.$game.empire.agendas.ts
@@ -1,10 +1,10 @@
 import { json, redirect } from '@vercel/remix'
 import type { LoaderFunctionArgs, ActionFunctionArgs } from '@vercel/remix'
 import { prisma } from '~/services/db.server'
-import { getUser } from '~/services/auth.server'
 import { withZod } from '@remix-validated-form/with-zod'
 import { zfd } from 'zod-form-data'
 import { z } from 'zod'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -29,17 +29,17 @@ export const agendaValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await agendaValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await agendaValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.imperialPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       }
     },
     select: {
diff --git a/app/routes/_app.games.$game.empire.class.ts b/app/routes/_app.games.$game.empire.class.ts
index d1581c6..bad5a30 100644
--- a/app/routes/_app.games.$game.empire.class.ts
+++ b/app/routes/_app.games.$game.empire.class.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@vercel/remix'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -23,17 +23,17 @@ export const classValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await classValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await classValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.imperialPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       }
     },
     select: {
diff --git a/app/routes/_app.games.$game.empire.rewards.ts b/app/routes/_app.games.$game.empire.rewards.ts
index 56df31e..336d0ca 100644
--- a/app/routes/_app.games.$game.empire.rewards.ts
+++ b/app/routes/_app.games.$game.empire.rewards.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@vercel/remix'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -23,17 +23,17 @@ export const rewardValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await rewardValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await rewardValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.imperialPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       }
     },
     select: {
diff --git a/app/routes/_app.games.$game.empire.summary.ts b/app/routes/_app.games.$game.empire.summary.ts
index 2dc2a9d..a8e4d83 100644
--- a/app/routes/_app.games.$game.empire.summary.ts
+++ b/app/routes/_app.games.$game.empire.summary.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@vercel/remix'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -30,17 +30,19 @@ export const summaryValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await summaryValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await summaryValidator.validate(
+    await args.request.formData()
+  )
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.imperialPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       }
     },
     select: {
diff --git a/app/routes/_app.games.$game.empire.tsx b/app/routes/_app.games.$game.empire.tsx
index 946f600..b9512b2 100644
--- a/app/routes/_app.games.$game.empire.tsx
+++ b/app/routes/_app.games.$game.empire.tsx
@@ -12,13 +12,25 @@ import ImperialClassManager from '~/components/ImperialClassManager'
 import ImperialSummaryManager from '~/components/ImperialSummaryManager'
 import type { LoaderFunctionArgs } from '@vercel/remix'
 import { prisma } from '~/services/db.server'
-import { getUser } from '~/services/auth.server'
 import { Side } from '@prisma/client'
 import ImperialRewardManager from '~/components/ImperialRewardManager'
 import VillainManager from '~/components/VillainManager'
+import { requireAuth } from '~/utils/requireAuth.server'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId
+    },
+    include: {
+      collection: {
+        select: {
+          id: true
+        }
+      }
+    }
+  })
 
   const rewards = await prisma.reward.findMany({
     where: {
diff --git a/app/routes/_app.games.$game.empire.villains.ts b/app/routes/_app.games.$game.empire.villains.ts
index acf6f29..6ce4c57 100644
--- a/app/routes/_app.games.$game.empire.villains.ts
+++ b/app/routes/_app.games.$game.empire.villains.ts
@@ -3,8 +3,8 @@ import type { ActionFunctionArgs, LoaderFunctionArgs } from '@vercel/remix'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -23,17 +23,19 @@ export const villainValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await villainValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await villainValidator.validate(
+    await args.request.formData()
+  )
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.imperialPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       }
     },
     select: {
diff --git a/app/routes/_app.games.$game.rebels.allies.ts b/app/routes/_app.games.$game.rebels.allies.ts
index 6afe24d..55e1e38 100644
--- a/app/routes/_app.games.$game.rebels.allies.ts
+++ b/app/routes/_app.games.$game.rebels.allies.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@remix-run/node'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -23,16 +23,16 @@ export const allyValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await allyValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await allyValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const game = await prisma.game.findFirst({
     where: {
       id: gameId,
-      userId: user.id
+      userId
     },
     select: {
       id: true
diff --git a/app/routes/_app.games.$game.rebels.class.ts b/app/routes/_app.games.$game.rebels.class.ts
index b209126..9c81abe 100644
--- a/app/routes/_app.games.$game.rebels.class.ts
+++ b/app/routes/_app.games.$game.rebels.class.ts
@@ -1,10 +1,10 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs} from "@remix-run/node";
-import { json, redirect } from "@remix-run/node"
-import { withZod } from "@remix-validated-form/with-zod"
-import { z } from "zod"
-import { zfd } from "zod-form-data"
-import { getUser } from "~/services/auth.server"
-import { prisma } from "~/services/db.server"
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
+import { json, redirect } from '@remix-run/node'
+import { withZod } from '@remix-validated-form/with-zod'
+import { z } from 'zod'
+import { zfd } from 'zod-form-data'
+import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -24,11 +24,11 @@ export const classValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await classValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await classValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   if (!data) {
     return json({})
@@ -38,7 +38,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       },
       id: data.id
     },
diff --git a/app/routes/_app.games.$game.rebels.items.ts b/app/routes/_app.games.$game.rebels.items.ts
index dd96465..cbc239a 100644
--- a/app/routes/_app.games.$game.rebels.items.ts
+++ b/app/routes/_app.games.$game.rebels.items.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@remix-run/node'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -27,16 +27,16 @@ export const itemValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await itemValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await itemValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const game = await prisma.game.findFirst({
     where: {
       id: gameId,
-      userId: user.id
+      userId
     },
     select: {
       id: true
diff --git a/app/routes/_app.games.$game.rebels.rewards.ts b/app/routes/_app.games.$game.rebels.rewards.ts
index aed839a..7faa15d 100644
--- a/app/routes/_app.games.$game.rebels.rewards.ts
+++ b/app/routes/_app.games.$game.rebels.rewards.ts
@@ -3,8 +3,8 @@ import { json, redirect } from '@remix-run/node'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -24,11 +24,11 @@ export const rewardValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await rewardValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await rewardValidator.validate(await args.request.formData())
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   if (!data) {
     return json({})
@@ -38,7 +38,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       },
       id: data?.id
     },
diff --git a/app/routes/_app.games.$game.rebels.summary.tsx b/app/routes/_app.games.$game.rebels.summary.tsx
index 5daa120..e9d75dd 100644
--- a/app/routes/_app.games.$game.rebels.summary.tsx
+++ b/app/routes/_app.games.$game.rebels.summary.tsx
@@ -3,8 +3,8 @@ import { json, redirect } from '@remix-run/node'
 import { withZod } from '@remix-validated-form/with-zod'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export type ActionData = { success?: number }
 
@@ -27,21 +27,23 @@ export const summaryValidator = withZod(
   })
 )
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { data } = await summaryValidator.validate(await request.formData())
+export const action = async (args: ActionFunctionArgs) => {
+  const { data } = await summaryValidator.validate(
+    await args.request.formData()
+  )
 
   if (!data) {
     return json({})
   }
 
-  const user = await getUser(request)
-  const gameId = parseInt(params.game!, 10)
+  const { userId } = await requireAuth(args)
+  const gameId = parseInt(args.params.game!, 10)
 
   const player = await prisma.rebelPlayer.findFirst({
     where: {
       game: {
         id: gameId,
-        userId: user.id
+        userId
       },
       id: data.id
     },
diff --git a/app/routes/_app.games.$game.rebels.tsx b/app/routes/_app.games.$game.rebels.tsx
index c8f905c..67c9a1f 100644
--- a/app/routes/_app.games.$game.rebels.tsx
+++ b/app/routes/_app.games.$game.rebels.tsx
@@ -10,13 +10,26 @@ import RebelClassManager from '~/components/RebelClassManager'
 import RebelRewardManager from '~/components/RebelRewardManager'
 import AllyManager from '~/components/AllyManager'
 import type { LoaderFunctionArgs } from '@remix-run/node'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
 import { Side } from '@prisma/client'
 import ItemManager from '~/components/ItemManager'
+import { requireAuth } from '~/utils/requireAuth.server'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
+
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId
+    },
+    include: {
+      collection: {
+        select: {
+          id: true
+        }
+      }
+    }
+  })
 
   const rewards = await prisma.reward.findMany({
     where: {
diff --git a/app/routes/_app.games.$game.resolve.$mission._index.tsx b/app/routes/_app.games.$game.resolve.$mission._index.tsx
index 8c8a7d7..ff8a460 100644
--- a/app/routes/_app.games.$game.resolve.$mission._index.tsx
+++ b/app/routes/_app.games.$game.resolve.$mission._index.tsx
@@ -24,9 +24,9 @@ import TextInput from '~/components/TextInput'
 import ButtonBar from '~/components/ButtonBar'
 import { calculateRewards } from '~/utils/missionRewards'
 import PlaceholderInput from '~/components/PlaceholderInput'
-import { getUser } from '~/services/auth.server'
 import SubmitButton from '~/components/SubmitButton'
 import SelectInput from '~/components/SelectInput'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 const validator = withZod(
   zfd.formData({
@@ -152,8 +152,10 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   return json(mission)
 }
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const user = await getUser(request)
+export const action = async (args: ActionFunctionArgs) => {
+  const { userId } = await requireAuth(args)
+
+  const { params, request } = args
 
   const { data, error } = await validator.validate(await request.formData())
 
@@ -172,7 +174,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   const game = await prisma.game.findUnique({
     where: {
       id: gameId,
-      userId: user.id
+      userId
     },
     select: {
       missions: {
@@ -502,13 +504,19 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
   // determine if we need to choose side missions
   const activeSideMissions = mission.game.missions.filter(
-    m => !m.forced && !m.stage && m.mission.type !== MissionType.STORY && m.id !== mission.id
+    (m) =>
+      !m.forced &&
+      !m.stage &&
+      m.mission.type !== MissionType.STORY &&
+      m.id !== mission.id
   )
   const rebelSideMissions = activeSideMissions.filter(
-    m => m.mission.type !== MissionType.IMPERIAL
+    (m) => m.mission.type !== MissionType.IMPERIAL
   )
   const needSideMission = 2 - rebelSideMissions.length > 0
-  const nextStage = needSideMission ? MissionStage.CHOOSE_MISSION : MissionStage.REBEL_BUY
+  const nextStage = needSideMission
+    ? MissionStage.CHOOSE_MISSION
+    : MissionStage.REBEL_BUY
 
   await prisma.game.update({
     where: {
@@ -561,9 +569,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
                   },
                   data: {
                     // Forced missions don't have their own buy stages
-                    stage: mission.forced
-                      ? MissionStage.RESOLVED
-                      : nextStage,
+                    stage: mission.forced ? MissionStage.RESOLVED : nextStage,
                     winner: data.win
                   }
                 },
@@ -683,9 +689,10 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     return redirect(`/games/${gameId}`)
   }
 
-  const redirectTo = nextStage === MissionStage.CHOOSE_MISSION
-    ? `/games/${gameId}/resolve/${params.mission}/draw`
-    : `/games/${gameId}/resolve/${params.mission}/buy/rebel`
+  const redirectTo =
+    nextStage === MissionStage.CHOOSE_MISSION
+      ? `/games/${gameId}/resolve/${params.mission}/draw`
+      : `/games/${gameId}/resolve/${params.mission}/buy/rebel`
 
   return redirect(redirectTo)
 }
diff --git a/app/routes/_app.games.$game.resolve.$mission.buy.rebel.tsx b/app/routes/_app.games.$game.resolve.$mission.buy.rebel.tsx
index a77559d..8c3e965 100644
--- a/app/routes/_app.games.$game.resolve.$mission.buy.rebel.tsx
+++ b/app/routes/_app.games.$game.resolve.$mission.buy.rebel.tsx
@@ -12,8 +12,8 @@ import { Fragment } from 'react'
 import SubmitButton from '~/components/SubmitButton'
 import { z } from 'zod'
 import BuyItemCard from '~/components/BuyItemCard'
-import { getUser } from '~/services/auth.server'
 import { getSellPrice } from '~/utils/sellPrice'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 const validator = withZod(
   zfd.formData({
@@ -41,12 +41,12 @@ const validator = withZod(
   })
 )
 
-export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
 
   const forcedMission = await prisma.gameMission.findFirst({
     where: {
-      gameId: parseInt(params.game!, 10),
+      gameId: parseInt(args.params.game!, 10),
       stage: {
         equals: null
       },
@@ -55,12 +55,12 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   })
 
   if (forcedMission) {
-    return redirect(`/games/${params.game}`)
+    return redirect(`/games/${args.params.game}`)
   }
 
   const mission = await prisma.gameMission.findUnique({
     where: {
-      id: parseInt(params.mission!, 10),
+      id: parseInt(args.params.mission!, 10),
       stage: MissionStage.REBEL_BUY,
       // Forced missions don't get their own buy stage
       forced: false
@@ -83,9 +83,21 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   })
 
   if (!mission) {
-    return redirect(`/games/${params.game}`)
+    return redirect(`/games/${args.params.game}`)
   }
 
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId
+    },
+    include: {
+      collection: {
+        select: {
+          id: true
+        }
+      }
+    }
+  })
   const items = await prisma.item.findMany({
     where: {
       tier: {
@@ -105,7 +117,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
       ],
       games: {
         none: {
-          id: parseInt(params.game!, 10)
+          id: parseInt(args.params.game!, 10)
         }
       }
     }
diff --git a/app/routes/_app.games.$game.tsx b/app/routes/_app.games.$game.tsx
index a476cac..720a430 100644
--- a/app/routes/_app.games.$game.tsx
+++ b/app/routes/_app.games.$game.tsx
@@ -6,17 +6,17 @@ import {
   useLocation,
   useParams
 } from '@remix-run/react'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
 import { ArrowUturnLeftIcon } from '@heroicons/react/24/outline'
+import { requireAuth } from '~/utils/requireAuth.server'
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
 
-  if (!params.game) {
+  if (!args.params.game) {
     return redirect('/games')
   }
-  const gameId = parseInt(params.game, 10)
+  const gameId = parseInt(args.params.game, 10)
   if (isNaN(gameId)) {
     return redirect('/games')
   }
@@ -24,7 +24,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const game = await prisma.game.findUnique({
     where: {
       id: gameId,
-      userId: user.id
+      userId
     },
     select: {
       name: true,
diff --git a/app/routes/_app.games._index.tsx b/app/routes/_app.games._index.tsx
index 03c3255..1e7421c 100644
--- a/app/routes/_app.games._index.tsx
+++ b/app/routes/_app.games._index.tsx
@@ -1,13 +1,13 @@
 import { json, type LoaderFunctionArgs } from '@vercel/remix'
 import { Link, useLoaderData } from '@remix-run/react'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
+import { requireAuth } from '~/utils/requireAuth.server'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
   const games = await prisma.game.findMany({
     where: {
-      userId: user.id
+      userId
     },
     include: {
       campaign: true,
diff --git a/app/routes/_app.games.new.tsx b/app/routes/_app.games.new.tsx
index df8f78a..9db1f3a 100644
--- a/app/routes/_app.games.new.tsx
+++ b/app/routes/_app.games.new.tsx
@@ -3,7 +3,6 @@ import { json, redirect } from '@vercel/remix'
 import { useLoaderData } from '@remix-run/react'
 import type { Dispatch, SetStateAction } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'
-import { getUser } from '~/services/auth.server'
 import { prisma } from '~/services/db.server'
 import { zfd } from 'zod-form-data'
 import { z } from 'zod'
@@ -16,6 +15,7 @@ import SelectInput from '~/components/SelectInput'
 import SubmitButton from '~/components/SubmitButton'
 import GrayMissionsInput from '~/components/GrayMissionsInput'
 import { randomIndex } from '~/utils/randomIndex'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 const validator = withZod(
   zfd.formData({
@@ -56,8 +56,21 @@ const validator = withZod(
   })
 )
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
+export const loader = async (args: LoaderFunctionArgs) => {
+  const { userId } = await requireAuth(args)
+
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId
+    },
+    include: {
+      collection: {
+        select: {
+          id: true
+        }
+      }
+    }
+  })
   const expansions = await prisma.expansion.findMany({
     where: {
       OR: [
@@ -66,7 +79,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
         },
         {
           id: {
-            in: user.collection?.map(({ id }) => id) ?? []
+            in: user?.collection.map(({ id }) => id)
           }
         }
       ]
@@ -135,15 +148,29 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   })
 }
 
-export const action = async ({ request }: ActionFunctionArgs) => {
-  const user = await getUser(request)
+export const action = async (args: ActionFunctionArgs) => {
+  const { userId } = await requireAuth(args)
 
-  const { data, error } = await validator.validate(await request.formData())
+  const { data, error } = await validator.validate(
+    await args.request.formData()
+  )
 
   if (error) {
     return validationError(error)
   }
 
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId
+    },
+    include: {
+      collection: {
+        select: {
+          id: true
+        }
+      }
+    }
+  })
   const campaign = await prisma.campaign.findUnique({
     where: {
       id: data.campaign,
diff --git a/app/routes/_app.profile.tsx b/app/routes/_app.profile.tsx
deleted file mode 100644
index f0bb95d..0000000
--- a/app/routes/_app.profile.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { LoaderFunctionArgs } from '@vercel/remix'
-import { json } from '@vercel/remix'
-import { useLoaderData } from '@remix-run/react'
-import { getUser } from '~/services/auth.server'
-import { getAvatarUrls } from '~/utils/avatar'
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const user = await getUser(request)
-  return json({ user })
-}
-
-const Profile = () => {
-  const data = useLoaderData<typeof loader>()
-
-  const avatarUrls = getAvatarUrls(data.user, 128)
-
-  return (
-    <div>
-      <h1>Profile</h1>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-      <picture>
-        {avatarUrls.webp && <source src={avatarUrls.webp} />}
-        <img src={avatarUrls.gif ?? avatarUrls.png} alt="" />
-      </picture>
-    </div>
-  )
-}
-
-export default Profile
diff --git a/app/routes/_app.tsx b/app/routes/_app.tsx
index 4f440cf..1401ca1 100644
--- a/app/routes/_app.tsx
+++ b/app/routes/_app.tsx
@@ -1,15 +1,12 @@
 import type { LoaderFunction } from '@vercel/remix'
-import { Outlet, redirect } from '@remix-run/react'
+import { Outlet } from '@remix-run/react'
 import Footer from '~/components/Footer'
 import AppNav from '~/components/AppNav'
-import { getAuth } from '@clerk/remix/ssr.server'
 import { SignedIn } from '@clerk/remix'
+import { requireAuth } from '~/utils/requireAuth.server'
 
 export const loader: LoaderFunction = async (args) => {
-  const { userId } = await getAuth(args)
-  if (!userId) {
-    return redirect(`/sign-in?redirect_url=${args.request.url}`)
-  }
+  await requireAuth(args)
   return {}
 }
 
diff --git a/app/routes/api.webhooks.ts b/app/routes/api.webhooks.ts
index 70c62c7..5a2731a 100644
--- a/app/routes/api.webhooks.ts
+++ b/app/routes/api.webhooks.ts
@@ -3,21 +3,45 @@ import { Webhook } from 'svix'
 import { prisma } from '~/services/db.server'
 
 const deleteUser = async (userId: string) => {
-  await prisma.user.delete({
-    where: {
-      id: userId
+  try {
+    await prisma.user.delete({
+      where: {
+        id: userId
+      }
+    })
+  } catch (error) {
+    const found = await prisma.user.findUnique({
+      where: {
+        id: userId
+      }
+    })
+    if (found) {
+      console.error(`Error deleting user ${userId}:`, error)
+      return new Response(null, { status: 500 })
     }
-  })
+  }
 
   return new Response(null, { status: 204 })
 }
 
 const createUser = async (userId: string) => {
-  await prisma.user.create({
-    data: {
-      id: userId
+  try {
+    await prisma.user.create({
+      data: {
+        id: userId
+      }
+    })
+  } catch (error) {
+    const found = await prisma.user.findUnique({
+      where: {
+        id: userId
+      }
+    })
+    if (!found) {
+      console.error(`Error creating user ${userId}:`, error)
+      return new Response(null, { status: 500 })
     }
-  })
+  }
 
   return new Response(null, { status: 201 })
 }
diff --git a/app/routes/auth.discord.callback.tsx b/app/routes/auth.discord.callback.tsx
deleted file mode 100644
index 94d53da..0000000
--- a/app/routes/auth.discord.callback.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { LoaderFunction } from '@vercel/remix'
-import { authenticator } from '~/services/auth.server'
-
-export const loader: LoaderFunction = async ({ request }) => {
-  return authenticator.authenticate('discord', request, {
-    successRedirect: '/games',
-    failureRedirect: '/login'
-  })
-}
diff --git a/app/routes/auth.discord.tsx b/app/routes/auth.discord.tsx
deleted file mode 100644
index ec69500..0000000
--- a/app/routes/auth.discord.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { redirect } from '@vercel/remix'
-import type { ActionFunction, LoaderFunction } from '@vercel/remix'
-import { authenticator } from '~/services/auth.server'
-
-export const loader: LoaderFunction = async () => redirect('/login')
-
-export const action: ActionFunction = async ({ request }) => {
-  return authenticator.authenticate('discord', request)
-}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
deleted file mode 100644
index 29145b3..0000000
--- a/app/routes/login.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { json, type LoaderFunction } from '@vercel/remix'
-import { Form, useLoaderData } from '@remix-run/react'
-import { useState } from 'react'
-import { authenticator } from '~/services/auth.server'
-import { getSession } from '~/services/session.server'
-import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
-
-export const loader: LoaderFunction = async ({ request }) => {
-  await authenticator.isAuthenticated(request, {
-    successRedirect: '/games'
-  })
-  const session = await getSession(request.headers.get('cookie'))
-  const error = session.get(authenticator.sessionErrorKey)
-  console.log(error)
-  return json({ error })
-}
-
-const Login = () => {
-  const { error } = useLoaderData<typeof loader>()
-  const [showError, setShowError] = useState(!!error)
-
-  return (
-    <div className="card card-bordered card-compact w-fit max-w-full bg-base-100 mx-auto">
-      <div className="card-body items-center">
-        <Form action="/auth/discord" method="post">
-          <button
-            className="flex items-center bg-white border border-gray-300 rounded-lg shadow-md px-6 py-2 text-sm font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-            type="submit"
-          >
-            <svg
-              className="h-6 w-6 mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-              width="800px"
-              height="800px"
-              viewBox="0 -28.5 256 256"
-              version="1.1"
-              preserveAspectRatio="xMidYMid"
-            >
-              <g>
-                <path
-                  d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
-                  fill="#5865F2"
-                  fillRule="nonzero"
-                ></path>
-              </g>
-            </svg>
-            <span>Log In with Discord</span>
-          </button>
-        </Form>
-        {showError && (
-          <div
-            role="alert"
-            className="alert alert-warning p-2 items-center flex"
-          >
-            <div className="flex flex-nowrap gap-4 items-center">
-              <ExclamationTriangleIcon className="stroke-current shrink-0 h-6 w-6" />
-              <span>There was a problem logging in. Try again.</span>
-            </div>
-            <button
-              onClick={() => setShowError(false)}
-              className="btn btn-sm btn-ghost btn-circle"
-              aria-label="Dismiss"
-            >
-              <XMarkIcon className="stroke-current h-6 w-6" />
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default Login
diff --git a/app/routes/logout.tsx b/app/routes/logout.tsx
deleted file mode 100644
index c081b5e..0000000
--- a/app/routes/logout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { LoaderFunction } from '@vercel/remix'
-import { authenticator } from '~/services/auth.server'
-
-export const loader: LoaderFunction = async ({ request }) => {
-  await authenticator.logout(request, {
-    redirectTo: '/'
-  })
-}
diff --git a/app/services/auth.server.ts b/app/services/auth.server.ts
deleted file mode 100644
index 8d59a3b..0000000
--- a/app/services/auth.server.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Authenticator } from 'remix-auth'
-import { DiscordStrategy } from 'remix-auth-discord'
-import { sessionStorage } from '~/services/session.server'
-import { prisma } from '~/services/db.server'
-import type { User } from '@prisma/client'
-
-export const authenticator = new Authenticator<
-  User & {
-    collection: {
-      id: number
-    }[]
-  }
->(sessionStorage)
-
-const discordStrategy = new DiscordStrategy(
-  {
-    clientID: process.env.DISCORD_CLIENT_ID!,
-    clientSecret: process.env.DISCORD_CLIENT_SECRET!,
-    callbackURL: process.env.DISCORD_CALLBACK_URL!
-  },
-  async ({ profile }) => {
-    const {
-      id: discordId,
-      displayName,
-      __json: { avatar, email, discriminator }
-    } = profile
-    let user = await prisma.user.findUnique({
-      where: { discordId },
-      include: {
-        collection: {
-          select: {
-            id: true
-          }
-        }
-      }
-    })
-    if (!user) {
-      user = await prisma.user.create({
-        data: {
-          discordId,
-          displayName,
-          discriminator,
-          email,
-          avatar
-        },
-        include: {
-          collection: {
-            select: {
-              id: true
-            }
-          }
-        }
-      })
-    }
-    return user
-  }
-)
-
-authenticator.use(discordStrategy)
-
-export const getUser = (request: Request) =>
-  authenticator.isAuthenticated(request, { failureRedirect: '/login' })
diff --git a/app/services/session.server.ts b/app/services/session.server.ts
deleted file mode 100644
index 96ad747..0000000
--- a/app/services/session.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createCookieSessionStorage } from '@vercel/remix'
-
-export const sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: '_session',
-    sameSite: 'lax',
-    path: '/',
-    httpOnly: true,
-    secrets: [process.env.SESSION_SECRET!],
-    secure: process.env.NODE_ENV === 'production'
-  }
-})
-
-export const { getSession, commitSession, destroySession } = sessionStorage
diff --git a/app/utils/avatar.ts b/app/utils/avatar.ts
deleted file mode 100644
index 7489c2e..0000000
--- a/app/utils/avatar.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Prisma } from '@prisma/client'
-
-const cdn = 'https://cdn.discordapp.com'
-
-const getDefaultAvatarIndex = (user: Prisma.UserGetPayload<null>) => {
-  const newUsernameSystem = user.discriminator === '0'
-  const index = newUsernameSystem
-    ? (parseInt(user.discordId, 10) >> 22) % 6
-    : parseInt(user.discriminator) % 5
-  return index
-}
-
-type AvatarUrls = {
-  gif?: string
-  png?: string
-  webp?: string
-}
-
-export const getAvatarUrls = (
-  user: Prisma.UserGetPayload<null>,
-  size = 32
-): AvatarUrls =>
-  user.avatar?.startsWith('a_')
-    ? {
-        gif: `${cdn}/avatars/${user.discordId}/${user.avatar}.gif?size=${size}`
-      }
-    : user.avatar
-      ? {
-          webp: `${cdn}/avatars/${user.discordId}/${user.avatar}.webp?size=${size}`,
-          png: `${cdn}/avatars/${user.discordId}/${user.avatar}.png?size=${size}`
-        }
-      : { png: `${cdn}/embed/avatars/${getDefaultAvatarIndex(user)}.png` }
diff --git a/app/utils/requireAuth.server.ts b/app/utils/requireAuth.server.ts
new file mode 100644
index 0000000..f6b6df2
--- /dev/null
+++ b/app/utils/requireAuth.server.ts
@@ -0,0 +1,13 @@
+import { getAuth } from '@clerk/remix/ssr.server'
+import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'
+import { redirect } from '@remix-run/node'
+
+export const requireAuth = async (
+  args: LoaderFunctionArgs | ActionFunctionArgs
+) => {
+  const { userId, ...user } = await getAuth(args)
+  if (!userId) {
+    throw redirect(`/sign-in?redirect_url=${args.request.url}`)
+  }
+  return { userId, ...user }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 2516a23..9fc330b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,9 @@ installGlobals()
 
 const { resolve } = createRequire(import.meta.url)
 const prismaClient = `prisma${path.sep}client`
-const prismaClientIndexBrowser = resolve('@prisma/client/index-browser').replace(`@${prismaClient}`, `.${prismaClient}`)
+const prismaClientIndexBrowser = resolve(
+  '@prisma/client/index-browser'
+).replace(`@${prismaClient}`, `.${prismaClient}`)
 
 export default defineConfig({
   server: {
@@ -25,7 +27,10 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '.prisma/client/index-browser': path.relative(__dirname, prismaClientIndexBrowser)
+      '.prisma/client/index-browser': path.relative(
+        __dirname,
+        prismaClientIndexBrowser
+      )
     }
   }
 })