Protecting routes in Next.js App Router middleware

Docs at https://kinde.com/docs/developer-tools/nextjs-sdk/#protect-routes-using-middleware mention:

As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

Should I read this as "currently, protecting routes in the middleware doesn't work, and the code examples mentioned in this docs section won't work either"?

When the user is signed out, and I navigate to http://localhost:3000, I can see that the middleware is hit with the

api/auth/login

api/auth/login

pathname.

// middleware.ts

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest } from "next/server";

export default function middleware(req: NextRequest) {
  console.log("middleware =>", req.nextUrl.pathname);

  return withAuth(req);
}

// middleware.ts

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest } from "next/server";

export default function middleware(req: NextRequest) {
  console.log("middleware =>", req.nextUrl.pathname);

  return withAuth(req);
}

So, I'm trying to understand what exactly is not working in the middleware.

On another note,

withAuth()

withAuth()

doesn't seem to be properly typed. Any plans to have proper types so that we could see for example what type

publicPaths

publicPaths

is in the middleware options? I could probably guess that it's an array of strings, but no idea for example if regex is supported. Having some examples in the docs would also help

Kinde Docs

NextJS App Router SDK - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

Kinde•2y ago•

9 replies

moroshko

Protecting routes in Next.js App Router middleware

Docs at https://kinde.com/docs/developer-tools/nextjs-sdk/#protect-routes-using-middleware mention:

As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

api/auth/login

api/auth/login

pathname.

// middleware.ts

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest } from "next/server";

export default function middleware(req: NextRequest) {
  console.log("middleware =>", req.nextUrl.pathname);

  return withAuth(req);
}

// middleware.ts

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest } from "next/server";

export default function middleware(req: NextRequest) {
  console.log("middleware =>", req.nextUrl.pathname);

  return withAuth(req);
}

So, I'm trying to understand what exactly is not working in the middleware.

On another note,

withAuth()

withAuth()

doesn't seem to be properly typed. Any plans to have proper types so that we could see for example what type

publicPaths

publicPaths

is in the middleware options? I could probably guess that it's an array of strings, but no idea for example if regex is supported. Having some examples in the docs would also help

Kinde Docs

NextJS App Router SDK - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

Protecting routes in Next.js App Router middleware

Similar Threads

Protecting routes in Next.js App Router middleware

Similar Threads

Similar Threads

Similar Threads