woo, it works

Author: kentcdodds

epicshop/epic-me/.gitignore

@@ -15,3 +15,5 @@
 !.dev.vars.example
 .env*
 !.env.example
+
+dist/

epicshop/epic-me/app/routes.ts

@@ -5,4 +5,5 @@ export default [
 	route('/authorize', 'routes/authorize.tsx'),
 	route('/whoami', 'routes/whoami.tsx'),
 	route('/db-api', 'routes/db-api.tsx'),
+	route('/introspect', 'routes/introspect.tsx'),
 ] satisfies RouteConfig

epicshop/epic-me/app/routes/authorize.tsx

@@ -1,5 +1,6 @@
 import { Form } from 'react-router'
 import { type EpicExecutionContext } from 'workers/app.ts'
+import { z } from 'zod'
 import { type Route } from './+types/authorize'
 
 export function meta({}: Route.MetaArgs) {
@@ -14,6 +15,35 @@ export async function loader({ context }: Route.LoaderArgs) {
 	return { users }
 }
 
+const requestParamsSchema = z
+	.object({
+		response_type: z.string().default('code'),
+		client_id: z.string(),
+		code_challenge: z.string(),
+		code_challenge_method: z.string(),
+		redirect_uri: z.string(),
+		scope: z.string().array().optional().default([]),
+		state: z.string().optional().default(''),
+	})
+	.passthrough()
+	.transform(
+		({
+			response_type: responseType,
+			client_id: clientId,
+			code_challenge: codeChallenge,
+			code_challenge_method: codeChallengeMethod,
+			redirect_uri: redirectUri,
+			...val
+		}) => ({
+			responseType,
+			clientId,
+			codeChallenge,
+			codeChallengeMethod,
+			redirectUri,
+			...val,
+		}),
+	)
+
 export async function action({ request, context }: Route.ActionArgs) {
 	const formData = await request.formData()
 	const selectedUserId = formData.get('userId')
@@ -28,30 +58,12 @@ export async function action({ request, context }: Route.ActionArgs) {
 			return { status: 'error', message: 'User not found' } as const
 		}
 
-		// Get the OAuth request info from the URL parameters
 		const url = new URL(request.url)
-		const oauthReqInfo = url.searchParams.get('oauth_req_info')
 
-		if (!oauthReqInfo) {
-			return {
-				status: 'error',
-				message: 'Missing OAuth request information',
-			} as const
-		}
-
-		// Parse the OAuth request info
-		let requestParams
-		try {
-			requestParams = JSON.parse(oauthReqInfo)
-		} catch (error) {
-			console.error('Invalid OAuth request information', error)
-			return {
-				status: 'error',
-				message: 'Invalid OAuth request information',
-			} as const
-		}
+		const requestParams = requestParamsSchema.parse(
+			Object.fromEntries(url.searchParams),
+		)
 
-		// Complete the authorization
 		const { redirectTo } =
 			await context.cloudflare.env.OAUTH_PROVIDER.completeAuthorization({
 				request: requestParams,
@@ -182,20 +194,7 @@ export default function Authorize({
 										href={actionData.redirectTo}
 										className="inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-400"
 									>
-										<svg
-											className="mr-2 h-4 w-4"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												strokeWidth={2}
-												d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-											/>
-										</svg>
-										Continue to Application
+										<small className="text-xs">{actionData.redirectTo}</small>
 									</a>
 								</div>
 							</div>

epicshop/epic-me/app/routes/db-api.tsx

@@ -59,6 +59,11 @@ const methodSchemas = {
 		id: z.number(),
 	}),
 
+	// User methods
+	getUserById: z.object({
+		id: z.number(),
+	}),
+
 	// Entry tag methods
 	addTagToEntry: z.object({
 		entryId: z.number(),
@@ -161,6 +166,12 @@ export async function action({ request, context }: Route.ActionArgs) {
 				break
 			}
 
+			case 'getUserById': {
+				const userParams = methodSchemas.getUserById.parse(params)
+				result = await context.db.getUserById(userParams.id)
+				break
+			}
+
 			case 'addTagToEntry': {
 				const entryTagParams = methodSchemas.addTagToEntry.parse(params)
 				result = await context.db.addTagToEntry(Number(userId), entryTagParams)
@@ -178,7 +189,7 @@ export async function action({ request, context }: Route.ActionArgs) {
 
 			default:
 				return Response.json(
-					{ error: `Method not implemented: ${method}` },
+					{ error: `epicme:db-api:Method not implemented: ${method}` },
 					{ status: 501 },
 				)
 		}

epicshop/epic-me/app/routes/introspect.tsx

@@ -0,0 +1,50 @@
+import { type Token } from '@cloudflare/workers-oauth-provider'
+import { type Route } from './+types/introspect'
+
+export async function loader({ request, context }: Route.LoaderArgs) {
+	const tokenInfo = await getTokenInfo(request, context.cloudflare.env)
+	if (!tokenInfo) return new Response('Unauthorized', { status: 401 })
+
+	return Response.json({
+		userId: tokenInfo.userId,
+		clientId: tokenInfo.grant.clientId,
+		scopes: tokenInfo.grant.scope,
+		expiresAt: tokenInfo.expiresAt,
+	})
+}
+
+async function getTokenInfo(
+	request: Request,
+	env: Env,
+): Promise<Token | undefined> {
+	const token = request.headers.get('authorization')?.slice('Bearer '.length)
+	if (!token) return undefined
+	return resolveTokenInfo(token, env)
+}
+
+async function resolveTokenInfo(
+	token: string,
+	env: Env,
+): Promise<Token | undefined> {
+	const parts = token.split(':')
+	if (parts.length !== 3) throw new Error('Invalid token format')
+
+	const [userId, grantId] = parts
+	const tokenId = await generateTokenId(token)
+	const tokenKey = `token:${userId}:${grantId}:${tokenId}`
+
+	const tokenData = await env.OAUTH_KV.get(tokenKey, { type: 'json' })
+	if (!tokenData) throw new Error('Token not found')
+
+	return tokenData as Token
+}
+
+// copied from @cloudflare/workers-oauth-provider
+async function generateTokenId(token: string) {
+	const encoder = new TextEncoder()
+	const data = encoder.encode(token)
+	const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+	const hashArray = Array.from(new Uint8Array(hashBuffer))
+	const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+	return hashHex
+}

epicshop/epic-me/package-lock.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@cloudflare/workers-oauth-provider": "^0.0.5",
+    "zod": "^3.25.67",
     "isbot": "^5.1.29",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

epicshop/epic-me/package.json

@@ -6,6 +6,14 @@ import devtoolsJson from 'vite-plugin-devtools-json'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
+	server: {
+		port: 7788,
+	},
+	build: {
+		rollupOptions: {
+			external: ['cloudflare:workers'],
+		},
+	},
 	plugins: [
 		{
 			name: 'strip-typegen-imports',

epicshop/epic-me/vite.config.ts

@@ -41,7 +41,7 @@ const defaultHandler = {
 } satisfies ExportedHandler<Env>
 
 export default new OAuthProvider({
-	apiRoute: ['/whoami', '/db-api'],
+	apiRoute: ['/whoami', '/db-api', '/introspect'],
 	// @ts-expect-error these types are wrong...
 	apiHandler: defaultHandler,
 	// @ts-expect-error these types are wrong...

epicshop/epic-me/workers/app.ts

@@ -0,0 +1,110 @@
+# Epic Me DB Client
+
+A typesafe client for making requests to the Epic Me database API.
+
+## Installation
+
+```bash
+npm install
+```
+
+## Usage
+
+```typescript
+import { DBClient } from './index.js'
+
+// Create a client instance with your base URL
+const client = new DBClient('https://your-app.com')
+
+// Entry operations
+const entry = await client.createEntry({
+	title: 'My Journal Entry',
+	content: 'Today was a great day!',
+	mood: 'happy',
+	location: 'home',
+	weather: 'sunny',
+	isPrivate: 1,
+	isFavorite: 0,
+})
+
+const entries = await client.getEntries({
+	tagIds: [1, 2],
+	from: '2024-01-01',
+	to: '2024-12-31',
+})
+
+const entry = await client.getEntry(1)
+await client.updateEntry(1, { title: 'Updated Title' })
+await client.deleteEntry(1)
+
+// Tag operations
+const tag = await client.createTag({
+	name: 'Work',
+	description: 'Work-related entries',
+})
+
+const tags = await client.getTags()
+const tag = await client.getTag(1)
+await client.updateTag(1, { name: 'Updated Tag' })
+await client.deleteTag(1)
+
+// Entry-Tag operations
+await client.addTagToEntry({ entryId: 1, tagId: 1 })
+const entryTags = await client.getEntryTags(1)
+```
+
+## API Reference
+
+### Constructor
+
+```typescript
+new DBClient(baseUrl: string)
+```
+
+Creates a new client instance with the specified base URL.
+
+### Entry Methods
+
+- `createEntry(entry: NewEntry): Promise<EntryWithTags>`
+- `getEntry(id: number): Promise<EntryWithTags | null>`
+- `getEntries(options?: { tagIds?: number[], from?: string, to?: string }): Promise<Array<{ id: number, title: string, tagCount: number }>>`
+- `updateEntry(id: number, entry: Partial<NewEntry>): Promise<EntryWithTags>`
+- `deleteEntry(id: number): Promise<boolean>`
+
+### Tag Methods
+
+- `createTag(tag: NewTag): Promise<Tag>`
+- `getTag(id: number): Promise<Tag | null>`
+- `getTags(): Promise<Array<{ id: number, name: string }>>`
+- `updateTag(id: number, tag: Partial<NewTag>): Promise<Tag>`
+- `deleteTag(id: number): Promise<boolean>`
+
+### Entry-Tag Methods
+
+- `addTagToEntry(entryTag: NewEntryTag): Promise<EntryTag>`
+- `getEntryTags(entryId: number): Promise<Tag[]>`
+
+## Error Handling
+
+The client will throw `Error` instances with descriptive messages for:
+
+- Network errors
+- HTTP errors (4xx, 5xx)
+- API errors returned by the server
+- Validation errors
+
+## Types
+
+All types are exported from the client for use in your application:
+
+```typescript
+import type {
+	Entry,
+	NewEntry,
+	Tag,
+	NewTag,
+	EntryTag,
+	NewEntryTag,
+	EntryWithTags,
+} from './index.js'
+```