How to access authentication state inside middleware.js in my Next JS app?

I am working on a Next JS app using Firebase Authentication. I have successfully implemented this and also made an AuthContext file to store Authentication functions (login, signup, signout) and manage the Auth state. Here is my AuthContext file:

const AuthContext = createContext();

export default AuthContext;

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState();
  const router = useRouter();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, [user]);

  const handleRegister = async (e) => {
   ...
  };

  const handleLogin = async (e) => {
    const formData = new FormData(e.currentTarget);
    const email = formData.get("email");
    const password = formData.get("password");

    await signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        router.push("/dashboard");
      })
      .catch((error) => {
        ...
      });
  };

  const handleLogout = () => {
    signOut(auth);
  };

  return (
    <AuthContext.Provider
      value={{
        user,
        handleRegister,
        handleLogin,
        handleLogout,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

Also, from NextJS documentation I learnt that:

Middleware in Next.js helps you control who can access different parts
of your website. This is important for keeping areas like the user
dashboard protected while having other pages like marketing pages be
public. It’s recommended to apply Middleware across all routes and
specify exclusions for public access.

So, I have my middleware.js file in the root directory. And have the following code:

import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value
 
  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url))
  }
 
  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url))
  }
}
 
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\.png$).*)'],
}

However, it seems that I am unable to get currentUser as described above. So, how can I access the same using my user’s state from Context? Is there any way to do so? If not what’s ideal way to get user state in the middleware?