Merge branch 'main' of github.com:redwoodjs/redwood into feat/dc-dbau…

…th-mw-auth

* 'main' of github.com:redwoodjs/redwood: (21 commits)
  fix(auth): Handle when authorization header is lowercased (#10442)
  Update rbac.md - code match (#10405)
  chore: make crwa e2e test work across branches (#10437)
  feat: [Auth] Common AuthProvider & use* changes for middleware auth (#10420)
  fix(cli): only show webpack options for dev if `bundler = "webpack"` (#10359)
  fix(vercel): specify build env vars as a string (#10436)
  fix(vercel): write `vercel.json` as a part of setup (#10355)
  fix(middleware): Handle POST requests in middleware router too (#10418)
  chore(ci): get ci running on next (#10432)
  RSC: Explain noExternal vite config option (#10429)
  chore(web): Fix .d.ts overwrite build issue (#10431)
  chore(web): .js imports to prep for ESM (#10430)
  chore(refactor): Split rwjs/forms up into several smaller logical units (#10428)
  chore(rsc): simplify `noExternals` config (#10220)
  chore(deps): Update vite to 5.2.8 (#10427)
  chore(auth): Convert `@redwoodjs/auth` to ESM+CJS dual build (#10417)
  chore(framework-tools): Warn about missing metafile (#10426)
  chore(test): Switch rwjs/auth over to vitest (#10423)
  chore(whatwg-fetch): Switch to importing instead of requiring (#10424)
  chore(deps): bump undici from 5.28.3 to 5.28.4 in /.github/actions/check_changesets (#10421)
  ...

.changesets/10355.md

@@ -0,0 +1,3 @@
+- fix(vercel): write `vercel.json` as a part of setup (#10355) by @jtoar
+
+This PR smooths initial deploys to Vercel by writing a `vercel.json` file that specifies an env var that enables Corepack. Users that already successfully deploy to Vercel don't need to introduce this file.

.changesets/10359.md

@@ -0,0 +1,3 @@
+- fix(cli): only show webpack options for dev if `bundler = "webpack"` (#10359) by @jtoar
+
+  A few flags for `yarn rw dev` don't apply to Vite but are shown nevertheless. One of them, `watchNodeModules`, is legacy at this point. It's only useful for testing out framework changes on a project using webpack. It makes the webpack dev server reload on changes to node_modules. The other, `forward` (aliased `fwd`) isn't fundamentally Webpack specific, but has been broken for quite a while because the fix is nontrivial. It seems better to hide these flags for now, otherwise we're just advertising broken or no-op behavior.

.changesets/10418.md

@@ -0,0 +1,3 @@
+- fix(middleware): Handle POST requests in middleware router too (#10418) by @dac09
+
+Fixes issue with middleware router not accepted POST requests.

.changesets/10420.md

@@ -0,0 +1,12 @@
+- feat: [Auth] Common AuthProvider & use* changes for middleware auth #10420 by @dac09 and @dthyresson
+
+* First step of supporting Auth using middleware
+* Ensure backwards compatibility with non-SSR auth
+
+### Breaking Change
+
+Removes `skipFetchCurrentUser` which was used by the no longer existing nHost auth provider, but could potentially have been used by custom auth.
+
+
+
+

.changesets/10442.md

@@ -0,0 +1,2 @@
+- fix(auth): Handle when authorization header is lowercased (#10442) by @dac09
+Handles when 'authorization' header is lowercased, and adds some extra tests.

.github/actions/check_changesets/yarn.lock

@@ -205,11 +205,11 @@ __metadata:
   linkType: hard
 
 "undici@npm:^5.25.4":
-  version: 5.28.3
-  resolution: "undici@npm:5.28.3"
+  version: 5.28.4
+  resolution: "undici@npm:5.28.4"
   dependencies:
     "@fastify/busboy": "npm:^2.0.0"
-  checksum: 10c0/3c559ae50ef3104b7085251445dda6f4de871553b9e290845649d2f80b06c0c9cfcdf741b0029c6b20d36c82e6a74dc815b139fa9a26757d70728074ca6d6f5c
+  checksum: 10c0/08d0f2596553aa0a54ca6e8e9c7f45aef7d042c60918564e3a142d449eda165a80196f6ef19ea2ef2e6446959e293095d8e40af1236f0d67223b06afac5ecad7
   languageName: node
   linkType: hard
 

.github/actions/detect-changes/detectChanges.mjs

@@ -226,7 +226,7 @@ async function main() {
 
   // If there's no branch, we're not in a pull request.
   if (!branch) {
-    core.setOutput('code', false)
+    core.setOutput('code', true)
     core.setOutput('rsc', false)
     core.setOutput('ssr', false)
     return

.vscode/settings.json

@@ -32,6 +32,7 @@
     "memfs",
     "opentelemetry",
     "pino",
+    "Pistorius",
     "redwoodjs",
     "RWJS",
     "tailwindcss",

docs/docs/tutorial/chapter7/rbac.md

@@ -72,6 +72,10 @@ Before we do that, we'll need to make sure that the web side has access to the r
 
 ```javascript title="api/src/lib/auth.js"
 export const getCurrentUser = async (session) => {
+  if (!session || typeof session.id !== 'number') {
+    throw new Error('Invalid session')
+  }
+
   return await db.user.findUnique({
     where: { id: session.id },
     // highlight-next-line

packages/api/src/auth/__tests__/parseAuthorizationHeader.test.ts

@@ -0,0 +1,70 @@
+import type { APIGatewayProxyEvent } from 'aws-lambda'
+import { test, expect, describe } from 'vitest'
+
+import { parseAuthorizationHeader } from '../index'
+
+describe('parseAuthorizationHeader', () => {
+  test('throws error if Authorization header is not valid', () => {
+    const invalidHeaders = [
+      undefined,
+      null,
+      '',
+      'Bearer',
+      'Bearer ',
+      'Bearer token with spaces',
+      'Token',
+      'Token ',
+      'Token token with spaces',
+    ]
+
+    invalidHeaders.forEach((header) => {
+      expect(() =>
+        // @ts-expect-error That's what we're testing
+        parseAuthorizationHeader({ headers: { Authorization: header } }),
+      ).toThrowError('The `Authorization` header is not valid.')
+    })
+  })
+
+  test('returns the schema and token from valid Authorization header', () => {
+    const validHeaders = [
+      'Bearer token',
+      'Bearer 12345',
+      'Token token',
+      'Token 12345',
+    ]
+
+    validHeaders.forEach((header) => {
+      // We only care about the headers in the event
+      const result = parseAuthorizationHeader({
+        headers: { Authorization: header },
+      } as unknown as APIGatewayProxyEvent)
+
+      expect(result).toEqual({
+        schema: header.split(' ')[0],
+        token: header.split(' ')[1],
+      })
+    })
+  })
+
+  test('Handles different lower-casing of the authorization header', () => {
+    const result = parseAuthorizationHeader({
+      headers: { authorization: 'Bearer bazinga' },
+    } as unknown as APIGatewayProxyEvent)
+
+    expect(result).toEqual({
+      schema: 'Bearer',
+      token: 'bazinga',
+    })
+  })
+
+  test('Handles different capital-casing of the Authorization header', () => {
+    const result = parseAuthorizationHeader({
+      headers: { Authorization: 'Bearer bazinga' },
+    } as unknown as APIGatewayProxyEvent)
+
+    expect(result).toEqual({
+      schema: 'Bearer',
+      token: 'bazinga',
+    })
+  })
+})

packages/api/src/auth/index.ts

@@ -33,7 +33,7 @@ export interface AuthorizationHeader {
 export const parseAuthorizationHeader = (
   event: APIGatewayProxyEvent | Request,
 ): AuthorizationHeader => {
-  const parts = getEventHeader(event, 'authorization')?.split(' ')
+  const parts = getEventHeader(event, 'Authorization')?.split(' ')
   if (parts?.length !== 2) {
     throw new Error('The `Authorization` header is not valid.')
   }

packages/auth-providers/supabase/web/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.24.1",
+    "@redwoodjs/auth": "workspace:*",
     "core-js": "3.36.1"
   },
   "devDependencies": {

packages/auth/build.ts

@@ -0,0 +1,36 @@
+import { renameSync, writeFileSync } from 'node:fs'
+
+import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
+
+// ESM build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build-esm.json',
+    format: 'esm',
+    outdir: 'dist/esm',
+    packages: 'external',
+  },
+})
+
+// CJS build
+await build({
+  buildOptions: {
+    ...defaultBuildOptions,
+    tsconfig: 'tsconfig.build.json',
+    packages: 'external',
+  },
+})
+
+// Because the package.json files has `type: module` the CJS entry file can't
+// be named `index.js` because in that case it would be treated as an ESM file.
+// By changing it to .cjs it will be treated as a CommonJS file.
+renameSync('dist/index.js', 'dist/index.cjs')
+
+// Place a package.json file with `type: commonjs` in the dist folder so that
+// all .js files are treated as CommonJS files.
+writeFileSync('dist/package.json', JSON.stringify({ type: 'commonjs' }))
+
+// Place a package.json file with `type: module` in the dist/esm folder so that
+// all .js files are treated as ES Module files.
+writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))

packages/auth/modules.d.ts

@@ -0,0 +1 @@
+declare module 'whatwg-fetch'

packages/auth/package.json

@@ -7,35 +7,37 @@
     "directory": "packages/auth"
   },
   "license": "MIT",
-  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    "types": "./dist/esm/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "default": "./dist/index.cjs"
+  },
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "yarn build:js && yarn build:types",
-    "build:js": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\"",
+    "build": "tsx ./build.ts && yarn build:types",
     "build:pack": "yarn pack -o redwoodjs-auth.tgz",
-    "build:types": "tsc --build --verbose",
+    "build:types": "tsc --build --verbose tsconfig.build.json && tsc --build --verbose tsconfig.build-esm.json",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
-    "test": "jest src",
-    "test:watch": "yarn test --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "7.24.1",
     "core-js": "3.36.1",
     "react": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.1",
-    "@babel/core": "^7.22.20",
+    "@redwoodjs/framework-tools": "workspace:*",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
     "msw": "1.3.3",
-    "typescript": "5.4.3"
+    "tsx": "4.7.1",
+    "typescript": "5.4.3",
+    "vitest": "1.4.0"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }

packages/auth/src/AuthProvider/AuthProvider.tsx

@@ -1,22 +1,22 @@
 import type { ReactNode } 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'
-import { useLogIn } from './useLogIn'
-import { useLogOut } from './useLogOut'
-import { useReauthenticate } from './useReauthenticate'
-import { useResetPassword } from './useResetPassword'
-import { useSignUp } from './useSignUp'
-import { useToken } from './useToken'
-import { useValidateResetToken } from './useValidateResetToken'
+import type { AuthContextInterface, CurrentUser } from '../AuthContext.js'
+import type { AuthImplementation } from '../AuthImplementation.js'
+
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import { ServerAuthContext } from './ServerAuthProvider.js'
+import { useCurrentUser } from './useCurrentUser.js'
+import { useForgotPassword } from './useForgotPassword.js'
+import { useHasRole } from './useHasRole.js'
+import { useLogIn } from './useLogIn.js'
+import { useLogOut } from './useLogOut.js'
+import { useReauthenticate } from './useReauthenticate.js'
+import { useResetPassword } from './useResetPassword.js'
+import { useSignUp } from './useSignUp.js'
+import { useToken } from './useToken.js'
+import { useValidateResetToken } from './useValidateResetToken.js'
 
 export interface AuthProviderProps {
   children: ReactNode

packages/auth/src/AuthProvider/AuthProviderState.ts

@@ -1,4 +1,4 @@
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export type AuthProviderState<TUser, TClient = unknown> = {
   loading: boolean

packages/auth/src/AuthProvider/ServerAuthProvider.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
 
 export type ServerAuthState = AuthProviderState<never> & {
   cookieHeader?: string

packages/auth/src/AuthProvider/useCurrentUser.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import { useToken } from './useToken'
+import { useToken } from './useToken.js'
 
 export const useCurrentUser = (authImplementation: AuthImplementation) => {
   const getToken = useToken(authImplementation)

packages/auth/src/AuthProvider/useForgotPassword.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useForgotPassword = <
   TUser,

packages/auth/src/AuthProvider/useHasRole.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { CurrentUser } from '../AuthContext'
+import type { CurrentUser } from '../AuthContext.js'
 
 export const useHasRole = (currentUser: CurrentUser | null) => {
   /**

packages/auth/src/AuthProvider/useLogIn.ts

@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import { defaultAuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useReauthenticate } from './useReauthenticate'
+import type { AuthProviderState } from './AuthProviderState.js'
+import { defaultAuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useReauthenticate } from './useReauthenticate.js'
 
 export const useLogIn = <
   TUser,

packages/auth/src/AuthProvider/useLogOut.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
+import type { AuthProviderState } from './AuthProviderState.js'
 
 export const useLogOut = <
   TUser,

packages/auth/src/AuthProvider/useReauthenticate.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
-import type { AuthProviderState } from './AuthProviderState'
-import type { useCurrentUser } from './useCurrentUser'
-import { useToken } from './useToken'
+import type { AuthProviderState } from './AuthProviderState.js'
+import type { useCurrentUser } from './useCurrentUser.js'
+import { useToken } from './useToken.js'
 
 const notAuthenticatedState = {
   isAuthenticated: false,

packages/auth/src/AuthProvider/useResetPassword.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { AuthImplementation } from '../AuthImplementation'
+import type { AuthImplementation } from '../AuthImplementation.js'
 
 export const useResetPassword = <
   TUser,