authMiddleware not seting up /api/login endpoint

[oforigyimah]

At first it was working alright util I install a bunch of node deps which cause conflict. I'm not sure which one and why but since then i have been getting 404 not at /api/login.

Same middleware.ts worked at first.
If you can help

[oforigyimah]

There problem was from my middleware.ts, but can I can't seem to find what wrong

import { NextRequest, NextResponse } from "next/server";
import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge";
import { clientConfig, serverConfig } from "@/config/config";

const PUBLIC_PATHS = ['/signin', '/signup', "/reset-password"];
const PROTECTED_PATHS = ['/profile', '/settings', '/dashboard'];

export async function middleware(request: NextRequest) {
    if (PROTECTED_PATHS.some(path => request.nextUrl.pathname.startsWith(path))) {
        return authMiddleware(request, {
            loginPath: "/api/login",
            logoutPath: "/api/logout",
            apiKey: clientConfig.apiKey,
            cookieName: serverConfig.cookieName,
            cookieSignatureKeys: serverConfig.cookieSignatureKeys,
            cookieSerializeOptions: serverConfig.cookieSerializeOptions,
            serviceAccount: serverConfig.serviceAccount,
            handleValidToken: async ({ token, decodedToken, customToken }, headers) => {
                return NextResponse.next({
                    request: {
                        headers
                    }
                });
            },
            handleInvalidToken: async (reason) => {
                console.info('Missing or malformed credentials', { reason });

                return redirectToLogin(request, {
                    path: '/signin',
                    publicPaths: PUBLIC_PATHS
                });
            },
            handleError: async (error) => {
                console.error('Unhandled authentication error', { error });

                return redirectToLogin(request, {
                    path: '/signin',
                    publicPaths: PUBLIC_PATHS
                });
            }
        });
    }

    if (PUBLIC_PATHS.some(path => request.nextUrl.pathname.startsWith(path))) {
        return authMiddleware(request, {
            loginPath: "/api/login",
            logoutPath: "/api/logout",
            apiKey: clientConfig.apiKey,
            cookieName: serverConfig.cookieName,
            cookieSignatureKeys: serverConfig.cookieSignatureKeys,
            cookieSerializeOptions: serverConfig.cookieSerializeOptions,
            serviceAccount: serverConfig.serviceAccount,
            handleValidToken: async ({ token, decodedToken, customToken }, headers) => {
                return redirectToHome(request);
            },
            handleInvalidToken: async (reason) => {
                return NextResponse.next();
            },
            handleError: async (error) => {
                return NextResponse.next();
            }
        });
    }



    return NextResponse.next();
}

export const config = {
    matcher: [
        "/profile",
        "/settings",
        "/dashboard",
        "/profile/:path*",
        "/settings/:path*",
        "/dashboard/:path*",
        "/",
        "/signin",
        "/signup",

    ],
};

I need help

[awinogrodzki]

Hey @oforigyimah!

/api/login is handled by the Middleware, but your config.matcher does not expose this route. You're getting 404, because Next.js skips middleware for /api/login route.

You should update your config to this:

export const config = {
    matcher: [
        "/profile",
        "/settings",
        "/dashboard",
        "/profile/:path*",
        "/settings/:path*",
        "/dashboard/:path*",
        "/",
        "/signin",
        "/signup",
        "/api/login",
        "/api/logout"
    ],
};

[oforigyimah]

Okay, thank you.
So, do I have to provide a specific string in the config.matcher for it to work?

[awinogrodzki]

Yes, you should add those two strings to matcher:

 "/api/login",
 "/api/logout"

[oforigyimah]

thanks