diff --git a/.env.example b/.env.example
index d117323c2..46659864a 100644
--- a/.env.example
+++ b/.env.example
@@ -3,6 +3,7 @@ DATABASE_PATH="./prisma/data.db"
 DATABASE_URL="file:./data.db?connection_limit=1"
 CACHE_DATABASE_PATH="./other/cache.db"
 SESSION_SECRET="super-duper-s3cret"
+HONEYPOT_SECRET="super-duper-s3cret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
 SENTRY_DSN="your-dsn"
diff --git a/app/root.tsx b/app/root.tsx
index edede0c33..46e83bf27 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -25,6 +25,8 @@ import {
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
 import { useRef } from 'react'
+import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'
+import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { Confetti } from './components/confetti.tsx'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
@@ -46,8 +48,10 @@ import tailwindStyleSheetUrl from './styles/tailwind.css'
 import { authenticator, getUserId } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx'
 import { getConfetti } from './utils/confetti.server.ts'
+import { csrf } from './utils/csrf.server.ts'
 import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
+import { honeypot } from './utils/honeypot.server.ts'
 import { combineHeaders, getDomainUrl, getUserImgSrc } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
 import { useRequestInfo } from './utils/request-info.ts'
@@ -130,6 +134,8 @@ export async function loader({ request }: DataFunctionArgs) {
 	}
 	const { toast, headers: toastHeaders } = await getToast(request)
 	const { confettiId, headers: confettiHeaders } = getConfetti(request)
+	const honeyProps = honeypot.getInputProps()
+	const [csrfToken, csrfCookieHeader] = await csrf.commitToken()
 
 	return json(
 		{
@@ -145,12 +151,15 @@ export async function loader({ request }: DataFunctionArgs) {
 			ENV: getEnv(),
 			toast,
 			confettiId,
+			honeyProps,
+			csrfToken,
 		},
 		{
 			headers: combineHeaders(
 				{ 'Server-Timing': timings.toString() },
 				toastHeaders,
 				confettiHeaders,
+				csrfCookieHeader ? { 'set-cookie': csrfCookieHeader } : null,
 			),
 		},
 	)
@@ -276,7 +285,19 @@ function App() {
 		</Document>
 	)
 }
-export default withSentry(App)
+
+function AppWithProviders() {
+	const data = useLoaderData<typeof loader>()
+	return (
+		<AuthenticityTokenProvider token={data.csrfToken}>
+			<HoneypotProvider {...data.honeyProps}>
+				<App />
+			</HoneypotProvider>
+		</AuthenticityTokenProvider>
+	)
+}
+
+export default withSentry(AppWithProviders)
 
 function UserDropdown() {
 	const user = useUser()
diff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
index 82ad1aa21..85e939a4c 100644
--- a/app/routes/_auth+/forgot-password.tsx
+++ b/app/routes/_auth+/forgot-password.tsx
@@ -8,12 +8,16 @@ import {
 	type MetaFunction,
 } from '@remix-run/node'
 import { Link, useFetcher } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { sendEmail } from '#app/utils/email.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { EmailSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.tsx'
 
@@ -23,6 +27,8 @@ const ForgotPasswordSchema = z.object({
 
 export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
+	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: ForgotPasswordSchema.superRefine(async (data, ctx) => {
 			const user = await prisma.user.findFirst({
@@ -136,6 +142,8 @@ export default function ForgotPasswordRoute() {
 				</div>
 				<div className="mx-auto mt-16 min-w-[368px] max-w-sm">
 					<forgotPassword.Form method="POST" {...form.props}>
+						<AuthenticityTokenInput />
+						<HoneypotInputs />
 						<div>
 							<Field
 								labelProps={{
diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index ea7716f6b..6174b5ca0 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -7,6 +7,8 @@ import {
 	type MetaFunction,
 } from '@remix-run/node'
 import { Form, Link, useActionData, useSearchParams } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -24,7 +26,9 @@ import {
 	ProviderConnectionForm,
 	providerNames,
 } from '#app/utils/connections.tsx'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import {
 	combineResponseInits,
 	invariant,
@@ -195,6 +199,8 @@ export async function loader({ request }: DataFunctionArgs) {
 export async function action({ request }: DataFunctionArgs) {
 	await requireAnonymous(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
+	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: intent =>
 			LoginFormSchema.transform(async (data, ctx) => {
@@ -266,6 +272,8 @@ export default function LoginPage() {
 				<div>
 					<div className="mx-auto w-full max-w-md px-8">
 						<Form method="POST" {...form.props}>
+							<AuthenticityTokenInput />
+							<HoneypotInputs />
 							<Field
 								labelProps={{ children: 'Username' }}
 								inputProps={{
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
index 1d9d17473..442f05f69 100644
--- a/app/routes/_auth+/onboarding.tsx
+++ b/app/routes/_auth+/onboarding.tsx
@@ -12,6 +12,8 @@ import {
 	useLoaderData,
 	useSearchParams,
 } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
@@ -19,7 +21,9 @@ import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireAnonymous, sessionKey, signup } from '#app/utils/auth.server.ts'
 import { redirectWithConfetti } from '#app/utils/confetti.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { invariant, useIsPending } from '#app/utils/misc.tsx'
 import { authSessionStorage } from '#app/utils/session.server.ts'
 import {
@@ -64,6 +68,8 @@ export async function loader({ request }: DataFunctionArgs) {
 export async function action({ request }: DataFunctionArgs) {
 	const email = await requireOnboardingEmail(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
+	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: intent =>
 			SignupFormSchema.superRefine(async (data, ctx) => {
@@ -165,6 +171,8 @@ export default function SignupRoute() {
 					className="mx-auto min-w-[368px] max-w-sm"
 					{...form.props}
 				>
+					<AuthenticityTokenInput />
+					<HoneypotInputs />
 					<Field
 						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
 						inputProps={{
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
index cefae190f..bf84eb7b8 100644
--- a/app/routes/_auth+/reset-password.tsx
+++ b/app/routes/_auth+/reset-password.tsx
@@ -19,10 +19,7 @@ import { type VerifyFunctionArgs } from './verify.tsx'
 
 const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
 
-export async function handleVerification({
-	request,
-	submission,
-}: VerifyFunctionArgs) {
+export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	invariant(submission.value, 'submission.value should be defined by now')
 	const target = submission.value.target
 	const user = await prisma.user.findFirst({
diff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx
index 01bd75a6a..825289576 100644
--- a/app/routes/_auth+/signup.tsx
+++ b/app/routes/_auth+/signup.tsx
@@ -8,6 +8,8 @@ import {
 	type MetaFunction,
 } from '@remix-run/node'
 import { Form, useActionData, useSearchParams } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
@@ -16,8 +18,10 @@ import {
 	ProviderConnectionForm,
 	providerNames,
 } from '#app/utils/connections.tsx'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { sendEmail } from '#app/utils/email.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { EmailSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.tsx'
@@ -28,6 +32,10 @@ const SignupSchema = z.object({
 
 export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
+
+	await validateCSRF(formData, request.headers)
+	checkHoneypot(formData)
+
 	const submission = await parse(formData, {
 		schema: SignupSchema.superRefine(async (data, ctx) => {
 			const existingUser = await prisma.user.findUnique({
@@ -131,6 +139,8 @@ export default function SignupRoute() {
 			</div>
 			<div className="mx-auto mt-16 min-w-[368px] max-w-sm">
 				<Form method="POST" {...form.props}>
+					<AuthenticityTokenInput />
+					<HoneypotInputs />
 					<Field
 						labelProps={{
 							htmlFor: fields.email.id,
diff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx
index c6405a66b..8d41bf872 100644
--- a/app/routes/_auth+/verify.tsx
+++ b/app/routes/_auth+/verify.tsx
@@ -3,6 +3,8 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { generateTOTP, verifyTOTP } from '@epic-web/totp'
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import { Form, useActionData, useSearchParams } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
+import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
@@ -12,7 +14,9 @@ import { handleVerification as handleChangeEmailVerification } from '#app/routes
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { type twoFAVerifyVerificationType } from '#app/routes/settings+/profile.two-factor.verify.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { ensurePrimary } from '#app/utils/litefs.server.ts'
 import { getDomainUrl, useIsPending } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
@@ -39,7 +43,10 @@ const VerifySchema = z.object({
 })
 
 export async function action({ request }: DataFunctionArgs) {
-	return validateRequest(request, await request.formData())
+	const formData = await request.formData()
+	checkHoneypot(formData)
+	await validateCSRF(formData, request.headers)
+	return validateRequest(request, formData)
 }
 
 export function getRedirectToUrl({
@@ -277,6 +284,8 @@ export default function VerifyRoute() {
 				</div>
 				<div className="flex w-full gap-2">
 					<Form method="POST" {...form.props} className="flex-1">
+						<AuthenticityTokenInput />
+						<HoneypotInputs />
 						<Field
 							labelProps={{
 								htmlFor: fields[codeQueryParam].id,
diff --git a/app/routes/settings+/profile.change-email.tsx b/app/routes/settings+/profile.change-email.tsx
index ff01997cf..a5f540422 100644
--- a/app/routes/settings+/profile.change-email.tsx
+++ b/app/routes/settings+/profile.change-email.tsx
@@ -4,6 +4,7 @@ import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Form, useActionData, useLoaderData } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -14,6 +15,7 @@ import {
 	type VerifyFunctionArgs,
 } from '#app/routes/_auth+/verify.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { sendEmail } from '#app/utils/email.server.ts'
 import { invariant, useIsPending } from '#app/utils/misc.tsx'
@@ -98,6 +100,7 @@ export async function loader({ request }: DataFunctionArgs) {
 export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
 	const submission = await parse(formData, {
 		schema: ChangeEmailSchema.superRefine(async (data, ctx) => {
 			const existingUser = await prisma.user.findUnique({
@@ -225,6 +228,7 @@ export default function ChangeEmailIndex() {
 			</p>
 			<div className="mx-auto mt-5 max-w-sm">
 				<Form method="POST" {...form.props}>
+					<AuthenticityTokenInput />
 					<Field
 						labelProps={{ children: 'New Email' }}
 						inputProps={conform.input(fields.email)}
diff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
index a8c24e3c5..544d8a588 100644
--- a/app/routes/settings+/profile.index.tsx
+++ b/app/routes/settings+/profile.index.tsx
@@ -3,12 +3,14 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import {
 	getUserImgSrc,
@@ -82,6 +84,7 @@ const deleteDataActionIntent = 'delete-data'
 export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
 	const intent = formData.get('intent')
 	switch (intent) {
 		case profileUpdateActionIntent: {
@@ -234,6 +237,7 @@ function UpdateProfile() {
 
 	return (
 		<fetcher.Form method="POST" {...form.props}>
+			<AuthenticityTokenInput />
 			<div className="grid grid-cols-6 gap-x-10">
 				<Field
 					className="col-span-3"
@@ -301,6 +305,7 @@ function SignOutOfSessions() {
 		<div>
 			{otherSessionsCount ? (
 				<fetcher.Form method="POST">
+					<AuthenticityTokenInput />
 					<StatusButton
 						{...dc.getButtonProps({
 							type: 'submit',
@@ -344,6 +349,7 @@ function DeleteData() {
 	return (
 		<div>
 			<fetcher.Form method="POST">
+				<AuthenticityTokenInput />
 				<StatusButton
 					{...dc.getButtonProps({
 						type: 'submit',
diff --git a/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx
index ea1575352..91ede00f0 100644
--- a/app/routes/settings+/profile.password.tsx
+++ b/app/routes/settings+/profile.password.tsx
@@ -3,6 +3,7 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Form, Link, useActionData } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -13,6 +14,7 @@ import {
 	requireUserId,
 	verifyUserPassword,
 } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
@@ -60,6 +62,7 @@ export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
 	await requirePassword(userId)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
 	const submission = await parse(formData, {
 		async: true,
 		schema: ChangePasswordForm.superRefine(
@@ -129,6 +132,7 @@ export default function ChangePasswordRoute() {
 
 	return (
 		<Form method="POST" {...form.props} className="mx-auto max-w-md">
+			<AuthenticityTokenInput />
 			<Field
 				labelProps={{ children: 'Current Password' }}
 				inputProps={conform.input(fields.currentPassword, { type: 'password' })}
diff --git a/app/routes/settings+/profile.photo.tsx b/app/routes/settings+/profile.photo.tsx
index eff8c8933..ad5cab75d 100644
--- a/app/routes/settings+/profile.photo.tsx
+++ b/app/routes/settings+/profile.photo.tsx
@@ -15,12 +15,14 @@ import {
 	useNavigation,
 } from '@remix-run/react'
 import { useState } from 'react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { ErrorList } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import {
 	getUserImgSrc,
@@ -72,6 +74,7 @@ export async function action({ request }: DataFunctionArgs) {
 		request,
 		unstable_createMemoryUploadHandler({ maxPartSize: MAX_SIZE }),
 	)
+	await validateCSRF(formData, request.headers)
 
 	const submission = await parse(formData, {
 		schema: PhotoFormSchema.transform(async data => {
@@ -151,6 +154,7 @@ export default function PhotoRoute() {
 				onReset={() => setNewImageSrc(null)}
 				{...form.props}
 			>
+				<AuthenticityTokenInput />
 				<img
 					src={
 						newImageSrc ?? (data.user ? getUserImgSrc(data.user.image?.id) : '')
diff --git a/app/routes/settings+/profile.two-factor.disable.tsx b/app/routes/settings+/profile.two-factor.disable.tsx
index b6e5d2552..89282877c 100644
--- a/app/routes/settings+/profile.two-factor.disable.tsx
+++ b/app/routes/settings+/profile.two-factor.disable.tsx
@@ -1,10 +1,12 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireRecentVerification } from '#app/routes/_auth+/verify.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { useDoubleCheck } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
@@ -23,6 +25,7 @@ export async function loader({ request }: DataFunctionArgs) {
 
 export async function action({ request }: DataFunctionArgs) {
 	await requireRecentVerification(request)
+	await validateCSRF(await request.formData(), request.headers)
 	const userId = await requireUserId(request)
 	await prisma.verification.delete({
 		where: { target_type: { target: userId, type: twoFAVerificationType } },
@@ -39,7 +42,8 @@ export default function TwoFactorDisableRoute() {
 
 	return (
 		<div className="mx-auto max-w-sm">
-			<disable2FAFetcher.Form method="POST" preventScrollReset>
+			<disable2FAFetcher.Form method="POST">
+				<AuthenticityTokenInput />
 				<p>
 					Disabling two factor authentication is not recommended. However, if
 					you would like to do so, click here:
diff --git a/app/routes/settings+/profile.two-factor.index.tsx b/app/routes/settings+/profile.two-factor.index.tsx
index c8e90b42b..46c8f74b5 100644
--- a/app/routes/settings+/profile.two-factor.index.tsx
+++ b/app/routes/settings+/profile.two-factor.index.tsx
@@ -2,9 +2,11 @@ import { generateTOTP } from '@epic-web/totp'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 import { twoFAVerifyVerificationType } from './profile.two-factor.verify.tsx'
@@ -24,6 +26,7 @@ export async function loader({ request }: DataFunctionArgs) {
 
 export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
+	await validateCSRF(await request.formData(), request.headers)
 	const { otp: _otp, ...config } = generateTOTP()
 	const verificationData = {
 		...config,
@@ -73,7 +76,8 @@ export default function TwoFactorRoute() {
 						</a>{' '}
 						to log in.
 					</p>
-					<enable2FAFetcher.Form method="POST" preventScrollReset>
+					<enable2FAFetcher.Form method="POST">
+						<AuthenticityTokenInput />
 						<StatusButton
 							type="submit"
 							name="intent"
diff --git a/app/routes/settings+/profile.two-factor.verify.tsx b/app/routes/settings+/profile.two-factor.verify.tsx
index 896ae2a0c..10f66cfe5 100644
--- a/app/routes/settings+/profile.two-factor.verify.tsx
+++ b/app/routes/settings+/profile.two-factor.verify.tsx
@@ -10,12 +10,14 @@ import {
 	useNavigation,
 } from '@remix-run/react'
 import * as QRCode from 'qrcode'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { isCodeValid } from '#app/routes/_auth+/verify.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { getDomainUrl, useIsPending } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
@@ -71,6 +73,7 @@ export async function loader({ request }: DataFunctionArgs) {
 export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
 
 	const submission = await parse(formData, {
 		schema: () =>
@@ -172,6 +175,7 @@ export default function TwoFactorRoute() {
 				</p>
 				<div className="flex w-full max-w-xs flex-col justify-center gap-4">
 					<Form method="POST" {...form.props} className="flex-1">
+						<AuthenticityTokenInput />
 						<Field
 							labelProps={{
 								htmlFor: fields.code.id,
diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
index 712e97bc3..5a1b14b86 100644
--- a/app/routes/users+/$username_+/__note-editor.tsx
+++ b/app/routes/users+/$username_+/__note-editor.tsx
@@ -19,6 +19,7 @@ import {
 } from '@remix-run/node'
 import { Form, useFetcher } from '@remix-run/react'
 import { useRef, useState } from 'react'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
@@ -29,6 +30,7 @@ import { Label } from '#app/components/ui/label.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { Textarea } from '#app/components/ui/textarea.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn, getNoteImgSrc } from '#app/utils/misc.tsx'
 
@@ -78,6 +80,7 @@ export async function action({ request }: DataFunctionArgs) {
 		request,
 		createMemoryUploadHandler({ maxPartSize: MAX_UPLOAD_SIZE }),
 	)
+	await validateCSRF(formData, request.headers)
 
 	const submission = await parse(formData, {
 		schema: NoteEditorSchema.superRefine(async (data, ctx) => {
@@ -209,6 +212,7 @@ export function NoteEditor({
 				{...form.props}
 				encType="multipart/form-data"
 			>
+				<AuthenticityTokenInput />
 				{/*
 					This hidden submit button is here to ensure that when the user hits
 					"enter" on an input field, the primary form function is submitted
@@ -241,7 +245,7 @@ export function NoteEditor({
 									className="relative border-b-2 border-muted-foreground"
 								>
 									<button
-										className="text-foreground-destructive absolute right-0 top-0"
+										className="absolute right-0 top-0 text-foreground-destructive"
 										{...list.remove(fields.images.name, { index })}
 									>
 										<span aria-hidden>
diff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx
index fa2500748..32dc953ea 100644
--- a/app/routes/users+/$username_+/notes.$noteId.tsx
+++ b/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -9,6 +9,7 @@ import {
 	type MetaFunction,
 } from '@remix-run/react'
 import { formatDistanceToNow } from 'date-fns'
+import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
@@ -17,6 +18,7 @@ import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import {
 	getNoteImgSrc,
@@ -68,6 +70,7 @@ const DeleteFormSchema = z.object({
 export async function action({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
+	await validateCSRF(formData, request.headers)
 	const submission = parse(formData, {
 		schema: DeleteFormSchema,
 	})
@@ -168,6 +171,7 @@ export function DeleteNote({ id }: { id: string }) {
 
 	return (
 		<Form method="post" {...form.props}>
+			<AuthenticityTokenInput />
 			<input type="hidden" name="noteId" value={id} />
 			<StatusButton
 				type="submit"
diff --git a/app/utils/csrf.server.ts b/app/utils/csrf.server.ts
new file mode 100644
index 000000000..5edcf91d1
--- /dev/null
+++ b/app/utils/csrf.server.ts
@@ -0,0 +1,23 @@
+import { createCookie } from '@remix-run/node'
+import { CSRF, CSRFError } from 'remix-utils/csrf/server'
+
+const cookie = createCookie('csrf', {
+	path: '/',
+	httpOnly: true,
+	secure: process.env.NODE_ENV === 'production',
+	sameSite: 'lax',
+	secrets: process.env.SESSION_SECRET.split(','),
+})
+
+export const csrf = new CSRF({ cookie })
+
+export async function validateCSRF(formData: FormData, headers: Headers) {
+	try {
+		await csrf.validate(formData, headers)
+	} catch (error) {
+		if (error instanceof CSRFError) {
+			throw new Response('Invalid CSRF token', { status: 403 })
+		}
+		throw error
+	}
+}
diff --git a/app/utils/env.server.ts b/app/utils/env.server.ts
index 4c53cbbf7..0a5dd2aef 100644
--- a/app/utils/env.server.ts
+++ b/app/utils/env.server.ts
@@ -6,6 +6,7 @@ const schema = z.object({
 	DATABASE_URL: z.string(),
 	SESSION_SECRET: z.string(),
 	INTERNAL_COMMAND_TOKEN: z.string(),
+	HONEYPOT_SECRET: z.string(),
 	CACHE_DATABASE_PATH: z.string(),
 	// If you plan on using Sentry, uncomment this line
 	// SENTRY_DSN: z.string(),
diff --git a/app/utils/honeypot.server.ts b/app/utils/honeypot.server.ts
new file mode 100644
index 000000000..86605d791
--- /dev/null
+++ b/app/utils/honeypot.server.ts
@@ -0,0 +1,17 @@
+import { Honeypot, SpamError } from 'remix-utils/honeypot/server'
+
+export const honeypot = new Honeypot({
+	validFromFieldName: process.env.TESTING ? null : undefined,
+	encryptionSeed: process.env.HONEYPOT_SECRET,
+})
+
+export function checkHoneypot(formData: FormData) {
+	try {
+		honeypot.check(formData)
+	} catch (error) {
+		if (error instanceof SpamError) {
+			throw new Response('Form not submitted properly', { status: 400 })
+		}
+		throw error
+	}
+}
diff --git a/docs/decisions/032-csrf.md b/docs/decisions/032-csrf.md
new file mode 100644
index 000000000..f307e7a60
--- /dev/null
+++ b/docs/decisions/032-csrf.md
@@ -0,0 +1,33 @@
+# Cross-Site Request Forgery
+
+Date: 2023-10-11
+
+Status: accepted
+
+## Context
+
+You can learn all about Cross-Site Request Forgery from
+[EpicWeb.dev's forms workshop](https://forms.epicweb.dev/07). The TL;DR idea is
+that a malicious adversary can trick a user into making a request to your server
+that they did not intend to make. This can be used to make requests to your
+server that can do anything that the user can do.
+
+To defend against this attack, we need to ensure that the request is coming from
+a page that we control. We do this by adding a CSRF token to the page and
+checking that the token is present in the request. The token is generated by our
+own server and stored in an HTTP-only cookie. This means that it can't be
+accessed by third parties, but it will be sent with every request to our server.
+We also send that same token within the form submission and then check that the
+token in the form matches the token in the cookie.
+
+Once set up, this is a fairly straightforward thing to do and there are great
+tools to help us do it (`remix-utils` specifically).
+
+## Decision
+
+We'll implement CSRF protection to all our authenticated forms.
+
+## Consequences
+
+This is a tiny bit invasive to the code, but it doesn't add much complexity.
+It's certainly worth the added security.
diff --git a/docs/decisions/033-honeypot.md b/docs/decisions/033-honeypot.md
new file mode 100644
index 000000000..d906e50ce
--- /dev/null
+++ b/docs/decisions/033-honeypot.md
@@ -0,0 +1,35 @@
+# Honeypot Fields
+
+Date: 2023-10-11
+
+Status: accepted
+
+## Context
+
+You can learn all about Honeypot Fields from
+[EpicWeb.dev's forms workshop](https://forms.epicweb.dev/06). The TL;DR idea is
+spam bots go around the internet filling in forms all over the place in hopes of
+getting their spammy links on your site among other things. This causes extra
+load on your server and in some cases can cause you issues. For example, our
+onboarding process sends an email to the user. If a spam bot fills out the form
+with a random email address, we'll send an email to that address and cause
+confusion in the best case or get marked as spam in the worst case.
+
+Most of these spam bots are not very sophisticated and will fill in every field
+on the form (even if those fields are visually hidden). We can use this to our
+advantage by adding a field to the form that is visually hidden and then
+checking that it is empty when the form is submitted. If it is not empty, we
+know that the form was filled out by a spam bot and we can ignore it.
+
+There are great tools to help us accomplish this (`remix-utils` specifically).
+
+## Decision
+
+We'll implement Honeypot Fields to all our public-facing forms. Authenticated
+forms won't need this because they're not accessible to spam bots anyway.
+
+## Consequences
+
+This is a tiny bit invasive to the code, but it doesn't add much complexity.
+It's certainly worth the added benefits to our server (and email
+deliverability).
diff --git a/docs/deployment.md b/docs/deployment.md
index 2211f92a9..5ed13d49f 100644
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -55,12 +55,12 @@ Prior to your first deployment, you'll need to do a few things:
   [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets)
   with the name `FLY_API_TOKEN`.
 
-- Add a `SESSION_SECRET` and `INTERNAL_COMMAND_TOKEN` to your fly app secrets,
-  to do this you can run the following commands:
+- Add a `SESSION_SECRET`, `INTERNAL_COMMAND_TOKEN`, and `HONEYPOT_SECRET` to
+  your fly app secrets, to do this you can run the following commands:
 
   ```sh
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) --app [YOUR_APP_NAME]
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) --app [YOUR_APP_NAME]-staging
+  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) HONEYPOT_SECRET=$(openssl rand -hex 32) --app [YOUR_APP_NAME]
+  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) HONEYPOT_SECRET=$(openssl rand -hex 32) --app [YOUR_APP_NAME]-staging
   ```
 
   > **Note**: If you don't have openssl installed, you can also use
diff --git a/docs/security.md b/docs/security.md
index 15a15bd19..15a4759b6 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -61,14 +61,19 @@ the `dangerouslySetInnerHTML` prop. This is a good thing, but it does mean that
 you need to be careful when rendering HTML. Never pass anything that is
 user-generated to this prop.
 
-## [Cross-Site Request Forgery (CSRF)](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)
-
-There is nothing currently built-into the Epic Stack to prevent CSRF attacks
-currently. If this is a concern for you, we recommend you look at
-[`remix-utils`](https://github.com/sergiodxa/remix-utils) (already installed)
-which has
-[CSRF-related utilities](https://github.com/sergiodxa/remix-utils#csrf) that can
-be used to avoid these issues.
+## [Cross-Site Request Forgery (CSRF)](https://forms.epicweb.dev/07)
+
+The Epic Stack has built-in support to prevent CSRF attacks. We use the
+[`remix-utils`](https://github.com/sergiodxa/remix-utils)
+[CSRF-related utilities](https://github.com/sergiodxa/remix-utils#csrf) to do
+this.
+
+## [Honeypot](https://forms.epicweb.dev/06)
+
+The Epic Stack has built-in support for honeypot fields. We use the
+[`remix-utils`](https://github.com/sergiodxa/remix-utils)
+[honeypot-related utilities](https://github.com/sergiodxa/remix-utils#form-honeypot)
+to do this.
 
 ## Rate Limiting
 
diff --git a/package-lock.json b/package-lock.json
index 596e116fc..9d079782d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "compression": "^1.7.4",
         "confetti-react": "^2.5.0",
         "cross-env": "^7.0.3",
+        "crypto-js": "^4.1.1",
         "date-fns": "^2.30.0",
         "dotenv": "^16.3.1",
         "eslint-plugin-remix-react-routes": "^1.0.5",
@@ -7225,6 +7226,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "node_modules/css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
diff --git a/package.json b/package.json
index f6034e412..546ed9068 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "compression": "^1.7.4",
     "confetti-react": "^2.5.0",
     "cross-env": "^7.0.3",
+    "crypto-js": "^4.1.1",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
     "eslint-plugin-remix-react-routes": "^1.0.5",
diff --git a/remix.init/index.mjs b/remix.init/index.mjs
index 75eed6271..b52defda9 100644
--- a/remix.init/index.mjs
+++ b/remix.init/index.mjs
@@ -3,7 +3,7 @@ import crypto from 'crypto'
 import fs from 'fs/promises'
 import path from 'path'
 import toml from '@iarna/toml'
-import { $, execa } from 'execa'
+import { $ } from 'execa'
 import inquirer from 'inquirer'
 import open from 'open'
 import parseGitHubURL from 'parse-github-url'
@@ -164,8 +164,8 @@ async function setupDeployment({ rootDirectory }) {
 	await $I`fly apps create ${APP_NAME}`
 
 	console.log(`🤫 Setting secrets in apps`)
-	await $I`fly secrets set SESSION_SECRET=${getRandomString32()} INTERNAL_COMMAND_TOKEN=${getRandomString32()} --app ${APP_NAME}-staging`
-	await $I`fly secrets set SESSION_SECRET=${getRandomString32()} INTERNAL_COMMAND_TOKEN=${getRandomString32()} --app ${APP_NAME}`
+	await $I`fly secrets set SESSION_SECRET=${getRandomString32()} INTERNAL_COMMAND_TOKEN=${getRandomString32()} HONEYPOT_SECRET=${getRandomString32()} --app ${APP_NAME}-staging`
+	await $I`fly secrets set SESSION_SECRET=${getRandomString32()} INTERNAL_COMMAND_TOKEN=${getRandomString32()} HONEYPOT_SECRET=${getRandomString32()} --app ${APP_NAME}`
 
 	console.log(
 		`🔊 Creating volumes. Answer "yes" when it warns you about downtime. You can add more volumes later (when you actually start getting paying customers �).`,