Use loader context pattern for injecting DB, authenticator

Author: LA1CH3

.dev.vars

@@ -0,0 +1 @@
+SESSION_SECRET=secret

.env.prod renamed to .env

@@ -0,0 +1,63 @@
+import { getDB } from './services/db/utilities';
+import {
+  AppLoadContext,
+  createCookieSessionStorage,
+} from '@remix-run/cloudflare';
+import { Authenticator } from 'remix-auth';
+import { FormStrategy } from 'remix-auth-form';
+import { login } from './services/auth/session';
+import { Cloudflare } from './types/cloudflare';
+
+export interface WorkerEnv extends Env {
+  SESSION_SECRET: string;
+}
+
+declare module '@remix-run/cloudflare' {
+  interface AppLoadContext {
+    cloudflare: Cloudflare;
+    db: ReturnType<typeof getDB>;
+    authenticator: Authenticator;
+  }
+}
+
+type GetLoadContext = (args: {
+  request: Request;
+  context: { cloudflare: Cloudflare }; // load context _before_ augmentation
+}) => AppLoadContext;
+
+export const getLoadContext: GetLoadContext = ({ context }) => {
+  const db = getDB(context);
+
+  const sessionStorage = createCookieSessionStorage({
+    cookie: {
+      name: '_session',
+      sameSite: 'lax',
+      path: '/',
+      httpOnly: true,
+      secrets: [context.cloudflare.env.SESSION_SECRET],
+      secure: true,
+    },
+  });
+
+  const authenticator = new Authenticator(sessionStorage).use(
+    new FormStrategy(async ({ form, context }) => {
+      if (context) {
+        const username = form.get('username')?.toString();
+        const password = form.get('password')?.toString();
+
+        if (username && password) {
+          const user = await login(username, password, db);
+
+          return user;
+        }
+      }
+    }),
+    'user-pass',
+  );
+
+  return {
+    ...context,
+    db,
+    authenticator,
+  };
+};

.env.local

@@ -1,12 +1,9 @@
 import { type LoaderFunctionArgs, json } from '@remix-run/cloudflare';
 import { Links, Meta, Outlet, Scripts, useLoaderData } from '@remix-run/react';
 import { books } from 'db/schema';
-import { drizzle } from 'drizzle-orm/d1';
 
 export const loader = async ({ context }: LoaderFunctionArgs) => {
-  const db = drizzle(context.cloudflare.env.DB);
-
-  const allBooks = await db.select().from(books).all();
+  const allBooks = await context.db.select().from(books).all();
 
   return json({ books: allBooks });
 };

app/load-context.ts

@@ -1,8 +1,8 @@
-import { AppLoadContext } from '@remix-run/cloudflare';
 import { drizzle } from 'drizzle-orm/d1';
 import * as schema from 'db/schema';
+import { Cloudflare } from '~/types/cloudflare';
 
-export const getDB = (context: AppLoadContext) =>
+export const getDB = (context: { cloudflare: Cloudflare }) =>
   drizzle(context.cloudflare.env.DB, { schema });
 
 export type AppDB = ReturnType<typeof getDB>;

app/root.tsx

@@ -0,0 +1,7 @@
+import { PlatformProxy } from 'wrangler';
+
+export interface WorkerEnv extends Env {
+  SESSION_SECRET: string;
+}
+
+export type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>;

app/services/db/utilities.ts

@@ -4,5 +4,9 @@ import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
 // @ts-ignore - the server build file is generated by `remix vite:build`
 // eslint-disable-next-line import/no-unresolved
 import * as build from '../build/server';
+import { getLoadContext } from '~/load-context';
 
-export const onRequest = createPagesFunctionHandler({ build });
+export const onRequest = createPagesFunctionHandler({
+  build,
+  getLoadContext,
+});

app/types/cloudflare.ts

@@ -6,18 +6,18 @@
   "type": "module",
   "main": "build/client/index.js",
   "scripts": {
-    "dev": "dotenvx run -f .env.local -- remix vite:dev --open",
-    "build": "dotenvx run -f .env.prod -- remix vite:build",
+    "dev": "remix vite:dev --open",
+    "build": "remix vite:build",
     "lint": "eslint . --cache",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "cf-typegen": "wrangler types",
     "db:update": "drizzle-kit up",
     "db:migrate:create": "drizzle-kit generate",
-    "db:migrate:apply:local": "dotenvx run -f .env.local -- sh scripts/db-migrate.sh",
-    "db:migrate:apply:prod": "dotenvx run -f .env.prod -- sh scripts/db-migrate-prod.sh",
+    "db:migrate:apply:local": "dotenvx run -- sh scripts/db-migrate.sh",
+    "db:migrate:apply:prod": "dotenvx run -- sh scripts/db-migrate-prod.sh",
     "db:studio:local": "LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print -quit) drizzle-kit studio",
-    "db:sync": "dotenvx run -f .env.local -- sh scripts/db-sync.sh"
+    "db:sync": "dotenvx run -- sh scripts/db-sync.sh"
   },
   "keywords": [],
   "author": "",

app/types/load-context.ts

@@ -4,7 +4,14 @@ import {
 } from '@remix-run/dev';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { getLoadContext } from '~/load-context';
 
 export default defineConfig({
-  plugins: [remixCloudflareDevProxy(), remix(), tsconfigPaths()],
+  plugins: [
+    remixCloudflareDevProxy({
+      getLoadContext,
+    }),
+    remix(),
+    tsconfigPaths(),
+  ],
 });

functions/[[path]].ts

@@ -1,7 +1,8 @@
-// Generated by Wrangler on Sun May 12 2024 17:03:53 GMT-0400 (Eastern Daylight Time)
+// Generated by Wrangler on Sun May 12 2024 22:57:14 GMT-0400 (Eastern Daylight Time)
 // by running `wrangler types`
 
 interface Env {
   CLOUDFLARE_ACCOUNT_ID: '887644ede3080f7152aa22e9ecf52f0f';
+  SESSION_SECRET: string;
   DB: D1Database;
 }