how to use dynamic routes in middleware.js

[dhavalveera]

Hello,

I was looking in the NextAuth documentation to protect the pages using the middleware.js file, and I found the code snippet from NextAuth's Documentation.

export { default } from "next-auth/middleware"

export const config = { matcher: ["/dashboard"] }

here, I have a question, as in matcher it passes the regular page (file) name, but how to protect the dynamic pages? e.g. /pages/[productId]/index.js or /pages/product/[index].js, how to protect those kinds of pages using the middleware.js file?

also, as per the example shared above, if I hit the URL/dashboard page directly then it'll redirect to the Login page, then after successful Login, does it'll redirect back to the Dashboard Page?

also, if I use a Custom Login Page instead of NextAuth's default Login Page, then this middleware will work the same way?

please explain/help me here.

[thomaskokholm]

The matcher follow the same logic as the routes in Next.js.

In your case. If you want to protect both "/product" route and the "/product/[productId]" route you would write your middleware this way:

export { default } from "next-auth/middleware"

export const config = {
  matcher: [
    "/product",
    "/product/:productId"
  ],
};

[codegeekery]

You can try "/Dashboard/:path*" that also can work

[rosshabe]

Well , I have tries still same issue ,
so I have implemented a temporary fix on server actions of each page to redirect users on address page if address is not set

[codegeekery]

just a little question. have you already try like this example

import { NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url)) <---- so here you can tell the code what place have to redirect if user is 
                                                                   not authenticated yet
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*', <---- here you can configure the path
}

if you want pass more path you can do like this matcher: ['/Dashboard','/Account', '/Account/Billing' , '/Dashboard/:path*']

you can watch more about this here Link

NOTE: you have to create the middleware.js at the beginning of the project root

Now if thing that you need is send a message of error 404

you can generate a custom 404 error writing not-found.js in the app folder

for example i use this

import Link from 'next/link';


export default function NotFound() {

    return (
        <main className="h-screen w-full flex flex-col justify-center items-center bg-[#1A2238]">
            <h1 className="text-9xl font-extrabold text-white tracking-widest">404</h1>
            <div className="bg-[#FF6A3D] px-2 text-sm rounded rotate-12 absolute">
                Page Not Found
            </div>
            <Link href="/Choice">
                <a className="mt-5">
                    <div className="relative inline-block text-sm font-medium text-[#FF6A3D] group active:text-orange-500 focus:outline-none focus:ring">
                        <span className="absolute inset-0 transition-transform translate-x-0.5 translate-y-0.5 bg-[#FF6A3D] group-hover:translate-y-0 group-hover:translate-x-0"></span>
                        <span className="relative block px-8 py-3 bg-[#1A2238] border border-current">Go Back!</span>
                    </div>
                </a>
            </Link>
        </main>
    );
}

[rosshabe]

Yes totally I have tried that approach and read the documentation I have a dynamic page /sort/[name] which sorts the list of restaurants
based on the customer's current address what I want to happen is that if customers visit the sort page and they haven't set the address cookie a middleware has to redirect them to the address set up page so I have set matcher as below.

export const config = { matcher: ['/', '/user/:path*', '/sort/(.*)' ], }
/ page works but if I try /sort:name or /sort/(.*) strange it doesn't work.

What might be the issue?

[codegeekery]

I have no idea what could be happening for the redirection not to work.

I suppose that all your variables in 'cookies' and 'store' are being retrieved correctly. Have you used 'console.log()' to see if the data is arriving? Certainly, something may be getting received incorrectly.

[Redskinsjo]

You have the possibility to match like this for this path:

/product/[productId]

matcher: [ "/product/:productId/:path" ]

[Inayatkhan9909]

You can also you custom middleware and authenticate dynamic routes as

const dynamicRouteRegex = /^/products/[^\/]+$/;
if (!isAuthenticated && dynamicRouteRegex.test(path)) {
const loginUrl = new URL('/user/login', request.url);
loginUrl.searchParams.set('redirectTo', path);
return NextResponse.redirect(loginUrl);
}
matcher: ['/products/:productid*']