Next middleware issue

[karmic matrix]

With next and middleware, how can you match everything but a specific path? I know you can use RegEx - but I get this error all the time:

`source` does not start with / for route {"source":"^(?!/auth$).*"}

(I am making a route guard middleware to protect everything but the /auth page)

[stuck ginkgo]

Hi @karmic matrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can use a negative lookahead in the matcher configuration to match everything except a specific path. In your case, you want to exclude the /auth page. Here's an example from the extracted information:

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

To adapt this example for your use case, you can modify the regex pattern to exclude the /auth path:

export const config = {
  matcher: '/((?!auth).*)',
};

This configuration will match all paths except /auth. Make sure to use a constant value for the matcher, as dynamic values such as variables will be ignored.

Source: Next.js Middleware - Matching Paths (https://nextjs.org/docs/pages/building-your-application/routing/middleware#matching-paths)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@karmic matrix kapa.ai is still learning and improving, please let us how it did by reacting below

[karmic matrix]

Thanks that works

[karmic matrix]

@stuck ginkgo Do you know why when I use this code for my middleware and the token cookie is not set, it just displays a blank screen and not the auth page properly?

import { NextRequest, NextResponse } from "next/server";
import { verifyAuth } from "./lib/auth";

const redirectToAuth = (requestUrl: string) =>
  NextResponse.redirect(new URL("/auth", requestUrl));

// This middleware function is used for guarding routes (auth).
export function middleware(request: NextRequest) {
  const token = request.cookies.get("token");
  if (!token) return redirectToAuth(request.url);

  const isValid = verifyAuth(token.value);

  if (!isValid) {
    const response = redirectToAuth(request.url);
    response.cookies.delete("token");

    return response;
  }
}

export const config = {
  // prettier-ignore
  matcher: "/((?!auth).*)",
};

[stuck ginkgo]

Let me check the knowledge base for you. One moment! :books:

---

Based on the provided code and the information extracts, it's not clear why you're experiencing a blank screen instead of being redirected to the /auth page. However, I can provide some suggestions to help you debug the issue:

1. Make sure the /auth page exists and is rendering correctly. You can test this by visiting the /auth page directly in your browser.

2. Ensure that the verifyAuth function in ./lib/auth is implemented correctly and returns true or false based on the token's validity.

3. If the issue persists, you can try adding some console.log statements in your middleware function to check the values of token, isValid, and the response object at different stages. This can help you identify where the problem might be occurring.

Remember that the provided code and suggestions are based on the information extracts available. If you still face issues, you might want to consult the Next.js documentation or seek help from the community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: