Simple auth state parsing with middleware in entry server

Author: dac09

packages/api/src/auth/index.ts

@@ -76,6 +76,7 @@ export const getAuthenticationContext = async ({
   }
 
   const { schema, token } = parseAuthorizationHeader(event)
+  console.log(`👉 \n ~ file: index.ts:79 ~ token:`, token)
 
   let authDecoders: Array<Decoder> = []
 

packages/auth-providers/dbAuth/api/src/decoder.ts

@@ -10,6 +10,7 @@ export const createAuthDecoder = (cookieNameOption: string): Decoder => {
       return null
     }
 
+    // @TODO for SSR we need to make sure we are passing the cookie from the FE to the BE
     const session = dbAuthSession(req.event, cookieNameOption)
     const authHeaderUserId = token
 

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)
 

packages/auth/src/AuthProvider/ServerAuthProvider.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import type { AuthProviderState } from './AuthProviderState'
+import { defaultAuthProviderState } from './AuthProviderState'
+
+export const ServerAuthContext = React.createContext<
+  AuthProviderState<never> | undefined
+>(defaultAuthProviderState)
+
+export const ServerAuthProvider = ServerAuthContext.Provider

packages/auth/src/index.ts

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

packages/vite/src/streaming/createReactStreamingHandler.ts

@@ -50,6 +50,8 @@ export const createReactStreamingHandler = async (
       })
     }
 
+    let decodedAuthState
+
     // Do this inside the handler for **dev-only**.
     // This makes sure that changes to entry-server are picked up on refresh
     if (!isProd) {
@@ -59,6 +61,12 @@ export const createReactStreamingHandler = async (
       fallbackDocumentImport = await viteDevServer.ssrLoadModule(
         rwPaths.web.document
       )
+
+      const middleware = entryServerImport.middleware
+
+      if (middleware) {
+        decodedAuthState = await middleware(req)
+      }
     }
 
     const ServerEntry =
@@ -112,6 +120,7 @@ export const createReactStreamingHandler = async (
         cssLinks,
         isProd,
         jsBundles,
+        authState: decodedAuthState,
       },
       {
         waitForAllReady: isSeoCrawler,

packages/vite/src/streaming/streamHelpers.ts

@@ -7,6 +7,8 @@ import type {
   ReactDOMServerReadableStream,
 } from 'react-dom/server'
 
+import { ServerAuthProvider } from '@redwoodjs/auth'
+import type { AuthProviderState } from '@redwoodjs/auth/src/AuthProvider/AuthProviderState'
 import type { TagDescriptor } from '@redwoodjs/web'
 // @TODO (ESM), use exports field. Cannot import from web because of index exports
 import {
@@ -26,6 +28,7 @@ interface RenderToStreamArgs {
   cssLinks: string[]
   isProd: boolean
   jsBundles?: string[]
+  authState?: AuthProviderState<never> | undefined
 }
 
 interface StreamOptions {
@@ -46,7 +49,9 @@ export async function reactRenderToStreamResponse(
     cssLinks,
     isProd,
     jsBundles = [],
+    authState,
   } = renderOptions
+  console.log(`👉 \n ~ file: streamHelpers.ts:54 ~ authState:`, authState)
 
   if (!isProd) {
     // For development, we need to inject the react-refresh runtime
@@ -84,15 +89,21 @@ export async function reactRenderToStreamResponse(
 
   const renderRoot = (path: string) => {
     return React.createElement(
-      ServerHtmlProvider,
+      ServerAuthProvider,
       {
-        value: injectToPage,
+        value: authState,
       },
-      ServerEntry({
-        url: path,
-        css: cssLinks,
-        meta: metaTags,
-      })
+      React.createElement(
+        ServerHtmlProvider,
+        {
+          value: injectToPage,
+        },
+        ServerEntry({
+          url: path,
+          css: cssLinks,
+          meta: metaTags,
+        })
+      )
     )
   }
 

packages/web/src/components/ServerInject.tsx

@@ -70,14 +70,3 @@ export function useServerInsertedHTML(callback: () => React.ReactNode): void {
     addInsertedServerHTMLCallback(callback)
   }
 }
-
-// @TODO use this in streamHelpers final block
-export const AppendToHead = ({ tagsToAppend }: { tagsToAppend: string }) => {
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `document?.head.append(${tagsToAppend})`,
-      }}
-    />
-  )
-}