feat: Blitz RPC endpoint to the app directory (#4341)

* feat: make `rpchandler` work with `Request` and return a `Response`

* rename: rpcRequestHandler

* feat: improvements

* blitz-auth now works

* return headers

* working

* cleanup

* working sveltekit, with regressin of next.js app dir

* cleanup

* pnpm lock fix

* Update packages/blitz-auth/src/server/auth-plugin.ts

* fix build

* more work

* fixes

* fix issues with auth

* maybe required breaking change

* pointless test

* Update packages/blitz-auth/package.json

* fixes

* fix

* get all tests passing

* more fixes

* changeset

* fixes

* fix

* pnpm lock update

* fix

* update pnpm lcok

* revert unnecessary changes

* imporve api naming

* cleanup

* fix

* Update integration-tests/next-13-app-dir/src/blitz-server.ts

* Apply suggestions from code review

* remove unrelated changes

* Update packages/blitz-auth/src/server/auth-sessions.ts

* fix types

* fix overload

* remove dependence on http module

* review changes

* oops

* fix

* fix types

* Revert "fix types"

This reverts commit b06a4fb.

* Revert "fix"

This reverts commit 47d0cdd.

* Revert "oops"

This reverts commit 94cb558.

* Revert "review changes"

This reverts commit 14d8eb2.

* fix the logic

* sort deps

* template fixes

* chore: add changeset

* chore: remove outdated changeset

* fix changeset formatting

* Update .changeset/tidy-gorillas-confess.md

* remove `blitzAuthRpcMiddleware`

* remove uses of any

* fix jsdoc

* no var

* separate the type imports

* fix unsupported method of session in rsc

* fix

* api changes

* Apply suggestions from code review

Co-authored-by: Brandon Bayer <[email protected]>

* Apply suggestions from code review

* Update .changeset/tidy-gorillas-confess.md

* fix

* fic

---------

Co-authored-by: Brandon Bayer <[email protected]>

Author: siddhsuresh

.changeset/tidy-gorillas-confess.md

@@ -0,0 +1,47 @@
+---
+"blitz": minor
+"@blitzjs/auth": minor
+"@blitzjs/next": minor
+"@blitzjs/rpc": minor
+"@blitzjs/generator": minor
+---
+
+feat: add blitz auth support for the Web `Request` API standard
+
+Usage using the new `withBlitzAuth` adapter in the App Router:
+
+```ts
+import {withBlitzAuth} from "app/blitz-server"
+
+export const {POST} = withBlitzAuth({
+  POST: async (_request, _params, ctx) => {
+    const session = ctx.session
+    await session.$revoke()
+
+    return new Response(
+      JSON.stringify({
+        userId: session.userId,
+      }),
+      {status: 200},
+    )
+  },
+})
+```
+
+feat: New Blitz RPC handler meant to with the next.js app router `route.ts` files
+
+Usage using the new `rpcAppHandler` function
+
+```ts
+// app/api/rpc/[[...blitz]]/route.ts
+import {rpcAppHandler} from "@blitzjs/rpc"
+import {withBlitzAuth} from "app/blitz-server"
+
+// Usage with blitz auth
+export const {GET, POST, HEAD} = withBlitzAuth(rpcAppHandler())
+
+// Standalone usage
+export const {GET, POST, HEAD} = rpcAppHandler()
+```
+
+chore: Update the app directory starter 

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install  --frozen-lockfile
@@ -44,7 +44,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - name: Build
@@ -75,7 +75,7 @@ jobs:
       - name: Setup node@16
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
 
       - name: Install dependencies
@@ -137,7 +137,7 @@ jobs:
         if: matrix.folder != 'next-13-app-dir' || matrix.os != 'windows-latest'
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
 
       - name: Install dependencies

apps/next13/package.json

@@ -22,7 +22,7 @@
     "@tanstack/react-query": "4.0.10",
     "blitz": "2.0.10",
     "flatted": "3.2.7",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "prisma": "^4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/next13/prisma/dev.db

@@ -0,0 +1,4 @@
+import {rpcAppHandler} from "@blitzjs/rpc"
+import {withBlitzAuth} from "src/blitz-server"
+
+export const {GET, POST, HEAD} = withBlitzAuth(rpcAppHandler())

apps/next13/src/app/api/rpc/[[...blitz]]/route.ts

@@ -6,26 +6,27 @@ import {simpleRolesIsAuthorized} from "@blitzjs/auth"
 import {BlitzLogger} from "blitz"
 import {RpcServerPlugin} from "@blitzjs/rpc"
 
-const {api, getBlitzContext, useAuthenticatedBlitzContext, invoke} = setupBlitzServer({
-  plugins: [
-    AuthServerPlugin({
-      cookiePrefix: "web-cookie-prefix",
-      storage: PrismaStorage(db),
-      isAuthorized: simpleRolesIsAuthorized,
-    }),
-    RpcServerPlugin({
-      logging: {
-        disablelevel: "debug",
-      },
-      onInvokeError(error) {
-        console.log("onInvokeError", error)
-      },
-    }),
-  ],
-  logger: BlitzLogger({}),
-})
+const {api, getBlitzContext, useAuthenticatedBlitzContext, invoke, withBlitzAuth} =
+  setupBlitzServer({
+    plugins: [
+      AuthServerPlugin({
+        cookiePrefix: "web-cookie-prefix",
+        storage: PrismaStorage(db),
+        isAuthorized: simpleRolesIsAuthorized,
+      }),
+      RpcServerPlugin({
+        logging: {
+          disablelevel: "debug",
+        },
+        onInvokeError(error) {
+          console.log("onInvokeError", error)
+        },
+      }),
+    ],
+    logger: BlitzLogger({}),
+  })
 
-export {api, getBlitzContext, useAuthenticatedBlitzContext, invoke}
+export {api, getBlitzContext, useAuthenticatedBlitzContext, invoke, withBlitzAuth}
 
 export const cliConfig: BlitzCliConfig = {
   customTemplates: "src/templates",

apps/next13/src/blitz-server.ts

@@ -12,5 +12,5 @@ export default async function getCurrentUser(input: null, ctx: Ctx) {
 }
 
 export const config = {
-  httpMethod: "GET",
+  httpMethod: "POST",
 }

apps/next13/src/pages/api/rpc/[[...blitz]].ts

@@ -31,7 +31,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "openid-client": "5.2.1",
     "prisma": "4.6.1",
     "react": "18.2.0",

apps/next13/src/users/queries/getCurrentUser.ts

@@ -32,7 +32,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "next-auth": "4.24.7",
     "prisma": "4.6.1",
     "react": "18.2.0",

apps/toolkit-app-passportjs/package.json

@@ -11,15 +11,11 @@ const LoginPage: BlitzPage = () => {
       <LoginForm
         onSuccess={(_user) => {
           const next = router.query.next ? decodeURIComponent(router.query.next as string) : "/"
-          // return router.push(next)
+          return router.push(next)
         }}
       />
     </Layout>
   )
 }
 
-LoginPage.authenticate = {
-  redirectTo: "/",
-}
-
 export default LoginPage

apps/toolkit-app/package.json

@@ -26,7 +26,7 @@
     "blitz": "2.0.10",
     "jest": "29.3.0",
     "jest-environment-jsdom": "29.3.0",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "passport-mock-strategy": "2.0.0",
     "passport-twitter": "1.0.4",
     "prisma": "4.6.1",

apps/toolkit-app/src/pages/auth/forgot-password.tsx apps/toolkit-app/src/pages/forgot-password.tsx

@@ -26,7 +26,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
     "delay": "5.0.0",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/toolkit-app/src/pages/auth/login.tsx apps/toolkit-app/src/pages/login.tsx

@@ -23,7 +23,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
     "lowdb": "3.0.0",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/toolkit-app/src/pages/auth/reset-password.tsx apps/toolkit-app/src/pages/reset-password.tsx

@@ -21,14 +21,11 @@ export const authenticateUser = async (email: string, password: string) => {
 }
 
 export default api(async (req, res, ctx) => {
-  const blitzContext = ctx
-
   const user = await authenticateUser(req.query.email as string, req.query.password as string)
-
-  await blitzContext.session.$create({
+  await ctx.session.$create({
     userId: user.id,
     role: user.role as Role,
   })
 
-  res.status(200).json({email: req.query.email, userId: blitzContext.session.userId})
+  res.status(200).json({email: req.query.email, userId: ctx.session.userId})
 })

apps/toolkit-app/src/pages/auth/signup.tsx apps/toolkit-app/src/pages/signup.tsx

@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
     "lowdb": "3.0.0",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

apps/web/package.json

@@ -15,7 +15,7 @@
     "@blitzjs/next": "2.0.10",
     "@blitzjs/rpc": "2.0.10",
     "blitz": "2.0.10",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

integration-tests/auth-with-rpc/package.json

@@ -0,0 +1,15 @@
+import {withBlitzAuth} from "../../../src/blitz-server"
+
+export const {POST} = withBlitzAuth({
+  POST: async (_request, _params, ctx) => {
+    const session = ctx.session
+    await session.$revoke()
+
+    return new Response(
+      JSON.stringify({
+        userId: session.userId,
+      }),
+      {status: 200},
+    )
+  },
+})

integration-tests/auth/package.json

@@ -0,0 +1,11 @@
+import {H} from "@blitzjs/auth/dist/index-0ecbee46"
+import {withBlitzAuth} from "../../../src/blitz-server"
+
+const emptyResponse = async () => {
+  return new Response(null, {status: 200})
+}
+
+export const {POST, HEAD} = withBlitzAuth({
+  POST: emptyResponse,
+  HEAD: emptyResponse,
+})

integration-tests/auth/pages/api/signin.ts

@@ -0,0 +1,4 @@
+import {rpcAppHandler} from "@blitzjs/rpc"
+import {withBlitzAuth} from "../../../../src/blitz-server"
+
+export const {GET, POST, HEAD} = withBlitzAuth(rpcAppHandler())

integration-tests/get-initial-props/package.json

@@ -0,0 +1,38 @@
+import {withBlitzAuth} from "../../../src/blitz-server"
+import prisma from "../../../db/index"
+import {Role} from "../../../types"
+
+export const authenticateUser = async (email: string, password: string) => {
+  const user = await prisma.user.findFirst({where: {email}})
+
+  if (!user) throw new Error("Authentication Error")
+  await prisma.user.update({where: {id: user.id}, data: {hashedPassword: password}})
+
+  const {hashedPassword, ...rest} = user
+  return rest
+}
+
+export const {POST} = withBlitzAuth({
+  POST: async (request: Request, context, ctx) => {
+    const {searchParams} = new URL(request.url)
+    const user = await authenticateUser(
+      searchParams.get("email") as string,
+      searchParams.get("password") as string,
+    )
+
+    await ctx.session.$create({
+      userId: user.id,
+      role: user.role as Role,
+    })
+
+    return new Response(
+      JSON.stringify({email: searchParams.get("email"), userId: ctx.session.userId}),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    )
+  },
+})

integration-tests/middleware/package.json

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

integration-tests/next-13-app-dir/app/api/logout/route.ts

@@ -24,7 +24,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.10",
     "lowdb": "3.0.0",
-    "next": "canary",
+    "next": "14.3.0-canary.28",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -45,6 +45,6 @@
     "node-fetch": "3.2.3",
     "playwright": "1.28.0",
     "ts-node": "10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   }
 }