latest base

CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contributing
+
+Thanks for your willingness to contribute! Please make sure to check with me
+before doing a bunch of work on something.
+
+## Project setup
+
+If you do need to set the project up locally yourself, feel free to follow these
+instructions:
+
+### System Requirements
+
+- [Node.js](https://nodejs.org/) >= 20.0.0
+- [npm](https://npmjs.com/) >= 8.18.0
+- [git](https://git-scm.com/) >= 2.38.0
+
+### Setup steps
+
+1.  Fork and clone the repo
+2.  Copy `.env.example` into `.env`
+3.  Run `npm install && npm run setup -s` to install dependencies and run
+    validation
+4.  Create a branch for your PR with `git checkout -b pr/your-branch-name`
+
+> Tip: Keep your `main` branch pointing at the original repository and make pull
+> requests from branches on your fork. To do this, run:
+>
+> ```
+> git remote add upstream https://github.com/epicweb-dev/epic-stack.git
+> git fetch upstream
+> git branch --set-upstream-to=upstream/main main
+> ```
+>
+> This will add the original repository as a "remote" called "upstream," Then
+> fetch the git information from that remote, then set your local `main` branch
+> to use the upstream main branch whenever you run `git pull`. Then you can make
+> all of your pull request branches based on this `main` branch. Whenever you
+> want to update your version of `main`, do a regular `git pull`.
+
+If the setup script doesn't work, you can try to run the commands manually:
+
+```sh
+git clone <your-fork>
+cd ./epic-stack
+
+# copy the .env.example to .env
+#   everything's mocked out during development so you shouldn't need to
+#   change any of these values unless you want to hit real environments.
+cp .env.example .env
+
+# Install deps
+npm install
+
+# setup database
+prisma migrate reset --force
+
+# Install playwright browsers
+npm run test:e2e:install
+
+# run build, typecheck, linting
+npm run validate
+```
+
+If that all worked without trouble, you should be able to start development
+with:
+
+```sh
+npm run dev
+```
+
+And open up `http://localhost:3000` and rock!
+
+## Help Needed
+
+There's something to be said for custom code and the ability that grants with
+regard to tuning it to be exactly what you need. But there's also something to
+be said for offloading maintenance onto external dependencies. There are likely
+several bits of code in this codebase that could benefit from externalization.
+There could even be some things that could be improved by existing libraries.
+
+Feel free to take any code from within this project and turn it into an open
+source library (appropriate attribution is appreciated). Then come back and make
+a PR to use your new library.
+
+NOTE: Actual adoption of your library is not guaranteed. Offloading maintenance
+and adaptability is a delicate balance.

LICENSE.md

@@ -0,0 +1,18 @@
+Copyright © 2023 Kent C. Dodds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

app/components/error-boundary.tsx

@@ -39,7 +39,7 @@ export function GeneralErrorBoundary({
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,
 						params,
-					})
+				  })
 				: unexpectedErrorHandler(error)}
 		</div>
 	)

app/root.tsx

@@ -26,7 +26,6 @@ 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 { GeneralErrorBoundary } from './components/error-boundary.tsx'
@@ -47,7 +46,6 @@ import { EpicToaster } from './components/ui/sonner.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css'
 import { getUserId, logout } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx'
-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'
@@ -131,7 +129,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	}
 	const { toast, headers: toastHeaders } = await getToast(request)
 	const honeyProps = honeypot.getInputProps()
-	const [csrfToken, csrfCookieHeader] = await csrf.commitToken()
 
 	return json(
 		{
@@ -147,13 +144,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 			ENV: getEnv(),
 			toast,
 			honeyProps,
-			csrfToken,
 		},
 		{
 			headers: combineHeaders(
 				{ 'Server-Timing': timings.toString() },
 				toastHeaders,
-				csrfCookieHeader ? { 'set-cookie': csrfCookieHeader } : null,
 			),
 		},
 	)
@@ -285,10 +280,10 @@ function App() {
 function Logo() {
 	return (
 		<Link to="/" className="group grid leading-snug">
-			<span className="font-light transition group-hover:-translate-x-1	">
+			<span className="font-light transition group-hover:-translate-x-1">
 				epic
 			</span>
-			<span className="font-bold transition group-hover:translate-x-1	">
+			<span className="font-bold transition group-hover:translate-x-1">
 				notes
 			</span>
 		</Link>
@@ -298,11 +293,9 @@ function Logo() {
 function AppWithProviders() {
 	const data = useLoaderData<typeof loader>()
 	return (
-		<AuthenticityTokenProvider token={data.csrfToken}>
-			<HoneypotProvider {...data.honeyProps}>
-				<App />
-			</HoneypotProvider>
-		</AuthenticityTokenProvider>
+		<HoneypotProvider {...data.honeyProps}>
+			<App />
+		</HoneypotProvider>
 	)
 }
 

app/routes/_auth+/forgot-password.tsx

@@ -8,13 +8,11 @@ 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'
@@ -27,7 +25,6 @@ const ForgotPasswordSchema = z.object({
 
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
-	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: ForgotPasswordSchema.superRefine(async (data, ctx) => {
@@ -142,7 +139,6 @@ export default function ForgotPasswordRoute() {
 				</div>
 				<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
 					<forgotPassword.Form method="POST" {...form.props}>
-						<AuthenticityTokenInput />
 						<HoneypotInputs />
 						<div>
 							<Field

app/routes/_auth+/login.tsx

@@ -9,7 +9,6 @@ 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'
@@ -28,7 +27,6 @@ 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, useIsPending } from '#app/utils/misc.tsx'
@@ -197,7 +195,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export async function action({ request }: ActionFunctionArgs) {
 	await requireAnonymous(request)
 	const formData = await request.formData()
-	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: intent =>
@@ -270,7 +267,6 @@ 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' }}

app/routes/_auth+/onboarding.tsx

@@ -14,15 +14,13 @@ 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'
 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 { validateCSRF } from '#app/utils/csrf.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -70,7 +68,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export async function action({ request }: ActionFunctionArgs) {
 	const email = await requireOnboardingEmail(request)
 	const formData = await request.formData()
-	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)
 	const submission = await parse(formData, {
 		schema: intent =>
@@ -177,7 +174,6 @@ export default function SignupRoute() {
 					className="mx-auto min-w-full max-w-sm sm:min-w-[368px]"
 					{...form.props}
 				>
-					<AuthenticityTokenInput />
 					<HoneypotInputs />
 					<Field
 						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}

app/routes/_auth+/signup.tsx

@@ -8,7 +8,6 @@ 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'
@@ -18,7 +17,6 @@ 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'
@@ -33,7 +31,6 @@ const SignupSchema = z.object({
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 
-	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)
 
 	const submission = await parse(formData, {
@@ -139,7 +136,6 @@ export default function SignupRoute() {
 			</div>
 			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
 				<Form method="POST" {...form.props}>
-					<AuthenticityTokenInput />
 					<HoneypotInputs />
 					<Field
 						labelProps={{

app/routes/_auth+/verify.tsx

@@ -2,7 +2,6 @@ import { conform, useForm, type Submission } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { json, type ActionFunctionArgs } 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'
@@ -13,7 +12,6 @@ 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'
@@ -45,7 +43,6 @@ const VerifySchema = z.object({
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
-	await validateCSRF(formData, request.headers)
 	return validateRequest(request, formData)
 }
 
@@ -284,7 +281,6 @@ export default function VerifyRoute() {
 				</div>
 				<div className="flex w-full gap-2">
 					<Form method="POST" {...form.props} className="flex-1">
-						<AuthenticityTokenInput />
 						<HoneypotInputs />
 						<Field
 							labelProps={{

app/routes/_marketing+/index.tsx

@@ -84,7 +84,7 @@ export default function Index() {
 									<TooltipTrigger asChild>
 										<a
 											href={logo.href}
-											className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 dark:bg-violet-200 dark:hover:bg-violet-100 sm:size-24"
+											className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 sm:size-24 dark:bg-violet-200 dark:hover:bg-violet-100"
 										>
 											<img src={logo.src} alt="" />
 										</a>

app/routes/resources+/download-user-data.tsx

@@ -48,7 +48,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 				? {
 						...user.image,
 						url: `${domain}/resources/user-images/${user.image.id}`,
-					}
+				  }
 				: null,
 			notes: user.notes.map(note => ({
 				...note,