goal: if a user logs in and tries to access /auth, the middleware would check if they have a session cookie and verify it in the backend, if it's invalid then let them into /auth, else redirect somewhere else
problem: it does not let me into /auth when the session is invalid

middleware:

import { NextResponse } from "next/server";

export async function middleware(request) {
    console.log('[middleware]')
    const sessionCookie = request.cookies.get('session_cookie');
    const { pathname } = request.nextUrl;
    const referer = request.headers.get('referer') // page user is coming from

    if (sessionCookie && pathname.startsWith('/auth')) {
        try {
            const response = await fetch(`${process.env.NEXT_API_URL}/api/auth/verify_session`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Cookie': `session_cookie=${sessionCookie?.value}`
                },
                credentials: 'include',
            });
            const result = await response.json();
            if (!response.ok || 'error' in result) {                
                const response = NextResponse.next();
                response.headers.set('x-session-state', 'expired');
                return response;
            }

            let redirectUrl = '/';
            [redirect logic...]
            return NextResponse.redirect(new URL(redirectUrl, request.url));
        } catch (error) {
            console.log('--[middleware] - ERROR FETCHING VERIFY SESSION:', error);
        }
    }
    return NextResponse.next();
}

// Routes Middleware should not run on
export const config = {
    matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}