2.5.0 - Next 13 compatibility

src/authMiddleware/authMiddleware.ts

@@ -16,6 +16,12 @@ const handleMiddleware = async (req, options, onSuccess) => {
 
   const isReturnToCurrentPage = options?.isReturnToCurrentPage;
   const loginPage = options?.loginPage || "/api/auth/login";
+  const callbackPage = "/api/auth/kinde_callback";
+  const registerPage = "/api/auth/register";
+
+  if(loginPage == pathname || callbackPage == pathname || registerPage == pathname) {
+    return NextResponse.next();
+  }
 
   let publicPaths = ["/_next", "/favicon.ico"];
   if (options?.publicPaths !== undefined) {
@@ -28,7 +34,7 @@ const handleMiddleware = async (req, options, onSuccess) => {
     ? `${loginPage}?post_login_redirect_url=${pathname}`
     : loginPage;
 
-  const isPublicPath = loginPage == pathname || publicPaths.some((p) => pathname.startsWith(p));
+  const isPublicPath = publicPaths.some((p) => pathname.startsWith(p));
 
   // getAccessToken will validate the token
   let kindeAccessToken = await getAccessToken(req);

src/handlers/login.ts

@@ -1,3 +1,4 @@
+import { headers } from "next/headers";
 import RouterClient from "../routerClients/RouterClient";
 import { isPreFetch } from "../utils/isPreFetch";
 
@@ -6,7 +7,8 @@ import { isPreFetch } from "../utils/isPreFetch";
  * @param {RouterClient} routerClient
  */
 export const login = async (routerClient: RouterClient) => {
-  if (isPreFetch(routerClient.req)) {
+  const heads = await headers();
+  if (isPreFetch(heads)) {
     return null;
   }
 

src/handlers/logout.ts

@@ -1,3 +1,4 @@
+import { headers } from "next/headers";
 import { config } from "../config/index";
 import RouterClient from "../routerClients/RouterClient";
 import { isPreFetch } from "../utils/isPreFetch";
@@ -7,7 +8,8 @@ import { isPreFetch } from "../utils/isPreFetch";
  * @param {RouterClient} routerClient
  */
 export const logout = async (routerClient: RouterClient) => {
-  if (isPreFetch(routerClient.req)) {
+  const heads = await headers();
+  if (isPreFetch(heads)) {
     return null
   }
 

src/handlers/register.ts

@@ -1,3 +1,4 @@
+import { headers } from "next/headers";
 import RouterClient from "../routerClients/RouterClient";
 import { isPreFetch } from "../utils/isPreFetch";
 
@@ -6,7 +7,8 @@ import { isPreFetch } from "../utils/isPreFetch";
  * @param {RouterClient} routerClient
  */
 export const register = async (routerClient: RouterClient) => {
-  if (isPreFetch(routerClient.req)) {
+  const heads = await headers();
+  if (isPreFetch(heads)) {
     return null
   }
 

src/utils/isPreFetch.test.ts

@@ -1,50 +1,40 @@
 // isPrefetch.test.ts
+import { ReadonlyHeaders } from 'next/dist/server/web/spec-extension/adapters/headers';
 import { isPreFetch } from './isPreFetch';
 import { NextRequest } from 'next/server';
 import { describe, expect, it } from 'vitest';
 
 describe('isPreFetch', () => {
-  const mockNextRequest = (headers: Record<string, string>) => {
-    return {
-      headers: new Headers(headers)
-    } as NextRequest;
+  const mockHeaders = (headers: Record<string, string>) => {
+    return new Headers(headers) as ReadonlyHeaders
   };
 
   it('returns true when purpose header is prefetch', () => {
-    const req = mockNextRequest({ purpose: 'prefetch' });
-    expect(isPreFetch(req)).toBe(true);
+    const headers = mockHeaders({ purpose: 'prefetch' });
+    expect(isPreFetch(headers)).toBe(true);
   });
 
   it('returns true when x-purpose header is prefetch', () => {
-    const req = mockNextRequest({ 'x-purpose': 'prefetch' });
-    expect(isPreFetch(req)).toBe(true);
+    const headers = mockHeaders({ 'x-purpose': 'prefetch' });
+    expect(isPreFetch(headers)).toBe(true);
   });
 
   it('returns true when x-moz header is prefetch', () => {
-    const req = mockNextRequest({ 'x-moz': 'prefetch' });
-    expect(isPreFetch(req)).toBe(true);
+    const headers = mockHeaders({ 'x-moz': 'prefetch' });
+    expect(isPreFetch(headers)).toBe(true);
   });
 
   it('returns false when no prefetch headers are present', () => {
-    const req = mockNextRequest({});
-    expect(isPreFetch(req)).toBe(false);
+    const headers = mockHeaders({});
+    expect(isPreFetch(headers)).toBe(false);
   });
 
   it('returns false when headers have different values', () => {
-    const req = mockNextRequest({ 
+    const headers = mockHeaders({ 
       purpose: 'navigation',
       'x-purpose': 'fetch',
       'x-moz': 'load'
     });
-    expect(isPreFetch(req)).toBe(false);
-  });
-
-  it('handles undefined request gracefully', () => {
-    expect(isPreFetch(undefined as unknown as NextRequest)).toBe(false);
-  });
-
-  it('handles null headers gracefully', () => {
-    const req = { headers: null } as unknown as NextRequest;
-    expect(isPreFetch(req)).toBe(false);
+    expect(isPreFetch(headers)).toBe(false);
   });
 });

src/utils/isPreFetch.ts

@@ -1,9 +1,9 @@
-import { NextRequest } from "next/server";
+import { ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
 
-export function isPreFetch(req: NextRequest): boolean {
-    const isPrefetch = req?.headers && (req?.headers.get('purpose') === 'prefetch' || 
-        req?.headers.get('x-purpose') === 'prefetch' ||
-        req?.headers.get('x-moz') === 'prefetch');
+export function isPreFetch(headers: ReadonlyHeaders): boolean {
+    const isPrefetch = headers.get('purpose') === 'prefetch' || 
+        headers.get('x-purpose') === 'prefetch' ||
+        headers.get('x-moz') === 'prefetch';
 
     return !!isPrefetch;
 }