feat(middleware): Add support for Middleware to SSR-Streaming server

packages/api/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "7.23.6",
     "@prisma/client": "5.7.0",
-    "@whatwg-node/fetch": "0.9.14",
+    "@whatwg-node/fetch": "0.9.16",
     "core-js": "3.34.0",
     "humanize-string": "2.1.0",
     "jsonwebtoken": "9.0.2",

packages/auth/ambient.d.ts

@@ -20,8 +20,12 @@ declare global {
     RWJS_API_URL: string
 
     __REDWOOD__APP_TITLE: string
+
+    RWJS_EXP_STREAMING_SSR: boolean
   }
 
+  var __REDWOOD__SERVER__AUTH_STATE__: AuthProviderState<any>
+
   namespace NodeJS {
     interface Global {
       /** URL or absolute path to the GraphQL serverless function */

packages/auth/src/AuthProvider/AuthProvider.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react'
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import type { AuthContextInterface, CurrentUser } from '../AuthContext'
 import type { AuthImplementation } from '../AuthImplementation'
 
 import type { AuthProviderState } from './AuthProviderState'
 import { defaultAuthProviderState } from './AuthProviderState'
+import { ServerAuthContext } from './ServerAuthProvider'
 import { useCurrentUser } from './useCurrentUser'
 import { useForgotPassword } from './useForgotPassword'
 import { useHasRole } from './useHasRole'
@@ -82,9 +83,11 @@ export function createAuthProvider<
   }: AuthProviderProps) => {
     // const [hasRestoredState, setHasRestoredState] = useState(false)
 
+    const serverAuthState = useContext(ServerAuthContext)
+
     const [authProviderState, setAuthProviderState] = useState<
       AuthProviderState<TUser>
-    >(defaultAuthProviderState)
+    >(serverAuthState || defaultAuthProviderState)
 
     const getToken = useToken(authImplementation)
 
@@ -131,11 +134,17 @@ export function createAuthProvider<
     useEffect(() => {
       async function doRestoreState() {
         await authImplementation.restoreAuthState?.()
-        reauthenticate()
+
+        // @MARK(SSR-Auth): Conditionally call reauth, because initial state
+        // should come from server (on SSR).
+        // If the initial state didn't come from the server - or was restored already -
+        // reauthenticate will make a call to receive the current user from the server
+          reauthenticate()
+        }
       }
 
       doRestoreState()
-    }, [reauthenticate])
+    }, [reauthenticate, serverAuthState])
 
     return (
       <AuthContext.Provider

packages/auth/src/AuthProvider/ServerAuthProvider.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import type { AuthProviderState } from './AuthProviderState'
+import { defaultAuthProviderState } from './AuthProviderState'
+
+export type ServerAuthState = AuthProviderState<never> & {
+  cookieHeader?: string
+}
+
+const getAuthInitialStateFromServer = () => {
+  if (globalThis?.__REDWOOD__SERVER__AUTH_STATE__) {
+    const initialState = {
+      ...defaultAuthProviderState,
+      encryptedSession: null,
+      ...(globalThis?.__REDWOOD__SERVER__AUTH_STATE__ || {}),
+    }
+    // Clear it so we don't accidentally use it again
+    globalThis.__REDWOOD__SERVER__AUTH_STATE__ = null
+    return initialState
+  }
+
+  // Already restored
+  return null
+}
+
+/**
+ * On the server, it resolves to the defaultAuthProviderState first.
+ *
+ * On the client it restores from the initial server state injected in the ServerAuthProvider
+ */
+export const ServerAuthContext = React.createContext<ServerAuthState>(
+  getAuthInitialStateFromServer()
+)
+
+/**
+ * Note: This only gets rendered on the server and serves two purposes:
+ * 1) On the server, it sets the auth state
+ * 2) On the client, it restores the auth state from the initial server render
+ */
+export const ServerAuthProvider = ({
+  value,
+  children,
+}: {
+  value: ServerAuthState
+  children?: ReactNode[]
+}) => {
+  // @NOTE: we "Sanitize" to remove encryptedSession and cookieHeader
+  // not totally necessary, but it's nice to not have them in the DOM
+  // @MARK: needs discussion!
+  const stringifiedAuthState = `__REDWOOD__SERVER__AUTH_STATE__ = ${JSON.stringify(
+    sanitizeServerAuthState(value)
+  )};`
+
+  return (
+    <>
+      <script
+        id="__REDWOOD__SERVER_AUTH_STATE__"
+        dangerouslySetInnerHTML={{
+          __html: stringifiedAuthState,
+        }}
+      />
+
+      <ServerAuthContext.Provider value={value}>
+        {children}
+      </ServerAuthContext.Provider>
+    </>
+  )
+}
+function sanitizeServerAuthState(value: ServerAuthState) {
+  const sanitizedState = { ...value }
+  // Remove the cookie from being printed onto the DOM
+  // harmless, but still...
+  delete sanitizedState.cookieHeader
+
+  return sanitizedState
+}

packages/auth/src/index.ts

@@ -2,3 +2,6 @@ export { AuthContextInterface, CurrentUser } from './AuthContext'
 export { useNoAuth, UseAuth } from './useAuth'
 export { createAuthentication } from './authFactory'
 export type { AuthImplementation } from './AuthImplementation'
+
+export * from './AuthProvider/AuthProviderState'
+export * from './AuthProvider/ServerAuthProvider'

packages/codemods/package.json

@@ -34,7 +34,7 @@
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "8.0.1",
     "@vscode/ripgrep": "1.15.6",
-    "@whatwg-node/fetch": "0.9.14",
+    "@whatwg-node/fetch": "0.9.16",
     "cheerio": "1.0.0-rc.12",
     "core-js": "3.34.0",
     "deepmerge": "4.3.1",

packages/graphql-server/package.json

@@ -55,7 +55,7 @@
     "@types/jsonwebtoken": "9.0.5",
     "@types/lodash": "4.14.201",
     "@types/uuid": "9.0.7",
-    "@whatwg-node/fetch": "0.9.14",
+    "@whatwg-node/fetch": "0.9.16",
     "aws-lambda": "1.0.7",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",

packages/prerender/package.json

@@ -32,7 +32,7 @@
     "@redwoodjs/router": "6.0.7",
     "@redwoodjs/structure": "6.0.7",
     "@redwoodjs/web": "6.0.7",
-    "@whatwg-node/fetch": "0.9.14",
+    "@whatwg-node/fetch": "0.9.16",
     "babel-plugin-ignore-html-and-css-imports": "0.1.0",
     "cheerio": "1.0.0-rc.12",
     "core-js": "3.34.0",

packages/telemetry/package.json

@@ -25,7 +25,7 @@
     "@babel/runtime-corejs3": "7.23.6",
     "@redwoodjs/project-config": "6.0.7",
     "@redwoodjs/structure": "6.0.7",
-    "@whatwg-node/fetch": "0.9.14",
+    "@whatwg-node/fetch": "0.9.16",
     "ci-info": "4.0.0",
     "core-js": "3.34.0",
     "envinfo": "7.11.0",

packages/vite/package.json

@@ -42,7 +42,11 @@
       "types": "./dist/react-server-dom-webpack/node-loader.d.ts",
       "default": "./dist/react-server-dom-webpack/node-loader.js"
     },
-    "./bins/rw-vite-build.mjs": "./bins/rw-vite-build.mjs"
+    "./bins/rw-vite-build.mjs": "./bins/rw-vite-build.mjs",
+    "./middleware": {
+      "types": "./dist/middleware/index.d.ts",
+      "default": "./dist/middleware/index.js"
+    }
   },
   "bin": {
     "rw-dev-fe": "./dist/devFeServer.js",
@@ -70,10 +74,12 @@
     "@redwoodjs/web": "6.0.7",
     "@swc/core": "1.3.60",
     "@vitejs/plugin-react": "4.2.1",
-    "@whatwg-node/server": "0.9.18",
+    "@whatwg-node/fetch": "0.9.16",
+    "@whatwg-node/server": "0.9.24",
     "acorn-loose": "8.3.0",
     "buffer": "6.0.3",
     "busboy": "^1.6.0",
+    "cookie": "0.6.0",
     "core-js": "3.34.0",
     "dotenv-defaults": "5.0.2",
     "express": "4.18.2",
@@ -87,6 +93,7 @@
   "devDependencies": {
     "@babel/cli": "7.23.4",
     "@types/busboy": "^1",
+    "@types/cookie": "^0",
     "@types/express": "4",
     "@types/react": "18.2.37",
     "@types/yargs-parser": "21.0.3",

packages/vite/src/devFeServer.ts

@@ -8,6 +8,7 @@ import { getProjectRoutes } from '@redwoodjs/internal/dist/routes'
 import type { Paths } from '@redwoodjs/project-config'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
+import { invoke } from './middleware/invokeMiddleware'
 import { collectCssPaths, componentsModules } from './streaming/collectCss'
 import { createReactStreamingHandler } from './streaming/createReactStreamingHandler'
 import { registerFwGlobals } from './streaming/registerGlobals'
@@ -80,6 +81,21 @@ async function createServer() {
       : route.pathDefinition
 
     app.get(expressPathDef, createServerAdapter(routeHandler))
+
+    app.post(
+      '*',
+      createServerAdapter(async (req: Request) => {
+        const entryServerImport = await vite.ssrLoadModule(
+          rwPaths.web.entryServer as string // already validated in dev server
+        )
+
+        const middleware = entryServerImport.middleware
+
+        const [mwRes] = await invoke(req, middleware)
+
+        return mwRes.toResponse()
+      })
+    )
   }
 
   const port = getConfig().web.port

packages/vite/src/middleware/CookieJar.test.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* to keep the tests a little cleaner by using ! */
+
+import { describe, expect, test } from 'vitest'
+
+import { CookieJar } from './CookieJar'
+
+describe('CookieJar', () => {
+  // Grabbed from github
+  const cookieJar = new CookieJar(
+    'color_mode=%7B%22color_mode%22%3A%22light%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark_dimmed%22%2C%22color_mode%22%3A%22dark%22%7D%7D; preferred_color_mode=dark; tz=Asia%2FBangkok'
+  )
+
+  test('instatitates cookie jar from a cookie string', () => {
+    expect(cookieJar.get('color_mode')).toStrictEqual({
+      value: JSON.stringify({
+        color_mode: 'light',
+        light_theme: { name: 'light', color_mode: 'light' },
+        dark_theme: { name: 'dark_dimmed', color_mode: 'dark' },
+      }),
+    })
+
+    expect(cookieJar.get('preferred_color_mode')).toStrictEqual({
+      value: 'dark',
+    })
+
+    expect(cookieJar.get('tz')).toStrictEqual({
+      value: 'Asia/Bangkok',
+    })
+  })
+
+  describe('Helper methods like JS Map', () => {
+    test('has', () => {
+      expect(cookieJar.has('color_mode')).toBe(true)
+      expect(cookieJar.has('bazinga')).toBe(false)
+    })
+
+    test('size', () => {
+      expect(cookieJar.size).toBe(3)
+    })
+
+    test('entries', () => {
+      const iterator = cookieJar.entries()
+
+      expect(iterator.next().done).toBe(false)
+      expect(iterator.next().done).toBe(false)
+
+      const finalItem = iterator.next()
+      expect(finalItem.done).toBe(false)
+      expect(finalItem.value).toStrictEqual(['tz', { value: 'Asia/Bangkok' }])
+
+      expect(iterator.next().done).toBe(true)
+    })
+
+    // @MARK: API convention worth discussing!
+    // Unset is a little special, it doesn't actually delete the cookie
+    // but sets it to expire and sets an empty value
+    test('unset', () => {
+      const myJar = new CookieJar('auth_provider=kittens; session=woof-124556')
+
+      myJar.unset('auth_provider')
+
+      const { value: authProviderValue, options: authProviderOptions } =
+        myJar.get('auth_provider')!
+
+      expect(authProviderValue).toBeFalsy()
+      expect(authProviderOptions!.expires).toStrictEqual(new Date(0))
+    })
+
+    test('clear All', () => {
+      const myJar = new CookieJar('auth_provider=kittens; session=woof-124556')
+      myJar.clear()
+      expect(myJar.size).toBe(0)
+    })
+
+    test('clear by name', () => {
+      const myJar = new CookieJar('auth_provider=kittens; session=woof-124556')
+      myJar.clear('session')
+      expect(myJar.size).toBe(1)
+      expect(myJar.get('session')).toBeUndefined()
+    })
+  })
+})