Merge branch 'main' of https://github.com/AdityaKirad/epic-stack

Author: AdityaKirad

.env.example

@@ -15,7 +15,15 @@ INTERNAL_COMMAND_TOKEN="some-made-up-token"
 GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
 GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
 GITHUB_TOKEN="MOCK_GITHUB_TOKEN"
+GITHUB_REDIRECT_URI="https://example.com/auth/github/callback"
 
 # set this to false to prevent search engines from indexing the website
 # default to allow indexing for seo safety
 ALLOW_INDEXING="true"
+
+# Tigris Object Storage (S3-compatible) Configuration
+AWS_ACCESS_KEY_ID="mock-access-key"
+AWS_SECRET_ACCESS_KEY="mock-secret-key"
+AWS_REGION="auto"
+AWS_ENDPOINT_URL_S3="https://fly.storage.tigris.dev"
+BUCKET_NAME="mock-bucket"

.github/workflows/deploy.yml

@@ -30,9 +30,15 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
       - name: 🖼 Build icons
         run: npm run build:icons
 
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
       - name: 🔬 Lint
         run: npm run lint
 
@@ -51,9 +57,15 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
       - name: 🖼 Build icons
         run: npm run build:icons
 
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
       - name: 🔎 Type check
         run: npm run typecheck --if-present
 
@@ -78,6 +90,9 @@ jobs:
       - name: 🖼 Build icons
         run: npm run build:icons
 
+      - name: 🛠 Setup Database
+        run: npx prisma migrate deploy && npx prisma generate --sql
+
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
 
@@ -104,7 +119,7 @@ jobs:
         run: npm run test:e2e:install
 
       - name: 🛠 Setup Database
-        run: npx prisma migrate deploy
+        run: npx prisma migrate deploy && npx prisma generate --sql
 
       - name: 🏦 Cache Database
         id: db-cache

.github/workflows/version.yml

@@ -14,6 +14,8 @@ node_modules
 /playwright-report/
 /playwright/.cache/
 /tests/fixtures/email/
+/tests/fixtures/uploaded/
+/tests/fixtures/openimg/
 /coverage
 
 /other/cache.db

.gitignore

@@ -1,3 +1,4 @@
+import { Img } from 'openimg/react'
 import { useRef } from 'react'
 import { Link, Form } from 'react-router'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
@@ -25,10 +26,12 @@ export function UserDropdown() {
 						onClick={(e) => e.preventDefault()}
 						className="flex items-center gap-2"
 					>
-						<img
+						<Img
 							className="h-8 w-8 rounded-full object-cover"
 							alt={user.name ?? user.username}
-							src={getUserImgSrc(user.image?.id)}
+							src={getUserImgSrc(user.image?.objectKey)}
+							width={256}
+							height={256}
 						/>
 						<span className="text-body-sm font-bold">
 							{user.name ?? user.username}

app/components/user-dropdown.tsx

@@ -1,3 +1,4 @@
+import { OpenImgContextProvider } from 'openimg/react'
 import {
 	data,
 	Link,
@@ -33,7 +34,7 @@ import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
 import { pipeHeaders } from './utils/headers.server.ts'
 import { honeypot } from './utils/honeypot.server.ts'
-import { combineHeaders, getDomainUrl } from './utils/misc.tsx'
+import { combineHeaders, getDomainUrl, getImgSrc } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
 import { type Theme, getTheme } from './utils/theme.server.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
@@ -83,7 +84,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 							id: true,
 							name: true,
 							username: true,
-							image: { select: { id: true } },
+							image: { select: { objectKey: true } },
 							roles: {
 								select: {
 									name: true,
@@ -194,7 +195,10 @@ function App() {
 	useToast(data.toast)
 
 	return (
-		<>
+		<OpenImgContextProvider
+			optimizerEndpoint="/resources/images"
+			getSrc={getImgSrc}
+		>
 			<div className="flex min-h-screen flex-col justify-between">
 				<header className="container py-6">
 					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
@@ -215,7 +219,7 @@ function App() {
 					</nav>
 				</header>
 
-				<div className="flex-1">
+				<div className="flex-1 flex flex-col">
 					<Outlet />
 				</div>
 
@@ -226,7 +230,7 @@ function App() {
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
 			<EpicProgress />
-		</>
+		</OpenImgContextProvider>
 	)
 }
 

app/root.tsx

@@ -1,10 +1,10 @@
 import { invariant } from '@epic-web/invariant'
 import { faker } from '@faker-js/faker'
+import { SetCookie } from '@mjackson/headers'
 import { http } from 'msw'
 import { afterEach, expect, test } from 'vitest'
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
-import { connectionSessionStorage } from '#app/utils/connections.server.ts'
 import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
@@ -35,7 +35,7 @@ test('when auth fails, send the user to login with a toast', async () => {
 	consoleError.mockImplementation(() => {})
 	server.use(
 		http.post('https://github.com/login/oauth/access_token', async () => {
-			return new Response('error', { status: 400 })
+			return new Response(null, { status: 400 })
 		}),
 	)
 	const request = await setupRequest()
@@ -219,19 +219,25 @@ async function setupRequest({
 	const state = faker.string.uuid()
 	url.searchParams.set('state', state)
 	url.searchParams.set('code', code)
-	const connectionSession = await connectionSessionStorage.getSession()
-	connectionSession.set('oauth2:state', state)
 	const authSession = await authSessionStorage.getSession()
 	if (sessionId) authSession.set(sessionKey, sessionId)
 	const setSessionCookieHeader =
 		await authSessionStorage.commitSession(authSession)
-	const setConnectionSessionCookieHeader =
-		await connectionSessionStorage.commitSession(connectionSession)
+	const searchParams = new URLSearchParams({ code, state })
+	let authCookie = new SetCookie({
+		name: 'github',
+		value: searchParams.toString(),
+		path: '/',
+		sameSite: 'Lax',
+		httpOnly: true,
+		maxAge: 60 * 10,
+		secure: process.env.NODE_ENV === 'production' || undefined,
+	})
 	const request = new Request(url.toString(), {
 		method: 'GET',
 		headers: {
 			cookie: [
-				convertSetCookieToCookie(setConnectionSessionCookieHeader),
+				authCookie.toString(),
 				convertSetCookieToCookie(setSessionCookieHeader),
 			].join('; '),
 		},

app/routes/_auth+/auth.$provider.callback.test.ts

@@ -38,7 +38,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 	const label = providerLabels[providerName]
 
 	const authResult = await authenticator
-		.authenticate(providerName, request, { throwOnError: true })
+		.authenticate(providerName, request)
 		.then(
 			(data) =>
 				({
@@ -70,7 +70,10 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 	const existingConnection = await prisma.connection.findUnique({
 		select: { userId: true },
 		where: {
-			providerName_providerId: { providerName, providerId: profile.id },
+			providerName_providerId: {
+				providerName,
+				providerId: String(profile.id),
+			},
 		},
 	})
 
@@ -103,7 +106,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 		await prisma.connection.create({
 			data: {
 				providerName,
-				providerId: profile.id,
+				providerId: String(profile.id),
 				userId,
 			},
 		})
@@ -133,7 +136,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 		await prisma.connection.create({
 			data: {
 				providerName,
-				providerId: profile.id,
+				providerId: String(profile.id),
 				userId: user.id,
 			},
 		})

app/routes/_auth+/auth.$provider.callback.ts

@@ -18,12 +18,10 @@ 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 {
-	authenticator,
 	sessionKey,
 	signupWithConnection,
 	requireAnonymous,
 } from '#app/utils/auth.server.ts'
-import { connectionSessionStorage } from '#app/utils/connections.server'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -65,7 +63,7 @@ async function requireData({
 		.object({
 			email: z.string(),
 			providerName: ProviderNameSchema,
-			providerId: z.string(),
+			providerId: z.string().or(z.number()),
 		})
 		.safeParse({ email, providerName: params.provider, providerId })
 	if (result.success) {
@@ -78,24 +76,17 @@ async function requireData({
 
 export async function loader({ request, params }: Route.LoaderArgs) {
 	const { email } = await requireData({ request, params })
-	const connectionSession = await connectionSessionStorage.getSession(
-		request.headers.get('cookie'),
-	)
+
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)
 	const prefilledProfile = verifySession.get(prefilledProfileKey)
 
-	const formError = connectionSession.get(authenticator.sessionErrorKey)
-	const hasError = typeof formError === 'string'
-
 	return {
 		email,
 		status: 'idle',
 		submission: {
-			status: hasError ? 'error' : undefined,
 			initialValue: prefilledProfile ?? {},
-			error: { '': hasError ? [formError] : [] },
 		} as SubmissionResult,
 	}
 }
@@ -128,7 +119,7 @@ export async function action({ request, params }: Route.ActionArgs) {
 			const session = await signupWithConnection({
 				...data,
 				email,
-				providerId,
+				providerId: String(providerId),
 				providerName,
 			})
 			return { ...data, session }

app/routes/_auth+/onboarding_.$provider.tsx

@@ -1,6 +1,6 @@
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { getDomainUrl } from '#app/utils/misc.tsx'
+import { getDomainUrl, getNoteImgSrc, getUserImgSrc } from '#app/utils/misc.tsx'
 import { type Route } from './+types/download-user-data.ts'
 
 export async function loader({ request }: Route.LoaderArgs) {
@@ -18,7 +18,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 					id: true,
 					createdAt: true,
 					updatedAt: true,
-					contentType: true,
+					objectKey: true,
 				},
 			},
 			notes: {
@@ -28,7 +28,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 							id: true,
 							createdAt: true,
 							updatedAt: true,
-							contentType: true,
+							objectKey: true,
 						},
 					},
 				},
@@ -47,14 +47,14 @@ export async function loader({ request }: Route.LoaderArgs) {
 			image: user.image
 				? {
 						...user.image,
-						url: `${domain}/resources/user-images/${user.image.id}`,
+						url: domain + getUserImgSrc(user.image.objectKey),
 					}
 				: null,
 			notes: user.notes.map((note) => ({
 				...note,
 				images: note.images.map((image) => ({
 					...image,
-					url: `${domain}/resources/note-images/${image.id}`,
+					url: domain + getNoteImgSrc(image.objectKey),
 				})),
 			})),
 		},