update cf context to studio

apps/studio.saladeaula.digital/app/routes/api.ts

@@ -1,7 +1,7 @@
 import type { Route } from './+types'
 
 import type { User } from '@repo/auth/auth'
-import { userContext } from '@repo/auth/context'
+import { userContext, cloudflareContext } from '@repo/auth/context'
 
 export const loader = proxy
 export const action = proxy
@@ -11,8 +11,9 @@ async function proxy({
   context
 }: Route.ActionArgs): Promise<Response> {
   const pathname = new URL(request.url).pathname.replace(/^\/api\//, '')
-  const user = context.get(userContext) as User
-  const url = new URL(pathname, context.cloudflare.env.API_URL)
+  const cloudflare = context.get(cloudflareContext)
+  const user = context.get(userContext)!
+  const url = new URL(pathname, cloudflare.env.API_URL)
   const headers = new Headers(request.headers)
 
   headers.set('Authorization', `Bearer ${user.accessToken}`)

apps/studio.saladeaula.digital/app/routes/auth/login.ts

@@ -1,26 +1,34 @@
-import type { Route } from './+types'
+import type { Route } from './+types/login'
 
 import { redirect } from 'react-router'
 
 import { createAuth, type User } from '@repo/auth/auth'
+import { requestIdContext, cloudflareContext } from '@repo/auth/context'
 import { createSessionStorage } from '@repo/auth/session'
 
-export async function loader({ request, context }: Route.ActionArgs) {
-  const sessionStorage = createSessionStorage(context.cloudflare.env)
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const url = new URL(request.url)
+  const cloudflare = context.get(cloudflareContext)
+  const sessionStorage = createSessionStorage(cloudflare.env)
   const session = await sessionStorage.getSession(request.headers.get('cookie'))
-  const returnTo = session.has('returnTo') ? session.get('returnTo') : '/'
-  const user = session.get('user') as User | null
+  const requestId = context.get(requestIdContext)
+  const user = session.get('user')
+  const returnTo = (session.get('returnTo') as string | undefined) ?? '/'
 
   if (user) {
     return redirect(returnTo)
   }
 
   try {
-    const authenticator = createAuth(context.cloudflare.env)
-    const user = await authenticator.authenticate('oidc', request)
-    session.set('user', user)
+    const authenticator = createAuth(cloudflare.env, `${url.origin}/login`)
+    const authenticatedUser = (await authenticator.authenticate(
+      'oidc',
+      request
+    )) as User
+    session.set('user', authenticatedUser)
+
+    console.log(`[${requestId}] Redirecting the user to ${returnTo}`)
 
-    console.log(`Redirecting the user to ${returnTo}`)
     // Redirect to the home page after successful login
     return redirect(returnTo, {
       headers: {
@@ -28,7 +36,7 @@ export async function loader({ request, context }: Route.ActionArgs) {
       }
     })
   } catch (error) {
-    console.error(error)
+    console.error(`[${requestId}]`, error)
 
     if (error instanceof Error) {
       return Response.json(

apps/studio.saladeaula.digital/app/routes/auth/logout.ts

@@ -1,23 +1,24 @@
-import type { Route } from './+types'
+import type { Route } from './+types/logout'
 
-import { createAuth, type User } from '@repo/auth/auth'
-import { createSessionStorage } from '@repo/auth/session'
 import { redirect } from 'react-router'
 import type { OAuth2Strategy } from 'remix-auth-oauth2'
 
+import { createAuth, type User } from '@repo/auth/auth'
+import { createSessionStorage } from '@repo/auth/session'
+import { cloudflareContext } from '@repo/auth/context'
+
 export async function loader({ request, context }: Route.LoaderArgs) {
-  const authenticator = createAuth(context.cloudflare.env)
-  const sessionStorage = createSessionStorage(context.cloudflare.env)
+  const cloudflare = context.get(cloudflareContext)
+  const authenticator = createAuth(cloudflare.env)
+  const sessionStorage = createSessionStorage(cloudflare.env)
   const session = await sessionStorage.getSession(request.headers.get('cookie'))
-  const user = session.get('user') as User
+  const user = session.get('user')
   const strategy = authenticator.get<OAuth2Strategy<User>>('oidc')
 
   if (user?.accessToken && strategy) {
     await strategy.revokeToken(user.accessToken)
   }
 
-  console.log(await sessionStorage.destroySession(session))
-
   return redirect('/login', {
     headers: { 'Set-Cookie': await sessionStorage.destroySession(session) }
   })

apps/studio.saladeaula.digital/app/routes/edit.tsx

@@ -131,7 +131,9 @@ export async function action({ params, request, context }: Route.ActionArgs) {
   return { ok: r.status === 200 }
 }
 
-export default function Component({ loaderData: { data } }) {
+export default function Component({
+  loaderData: { data }
+}: Route.ComponentProps) {
   return (
     <Suspense fallback={<Skeleton />}>
       <div className="space-y-4">

apps/studio.saladeaula.digital/app/routes/index.tsx

@@ -11,6 +11,7 @@ import {
 import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'
 
+import { cloudflareContext } from '@repo/auth/context'
 import { createSearch } from '@repo/util/meili'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
@@ -44,11 +45,12 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export const loader = async ({ context }: Route.ActionArgs) => {
+  const cloudflare = context.get(cloudflareContext)
   const courses = createSearch({
     index: 'saladeaula_courses',
     sort: ['created_at:desc'],
     hitsPerPage: 100,
-    env: context.cloudflare.env
+    env: cloudflare.env
   })
 
   return {
@@ -56,7 +58,9 @@ export const loader = async ({ context }: Route.ActionArgs) => {
   }
 }
 
-export default function Component({ loaderData: { data } }) {
+export default function Component({
+  loaderData: { data }
+}: Route.ComponentProps) {
   const [searchParams, setSearchParams] = useSearchParams()
   const term = searchParams.get('term') as string
 
@@ -79,13 +83,13 @@ export default function Component({ loaderData: { data } }) {
             }
             defaultValue={term}
             onChange={(term) => {
-              setSearchParams({ term })
+              setSearchParams({ term: String(term) })
             }}
           />
         </div>
 
         <Await resolve={data}>
-          {({ hits = [] }) => <List term={term} hits={hits} />}
+          {({ hits }) => <List term={term} hits={hits as Course[]} />}
         </Await>
       </div>
     </Suspense>

apps/studio.saladeaula.digital/app/routes/layout.tsx

@@ -1,4 +1,4 @@
-import type { Route } from './+types'
+import type { Route } from './+types/layout'
 
 import { Link, Outlet } from 'react-router'
 
@@ -11,7 +11,7 @@ export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
 export async function loader({ context }: Route.ActionArgs) {
   const user = context.get(userContext)
-  return Response.json({ user })
+  return { user }
 }
 
 export default function Component({ loaderData }: Route.ComponentProps) {

apps/studio.saladeaula.digital/workers/app.ts

@@ -1,12 +1,9 @@
 import { createRequestHandler, RouterContextProvider } from 'react-router'
+import { cloudflareContext } from '@repo/auth/context'
 
-declare module 'react-router' {
-  export interface AppLoadContext {
-    cloudflare: {
-      env: Env
-      ctx: ExecutionContext
-    }
-  }
+declare module '@repo/auth/context' {
+  interface CloudflareEnv extends Env {}
+  interface CloudflareCtx extends ExecutionContext {}
 }
 
 const requestHandler = createRequestHandler(
@@ -16,11 +13,10 @@ const requestHandler = createRequestHandler(
 
 export default {
   async fetch(request, env, ctx) {
-    const context = new RouterContextProvider()
-
-    return requestHandler(
-      request,
-      Object.assign(context, { cloudflare: { env, ctx } })
+    const context = new RouterContextProvider(
+      new Map([[cloudflareContext, { env, ctx }]])
     )
+
+    return requestHandler(request, context)
   }
 } satisfies ExportedHandler<Env>