RSC: Add auth support to ClientRouter

packages/vite/src/ClientRouter.tsx

@@ -4,36 +4,87 @@
 import React, { useMemo } from 'react'
 
 import { analyzeRoutes } from '@redwoodjs/router/dist/analyzeRoutes'
+import { AuthenticatedRoute } from '@redwoodjs/router/dist/AuthenticatedRoute'
 import { LocationProvider, useLocation } from '@redwoodjs/router/dist/location'
 import { namedRoutes } from '@redwoodjs/router/dist/namedRoutes'
 import type { RouterProps } from '@redwoodjs/router/dist/router'
+import { RouterContextProvider } from '@redwoodjs/router/dist/router-context'
 
 import { rscFetch } from './rsc/rscFetchForClientRouter'
 
-export const Router = ({ paramTypes, children }: RouterProps) => {
+export const Router = ({ useAuth, paramTypes, children }: RouterProps) => {
   return (
     // Wrap it in the provider so that useLocation can be used
     <LocationProvider>
-      <LocationAwareRouter paramTypes={paramTypes}>
+      <LocationAwareRouter paramTypes={paramTypes} useAuth={useAuth}>
         {children}
       </LocationAwareRouter>
     </LocationProvider>
   )
 }
 
-const LocationAwareRouter = ({ paramTypes, children }: RouterProps) => {
+const LocationAwareRouter = ({
+  useAuth,
+  paramTypes,
+  children,
+}: RouterProps) => {
   const { pathname, search } = useLocation()
 
-  const { namedRoutesMap } = useMemo(() => {
+  const analyzeRoutesResult = useMemo(() => {
     return analyzeRoutes(children, {
       currentPathName: pathname,
       userParamTypes: paramTypes,
     })
   }, [pathname, children, paramTypes])
 
+  const { namedRoutesMap, pathRouteMap, activeRoutePath } = analyzeRoutesResult
+
   // Assign namedRoutes so it can be imported like import {routes} from 'rwjs/router'
   // Note that the value changes at runtime
   Object.assign(namedRoutes, namedRoutesMap)
 
+  // No activeRoutePath basically means 404.
+  // TODO (RSC): Add tests for this
+  // TODO (RSC): Figure out how to handle this case better
+  if (!activeRoutePath) {
+    // throw new Error(
+    //   'No route found for the current URL. Make sure you have a route ' +
+    //     'defined for the root of your React app.',
+    // )
+    return rscFetch('__rwjs__Routes', { location: { pathname, search } })
+  }
+
+  const requestedRoute = pathRouteMap[activeRoutePath]
+
+  // Need to reverse the sets array when finding the private set so that we
+  // find the inner-most private set first. Otherwise we could end up
+  // redirecting to the wrong route.
+  // TODO (RSC): Add tests for finding the correct unauthenticated prop
+  const reversedSets = requestedRoute.sets.toReversed()
+
+  const privateSet = reversedSets.find((set) => set.isPrivate)
+
+  if (privateSet) {
+    const unauthenticated = privateSet.props.unauthenticated
+    if (!unauthenticated || typeof unauthenticated !== 'string') {
+      throw new Error(
+        'You must specify an `unauthenticated` route when using PrivateSet',
+      )
+    }
+
+    return (
+      <RouterContextProvider
+        useAuth={useAuth}
+        paramTypes={paramTypes}
+        routes={analyzeRoutesResult}
+        activeRouteName={requestedRoute.name}
+      >
+        <AuthenticatedRoute unauthenticated={unauthenticated}>
+          {rscFetch('__rwjs__Routes', { location: { pathname, search } })}
+        </AuthenticatedRoute>
+      </RouterContextProvider>
+    )
+  }
+
   return rscFetch('__rwjs__Routes', { location: { pathname, search } })
 }

tasks/smoke-tests/rsc-kitchen-sink/tests/rsc-kitchen-sink.spec.ts

@@ -26,8 +26,18 @@ test.beforeAll(async ({ browser }) => {
     // TODO (RSC): When we get toasts working we should check for a toast
     // message instead of network stuff, like in signUpTestUser()
     page.waitForResponse(async (response) => {
+      // Status >= 300 and < 400 is a redirect
+      // We get that sometimes for things like
+      // http://localhost:8910/assets/jsx-runtime-CGe0JNFD.mjs
+      if (response.status() >= 300 && response.status() < 400) {
+        return false
+      }
+
       const body = await response.body()
-      return body.includes(`Username \`${testUser.email}\` already in use`)
+      return (
+        response.url().includes('middleware') &&
+        body.includes(`Username \`${testUser.email}\` already in use`)
+      )
     }),
   ])