Passing user data from NextJS middleware to the client component

Question

I want to pass the data from the NextJS middleware to the client component. I am using NextJS for the frontend, and an Express API for the backend.

I could do it with X-Headers but what I want to send is user data and it is too sensitive to be sent in the headers. I already thought about sending only the ID and get the user from it fetching the API, but it would be a double request (same problem that I have now, by fetching twice /user/me).

Would making API routes solve the problem? I am also open to change my logic (remove middleware or any else).

Here is my actual middleware:

import { NextRequest, NextResponse } from "next/server";
import { getLoginUser } from "./lib/api/user/getLoginUser";

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl.pathname;
  const cookies = req.cookies;
  const user = await getLoginUser(cookies);

  console.log(`🔐 AuthMiddleware - URL: ${url}, user: ${user}`);

  if (user) {
    console.log("✅ Middleware: Utilisateur déjà authentifié");

    if (url.includes("auth")) {
      console.log("🔄 Redirection vers le tableau de bord");
      return NextResponse.redirect(new URL("/dashboard", req.url));
    }

    return NextResponse.next();
  } else {
    console.log("❌ Middleware: Utilisateur non authentifié");

    if (!url.includes("auth")) {
      return NextResponse.redirect(new URL("/auth/signin", req.url));
    }
  }
}

export const config = {
  matcher:
    "/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
};

yep working on thisr

user26887079
– user26887079

2025-11-20 08:30:56 +00:00
Commented Nov 20 at 8:30 — user26887079
– user26887079, Commented Nov 20 at 8:30

Azam M · Accepted Answer · 2025-11-20 05:30:03Z

1

There are various ways to implement auth, what you have done is good, but it is only a part of the puzzle. Depending on the type of application you are building - whether the data on the page is tightly coupled with the users themselves or static data that remains same for most users, you may get away without an auth check in the in the middleware. I strongly suggest having another check in the components that render the authorized data, as does Next.js.

If you are not heavily reliant on static data, do away with the auth in the middleware, and implement a combination of a user context provider and a DAL as described in the link above.

answered Nov 20 at 5:30

Azam M

1101 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GlicyDev Nov 20 at 8:13

Hello, thank you for your help, I was in fact not understanding the Next.js documentation (reading problems), and you made me understand (If i understood right) that I have to check first in the middleware to redirect and then check in an server component. But so, If i want to have it in a client component, I must pass it in props ?

Azam M Nov 24 at 20:05

Yes, or a context, or a server action.

GlicyDev Nov 26 at 20:37

So, would a zustand store work? I believe that it's the same as a context

Azam M 2 days ago

Zustand looks like it provides state management, on brief review I see nothing wrong with it.

GlicyDev yesterday

Ok, thank you for your answer !

Collectives™ on Stack Overflow

Passing user data from NextJS middleware to the client component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related