Use AsyncLocalStorage

examples/remix-cms/app/components/Toast.tsx

@@ -19,6 +19,8 @@ export function Toast({
   useEffect(() => {
     if (message) {
       setShow(true);
+    } else {
+      setShow(false);
     }
   }, [message]);
 
@@ -31,6 +33,8 @@ export function Toast({
       return () => {
         clearTimeout(timeout);
       };
+    } else {
+      setShow(false);
     }
   }, [show]);
 
@@ -57,12 +61,13 @@ export function Toast({
               <div className="p-4">
                 <div className="flex items-start">
                   <div className="flex-shrink-0">
-                    {success ? (
+                    {success && (
                       <CheckCircleIcon
                         className="h-6 w-6 text-green-400"
                         aria-hidden="true"
                       />
-                    ) : (
+                    )}
+                    {error && (
                       <ExclamationCircleIcon
                         className="h-6 w-6 text-red-400"
                         aria-hidden="true"

examples/remix-cms/app/routes/admin.tsx

@@ -16,20 +16,21 @@ import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 import { Toast } from "~/components/Toast";
 import { json, type LoaderArgs, redirect } from "@remix-run/cloudflare";
 import { User } from "~/models/User";
+import { auth } from "superflare";
 
 const navigation = [
   { name: "Dashboard", href: "/admin", icon: HomeIcon, end: true },
   { name: "Articles", href: "./articles", icon: FolderIcon },
 ];
 
-export async function loader({ context: { auth, session } }: LoaderArgs) {
-  if (!(await auth.check(User))) {
+export async function loader({ context: { session } }: LoaderArgs) {
+  if (!(await auth().check(User))) {
     return redirect("/auth/login");
   }
 
   const flash = session.getFlash("flash");
 
-  const user = await auth.user(User);
+  const user = await auth().user(User);
 
   return json({
     flash,

examples/remix-cms/app/routes/admin/articles.tsx

@@ -6,7 +6,9 @@ import { Article } from "~/models/Article";
 import { useChannel } from "~/utils/use-channel";
 
 export async function loader() {
-  const articles = await Article.with("user").orderBy("createdAt", "desc");
+  const articles = await Article.with("user")
+    .orderBy("createdAt", "desc")
+    .get();
 
   return json({ articles });
 }

examples/remix-cms/app/routes/auth/login.tsx

@@ -3,29 +3,38 @@ import { json, redirect, type ActionArgs } from "@remix-run/cloudflare";
 import { Button } from "~/components/admin/Button";
 import { FormField } from "~/components/Form";
 import { User } from "~/models/User";
+import { auth } from "superflare";
 
-export async function action({ request, context: { auth } }: ActionArgs) {
-  if (await auth.check(User)) {
+export async function action({ request }: ActionArgs) {
+  if (await auth().check(User)) {
     return redirect("/admin");
   }
 
   const formData = new URLSearchParams(await request.text());
 
   if (formData.get("bypass") === "user") {
-    auth.login((await User.first()) as User);
+    auth().login((await User.first()) as User);
     return redirect("/admin");
   }
 
   const email = formData.get("email") as string;
   const password = formData.get("password") as string;
 
-  if (await auth.attempt(User, { email, password })) {
+  if (await auth().attempt(User, { email, password })) {
     return redirect("/admin");
   }
 
   return json({ error: "Invalid credentials" }, { status: 400 });
 }
 
+export async function loader() {
+  if (await auth().check(User)) {
+    return redirect("/admin");
+  }
+
+  return null;
+}
+
 export default function Login() {
   const actionData = useActionData();
 

examples/remix-cms/app/routes/auth/logout.ts

@@ -1,7 +1,8 @@
-import { type ActionArgs, redirect } from "@remix-run/server-runtime";
+import { redirect } from "@remix-run/server-runtime";
+import { auth } from "superflare";
 
-export async function action({ context: { auth } }: ActionArgs) {
-  auth.logout();
+export async function action() {
+  auth().logout();
 
   return redirect("/");
 }

examples/remix-cms/app/routes/auth/register.tsx

@@ -3,10 +3,10 @@ import { json, redirect, type ActionArgs } from "@remix-run/cloudflare";
 import { Button } from "~/components/admin/Button";
 import { FormField } from "~/components/Form";
 import { User } from "~/models/User";
-import { hash } from "superflare";
+import { auth, hash } from "superflare";
 
-export async function action({ request, context: { auth } }: ActionArgs) {
-  if (await auth.check(User)) {
+export async function action({ request }: ActionArgs) {
+  if (await auth().check(User)) {
     return redirect("/admin");
   }
 
@@ -25,11 +25,19 @@ export async function action({ request, context: { auth } }: ActionArgs) {
     password: await hash().make(password),
   });
 
-  auth.login(user);
+  auth().login(user);
 
   return redirect("/admin");
 }
 
+export async function loader() {
+  if (await auth().check(User)) {
+    return redirect("/admin");
+  }
+
+  return null;
+}
+
 export default function Register() {
   const actionData = useActionData();
 

examples/remix-cms/app/utils/markdown.server.ts

@@ -1,4 +1,5 @@
 import { marked } from "marked";
+// TODO: Find a lighter solution for syntax highlighting
 import hljs from "highlight.js";
 
 export async function convertToHtml(input: string) {

examples/remix-cms/package.json

@@ -20,9 +20,9 @@
     "@cloudflare/kv-asset-handler": "^0.3.0",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
-    "@remix-run/cloudflare": "^1.14.1",
-    "@remix-run/react": "^1.14.1",
-    "@remix-run/serve": "^1.14.1",
+    "@remix-run/cloudflare": "0.0.0-nightly-da5486d-20230323",
+    "@remix-run/react": "0.0.0-nightly-da5486d-20230323",
+    "@remix-run/serve": "0.0.0-nightly-da5486d-20230323",
     "@superflare/remix": "workspace:*",
     "@tailwindcss/forms": "^0.5.3",
     "clsx": "^1.2.1",
@@ -38,9 +38,9 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20230307.0",
     "@faker-js/faker": "^7.6.0",
-    "@remix-run/dev": "^1.14.1",
-    "@remix-run/eslint-config": "^1.14.1",
-    "@remix-run/server-runtime": "^1.14.1",
+    "@remix-run/dev": "0.0.0-nightly-da5486d-20230323",
+    "@remix-run/eslint-config": "0.0.0-nightly-da5486d-20230323",
+    "@remix-run/server-runtime": "0.0.0-nightly-da5486d-20230323",
     "@tailwindcss/typography": "^0.5.9",
     "@types/marked": "^4.0.8",
     "@types/react": "^18.0.28",

examples/remix-cms/worker.ts

@@ -1,5 +1,4 @@
 import { createRequestHandler } from "@remix-run/cloudflare";
-import config from "./superflare.config";
 import * as build from "./build";
 import {
   getAssetFromKV,
@@ -9,6 +8,7 @@ import {
 import manifestJSON from "__STATIC_CONTENT_MANIFEST";
 import { handleQueue } from "superflare";
 import { handleFetch } from "@superflare/remix";
+import config from "./superflare.config";
 
 export { Channel } from "superflare";
 

package.json

@@ -27,10 +27,5 @@
   "dependencies": {
     "@changesets/changelog-git": "^0.1.14",
     "@changesets/cli": "^2.26.0"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "@remix-run/[email protected]": "patches/@[email protected]"
-    }
   }
 }

packages/superflare-remix/index.ts

@@ -1,9 +1,9 @@
 import { createCookieSessionStorage } from "@remix-run/cloudflare";
 import {
-  defineConfig,
   handleFetch as superflareHandleFetch,
   SuperflareAuth,
   SuperflareSession,
+  type defineConfig,
 } from "superflare";
 
 /**
@@ -51,8 +51,7 @@ export async function handleFetch<Env extends { APP_KEY: string }>(
     },
     async () => {
       /**
-       * We inject env and session into the Remix load context.
-       * Someday, we could replace this with AsyncLocalStorage.
+       * TODO: REMOVE THIS since we're using AsyncLocalStorage
        */
       const loadContext: SuperflareAppLoadContext<Env> = {
         session,

packages/superflare-remix/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@cloudflare/kv-asset-handler": "^0.3.0",
+    "@types/node": "^18.14.1",
     "superflare": "workspace:*"
   }
 }

packages/superflare/cli/console.ts

@@ -6,6 +6,7 @@ import { inspect } from "node:util";
 import path from "node:path";
 import { CommonYargsArgv, StrictYargsOptionsToInterface } from "./yargs-types";
 import { createD1Database } from "./d1-database";
+import { Script } from "node:vm";
 
 export function consoleOptions(yargs: CommonYargsArgv) {
   return yargs
@@ -88,14 +89,35 @@ export async function createRepl({
   server.context["db"] = db;
 
   /**
-   * Run the Superflare `config` to ensure Models have access to the database.
+   * Define a custom `eval` function to wrap the code in a `runWithContext` call.
    */
-  server.eval(
-    `const {setConfig} = require('superflare'); setConfig({database: { default: db }});`,
-    server.context,
-    "repl",
-    () => {}
-  );
+  const customEval = (
+    cmd: string,
+    _: any,
+    filename: string,
+    callback: (err: Error | null, result: any) => void
+  ) => {
+    const wrappedCmd = `
+      const { getContextFromUserConfig, runWithContext } = require('superflare');
+      const context = getContextFromUserConfig({database: { default: db }});
+      runWithContext(context, async () => {
+        return ${cmd}
+      });
+    `;
+
+    const response = new Script(wrappedCmd, { filename }).runInThisContext();
+
+    if (response instanceof Promise) {
+      response
+        .then((result) => callback(null, result))
+        .catch((err) => callback(err, null));
+    } else {
+      callback(null, response);
+    }
+  };
+
+  // @ts-ignore
+  server["eval"] = customEval;
 
   /**
    * Get a list of the models in the user's dir.

packages/superflare/docs/security/authentication.md

@@ -17,8 +17,7 @@ To set up authentication, you need to do a few things:
 
 1. Add a `User` model (and a `users` table)
 2. Ensure you've created an instance of [`SuperflareSession`](/sessions)
-3. Create an instance of `SuperflareAuth` (with a session) and pass it to a place your application code can access it during a request (like a Remix `AppContext`).
-4. Add some sort of `/register` and `/login` routes to your application so users can log in.
+3. Add some sort of `/register` and `/login` routes to your application so users can log in.
 
 {% callout title="Batteries-included" %}
 If you've created a Superflare app with `npx superflare new`, you should already have these requirements met! Go take a nap or something.
@@ -30,37 +29,43 @@ Superflare provides basic `/auth/register` and `/auth/login` routes and forms fo
 
 ## Protecting routes
 
-You can protect routes by using the `SuperflareAuth` instance you created in your app's entrypoint. For the purpose of this example, we'll pretend you're using Remix, and that you've injected the `SuperflareAuth` instance into the `AppContext` as `auth`:
+You can protect routes by using the `auth` helper exported by Superflare:
 
 ```ts
+import { auth } from "superflare";
+
 // routes/my-secret-route.tsx
-export async function loader({ context: { auth } }: LoaderArgs) {
+export async function loader() {
   // If the user is not logged in, redirect them to the login page
-  if (!(await auth.check(User))) {
+  if (!(await auth().check(User))) {
     return redirect("/auth/login");
   }
 
-  const user = await auth.user(User);
+  const user = await auth().user(User);
 
   // If the user is logged in, show them the secret page
   return json({ message: `You're logged in, ${user.name}!` });
 }
 ```
 
+{% callout title="Fetch requests only" %}
+Auth is only available during `fetch` requests to your worker—not during `queue` or `scheduled` requests. This is because `fetch` requests are the only ones that have access to a user's session. Auth is injected using [AsyncLocalStorage](https://nodejs.org/api/async_context.html#class-asynclocalstorage), which is only available in `fetch` requests.
+{% /callout %}
+
 ## Logging out
 
-To log out, you can use the `SuperflareAuth` instance's `logout()` method:
+To log out, you can use the `auth().logout()` method:
 
 ```ts
 // routes/logout.tsx
-export async function action({ context: { auth } }: LoaderArgs) {
-  auth.logout();
+export async function action() {
+  auth().logout();
 
   return redirect("/auth/login");
 }
 ```
 
-## `SuperflareAuth` API
+## `auth()` API
 
 ### `check(model: typeof Model): Promise<boolean>`
 

packages/superflare/index.ts

@@ -1,4 +1,4 @@
-export { setConfig, defineConfig } from "./src/config";
+export { defineConfig } from "./src/config";
 export { Model } from "./src/model";
 export { SuperflareSession } from "./src/session";
 export { DatabaseException } from "./src/query-builder";
@@ -8,10 +8,18 @@ export { Factory } from "./src/factory";
 export { handleFetch } from "./src/fetch";
 export { handleQueue } from "./src/queue";
 export { Job } from "./src/job";
-export { SuperflareAuth } from "./src/auth";
+export { auth, SuperflareAuth } from "./src/auth";
 export { hash } from "./src/hash";
 export { Event } from "./src/event";
 export { Listener } from "./src/listener";
 export { handleWebSockets } from "./src/websockets";
 export { Channel } from "./src/durable-objects/Channel";
+export {
+  getContext,
+
+  // Internal use only:
+  runWithContext,
+  enterWithConfig,
+  getContextFromUserConfig,
+} from "./src/context";
 export { Schema } from "./src/schema";