feat(middleware): add support for next 13.1 middleware responses

The api page workaround felt as a hack.
With next 13.1 we can directly return a response with headers, which is enough to show the 401 page.

Author: blurrah

README.md

@@ -37,15 +37,6 @@ You can use the `createNextAuthMiddleware` function to create a default middlewa
     }
 ```
 
-Next create the API page that returns the `401` response:
-
-```js
-    // pages/api/auth.ts
-    import { createApiPage } from 'nextjs-basic-auth-middleware'
-
-    export default createApiPage()
-```
-
 **Optional**
 
 You can also use the `nextBasicAuthMiddleware` function to check basic auth in a bigger middleware function:

package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "next": ">=12"
+    "next": ">=13.1"
   },
   "prettier": {
     "printWidth": 80,
@@ -42,7 +42,7 @@
     "@types/node": "14.14.8",
     "husky": "4.3.0",
     "jest": "28.1.3",
-    "next": "12.2.5",
+    "next": "13.2.3",
     "node-mocks-http": "1.9.0",
     "tslib": "2.4.0",
     "tsup": "6.2.2",

src/index.ts

@@ -1,6 +1,2 @@
-export {
-  createApiPage,
-  createNextAuthMiddleware,
-  nextBasicAuthMiddleware,
-} from './middleware'
+export { createNextAuthMiddleware, nextBasicAuthMiddleware } from './middleware'
 export type { MiddlewareOptions } from './types'

src/middleware.ts

@@ -1,4 +1,3 @@
-import { NextApiRequest, NextApiResponse } from 'next'
 import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { basicAuthentication } from './lib/auth'
@@ -16,12 +15,22 @@ import { MiddlewareOptions } from './types'
  * @returns Either a 401 error or goes to the next page
  */
 export const createNextAuthMiddleware =
-  ({ pathname = '/api/auth', users = [] }: MiddlewareOptions = {}) =>
+  ({
+    pathname = '/api/auth',
+    users = [],
+    message = 'Authentication failed',
+    realm = 'protected',
+  }: MiddlewareOptions = {}) =>
   (req: NextRequest) =>
-    nextBasicAuthMiddleware({ pathname, users }, req)
+    nextBasicAuthMiddleware({ pathname, users, message, realm }, req)
 
 export const nextBasicAuthMiddleware = (
-  { pathname = '/api/auth', users = [] }: MiddlewareOptions = {},
+  {
+    pathname = '/api/auth',
+    users = [],
+    message = 'Authentication failed',
+    realm = 'protected',
+  }: MiddlewareOptions = {},
   req: NextRequest
 ) => {
   // Check if credentials are set up
@@ -49,19 +58,8 @@ export const nextBasicAuthMiddleware = (
 
   url.pathname = pathname
 
-  return NextResponse.rewrite(url)
+  return new NextResponse(message, {
+    status: 401,
+    headers: { 'WWW-Authenticate': `Basic realm="${realm}"` },
+  })
 }
-
-/**
- * Create an API page that handles returning a 401 authentication failed message
- * @param realm The protection space
- * @param message Message you want to show to the users
- * @returns Next API page
- */
-export const createApiPage =
-  (realm = 'protected', message = 'Authentication failed') =>
-  (_: NextApiRequest, res: NextApiResponse) => {
-    res.setHeader('WWW-Authenticate', `Basic realm="${realm}"`)
-    res.statusCode = 401
-    res.end(message)
-  }

src/types.d.ts

@@ -3,4 +3,6 @@ import { AuthCredentials } from './lib/credentials'
 export type MiddlewareOptions = {
   pathname?: string
   users?: AuthCredentials
+  message?: string
+  realm?: string
 }