Pass session into context from middleware

[Mecanik]

Hi,

Is it possible to pass session data from middleware into the worker context?

Thanks

[Mecanik]

To give you a bit more context, since I will post this anyway... I've made an authentication library for this package, all based on Cloudflare products. Reasons for doing this will be posted as well. Since this is all rendered server side, I wish to keep it that way, and not create/user any AuthContext (since this is client side and uses JWT). No JWT is being used here.

Now, since the sessions are controlled in the middleware, it would be nice it there would be a way of passing this session/user data through subsequent pages. This would mean that the page requested, if logged in, would get the session/user data and be able to use that information (like render a welcome message, Hello, ${data?.user.name}).

I was hoping that we could leverage the worker context for this. If this is not possible, then please advise on a way to pass this data onto the requested pages. To be honest, repeating code in every page to retrieve the session/user data is not best practice (since we already do this in the middleware once).

Hope you can help me, keen to post this already!

[dario-piotrowicz]

Hi @Mecanik 👋

Could you maybe put and retrieve things using process.env with some unique key?

That should work nicely as process.env uses an ALS scoped to the current request under the hood:

next-on-pages/packages/next-on-pages/src/buildApplication/generateGlobalJs.ts

Lines 27 to 28 in 64988ca

	get: (_, property) => Reflect.get(envAsyncLocalStorage.getStore(), property),
	set: (_, property, value) => Reflect.set(envAsyncLocalStorage.getStore(), property, value),

Something like creating and using a utility like this:

export function getUserSession() {
  const key = '__unique-auth-session-key__';

  if (process.env[key]) {
    return process.env[key];
  }
 
  const session = // generate user session data
  process.env[key] = session;
  return session;
}

What do you think? would that work for you?

[Mecanik]

Hello Dario 👋

From my understanding you would still request the database on every getUserSession() call no? In which case, how does process.env help? Ideally, since the middle-ware is the "boss" (and should be), you would set the session there, no?

Let me show you my middleware now:

export async function middleware(request: NextRequest) {
  const url = new URL(request.url);
  const pathname = url.pathname;
  const { env } = getRequestContext();

  // Define public paths that should be accessible without authentication
  const publicPaths = [
    "/auth/register",
    "/auth/register-confirm",
    "/auth/login",
    "/auth/password-reset",
    "/api/auth",
  ];

  // Check if the current path is one of the public paths
  const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));

  try {
    // Attempt to retrieve the session cookie
    const cookie = request.cookies.get(env.MK_SESSION_COOKIE_NAME);

    if (cookie) {
      const sessionData = await Database.getUserSession(env, cookie.value);

      // If the user has a valid session (i.e., is logged in)
      if (sessionData && !Utils.isTokenExpired(sessionData.expires_at)) {
        // Redirect logged-in users away from public paths to the homepage
        if (isPublicPath) {
          return NextResponse.redirect(new URL("/", request.url));
        }
        // Allow logged-in users to continue to the rest of the app
        return NextResponse.next();
      }
    }

    // For not logged-in users: allow public paths, restrict others
    if (!isPublicPath) {
      // Redirect to login for any non-public paths if the user is not logged in
      return NextResponse.redirect(new URL("/auth/login", request.url));
    }
  } catch (err) {
    console.error("[_middleware][] Error:", err);
  }

  // Proceed with the request normally for public paths if no session exists
  return NextResponse.next();
}

export const config = {
  matcher: [
    // Paths for dynamic pages and API excluding specified static assets and paths
    "/((?!_next/static|_next/image|favicon.ico|next.svg|vercel.svg|images/|js/|css/|fonts/).*)",
  ],
};

Happy to take any sort of improvements until I post this. I was also thinking if something like return NextResponse.next(session) would be possible, but I'm not a nextjs expert.

[dario-piotrowicz]

From my understanding you would still request the database on every getUserSession() call no?

No, it would request the database only the first time you call getUserSession, all the subsequent times it would reuse the same session data (stored on process.env)

it would also not matter who first calls getUserSession (i.e. the middleware code doesn't necessarily need to be the first one to generate this data for example)

---

Based on your example middleware, it could work something like this:

Utility file:

export function async getUserSession() {
  const { env } = getRequestContext();
  const key = '__unique-auth-session-key__';

  if (process.env[key] !== undefined) {
    return process.env[key];
  }

  // Attempt to retrieve the session cookie
  const cookie = request.cookies.get(env.MK_SESSION_COOKIE_NAME);

  if(!cookie) {
    process.env[key] = null;
    return;
  }

  const sessionData = await Database.getUserSession(env, cookie.value) ?? null;

  process.env[key] = sessionData;
  return sessionData;
}

middleware:

import { getUserSession } from 'utility-file';

export async function middleware(request: NextRequest) {
  const url = new URL(request.url);
  const pathname = url.pathname;

  // Define public paths that should be accessible without authentication
  const publicPaths = [
    "/auth/register",
    "/auth/register-confirm",
    "/auth/login",
    "/auth/password-reset",
    "/api/auth",
  ];

  // Check if the current path is one of the public paths
  const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));

  try {
    const sessionData = await getUserSession();

    // If the user has a valid session (i.e., is logged in)
    if (sessionData && !Utils.isTokenExpired(sessionData.expires_at)) {
        // Redirect logged-in users away from public paths to the homepage
        if (isPublicPath) {
            return NextResponse.redirect(new URL("/", request.url));
        }
        // Allow logged-in users to continue to the rest of the app
        return NextResponse.next();
    }

    // For not logged-in users: allow public paths, restrict others
    if (!isPublicPath) {
      // Redirect to login for any non-public paths if the user is not logged in
      return NextResponse.redirect(new URL("/auth/login", request.url));
    }
  } catch (err) {
    console.error("[_middleware][] Error:", err);
  }

  // Proceed with the request normally for public paths if no session exists
  return NextResponse.next();
}

export const config = {
  matcher: [
    // Paths for dynamic pages and API excluding specified static assets and paths
    "/((?!_next/static|_next/image|favicon.ico|next.svg|vercel.svg|images/|js/|css/|fonts/).*)",
  ],
};

page file:

import { getUserSession } from 'utility-file';

export default function Page() {
  // note: this simply retrieves the session data from `process.env`
  const sessionData = await getUserSession();
  // use sessionData

  // ...
}

what do you think?

---

or am I misunderstanding something?

[Mecanik]

If you believe that process.env can store unique sessions and not cause conflict, this would do yes.

[Mecanik]

I still cannot get my head around this part:

const key = '__unique-auth-session-key__';

  if (process.env[key] !== undefined) {
    return process.env[key];
  }

[Mecanik]

key should be actual session key

[Mecanik]

From my understanding you would still request the database on every getUserSession() call no?

No, it would request the database only the first time you call getUserSession, all the subsequent times it would reuse the same session data (stored on process.env)

it would also not matter who first calls getUserSession (i.e. the middleware code doesn't necessarily need to be the first one to generate this data for example)

Based on your example middleware, it could work something like this:

Utility file:

export function async getUserSession() {
  const { env } = getRequestContext();
  const key = '__unique-auth-session-key__';

  if (process.env[key] !== undefined) {
    return process.env[key];
  }

  // Attempt to retrieve the session cookie
  const cookie = request.cookies.get(env.MK_SESSION_COOKIE_NAME);

  if(!cookie) {
    process.env[key] = null;
    return;
  }

  const sessionData = await Database.getUserSession(env, cookie.value) ?? null;

  process.env[key] = sessionData;
  return sessionData;
}

middleware:

import { getUserSession } from 'utility-file';

export async function middleware(request: NextRequest) {
  const url = new URL(request.url);
  const pathname = url.pathname;

  // Define public paths that should be accessible without authentication
  const publicPaths = [
    "/auth/register",
    "/auth/register-confirm",
    "/auth/login",
    "/auth/password-reset",
    "/api/auth",
  ];

  // Check if the current path is one of the public paths
  const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));

  try {
    const sessionData = await getUserSession();

    // If the user has a valid session (i.e., is logged in)
    if (sessionData && !Utils.isTokenExpired(sessionData.expires_at)) {
        // Redirect logged-in users away from public paths to the homepage
        if (isPublicPath) {
            return NextResponse.redirect(new URL("/", request.url));
        }
        // Allow logged-in users to continue to the rest of the app
        return NextResponse.next();
    }

    // For not logged-in users: allow public paths, restrict others
    if (!isPublicPath) {
      // Redirect to login for any non-public paths if the user is not logged in
      return NextResponse.redirect(new URL("/auth/login", request.url));
    }
  } catch (err) {
    console.error("[_middleware][] Error:", err);
  }

  // Proceed with the request normally for public paths if no session exists
  return NextResponse.next();
}

export const config = {
  matcher: [
    // Paths for dynamic pages and API excluding specified static assets and paths
    "/((?!_next/static|_next/image|favicon.ico|next.svg|vercel.svg|images/|js/|css/|fonts/).*)",
  ],
};

page file:

import { getUserSession } from 'utility-file';

export default function Page() {
  // note: this simply retrieves the session data from `process.env`
  const sessionData = await getUserSession();
  // use sessionData

  // ...
}

what do you think?

or am I misunderstanding something?

Based on your suggestions, this is what I did so far:

session.ts:

export async function getUserSession(
  env: any,
  cookies: any
): Promise<Interfaces.UserSession | null> {
  const cookieValue = cookies.get(env.MK_SESSION_COOKIE_NAME);

  if (!cookieValue) {
    return null;
  }

  // Directly attempt to retrieve the session object from the custom `process.env`
  let sessionData: any = process.env[cookieValue.value];

  if (sessionData) {
    // If the environment supports storing objects, no need for JSON parsing
    return sessionData as Interfaces.UserSession;
  }

  // Fetch from database if not found in `process.env`
  sessionData = await Database.getUserSession(env, cookieValue.value);

  if (sessionData) {
    // Store the session object directly in the custom `process.env` for subsequent requests
    process.env[cookieValue.value] = sessionData;
    return sessionData;
  }

  return null;
}

middleware.ts:

export async function middleware(request: NextRequest) {
  const url = new URL(request.url);
  const pathname = url.pathname;
  const { env } = getRequestContext();

  // Define public paths that should be accessible without authentication
  const publicPaths = [
    "/auth/register",
    "/auth/register-confirm",
    "/auth/login",
    "/auth/password-reset",
    "/api/auth",
  ];

  // Check if the current path is one of the public paths
  const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));

  try {
    const sessionData = await getUserSession(env, request.cookies);

    // If the user has a valid session (i.e., is logged in)
    if (sessionData && !Utils.isTokenExpired(sessionData.expires_at)) {
      // Redirect logged-in users away from public paths to the homepage
      if (isPublicPath) {
        return NextResponse.redirect(new URL("/", request.url));
      }
      // Allow logged-in users to continue to the rest of the app
      return NextResponse.next();
    }

    // For not logged-in users: allow public paths, restrict others
    if (!isPublicPath) {
      // Redirect to login for any non-public paths if the user is not logged in
      return NextResponse.redirect(new URL("/auth/login", request.url));
    }
  } catch (err) {
    console.error("[_middleware][] Error:", err);
  }

  // Proceed with the request normally for public paths if no session exists
  return NextResponse.next();
}

page.ts:

export default async function Home() {
  const { env } = getRequestContext();

  const nextCookies = cookies(); // Get cookies object

  const sessionData = await getUserSession(env, nextCookies);

  console.debug(sessionData);

  ...

Debug Log:

[wrangler:inf] GET / 200 OK (16ms)
[wrangler:inf] GET /vercel.svg 304 Not Modified (2ms)
[wrangler:inf] GET /next.svg 304 Not Modified (4ms)
{
  session_id: 'bfa18f5c61a8be1357d314a5070f46931b383bebcac03cdef4737313c9daf4f275870cbf11d54df5bea6299cd3a74e973bdaf4be4852c1245451dce72ce0bc4a',
  user_id: '42a4f8b5-9c28-45f0-afe0-e0accd4d3e04',
  ip_address: '127.0.0.1',
  user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36',
  created_at: '2024-04-06 18:40:59',
  expires_at: '2024-04-13 18:40:59',
  last_accessed: '2024-04-06 18:40:59'
}
[wrangler:inf] GET / 200 OK (8ms)
[wrangler:inf] GET /vercel.svg 304 Not Modified (4ms)
[wrangler:inf] GET /next.svg 304 Not Modified (2ms)
[wrangler:inf] GET /favicon.ico 304 Not Modified (3ms)
{
  session_id: 'bfa18f5c61a8be1357d314a5070f46931b383bebcac03cdef4737313c9daf4f275870cbf11d54df5bea6299cd3a74e973bdaf4be4852c1245451dce72ce0bc4a',
  user_id: '42a4f8b5-9c28-45f0-afe0-e0accd4d3e04',
  ip_address: '127.0.0.1',
  user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36',
  created_at: '2024-04-06 18:40:59',
  expires_at: '2024-04-13 18:40:59',
  last_accessed: '2024-04-06 18:40:59'
}

Please let me know your thoughts. It seems to persist. I have a few concerns, as this process.env is normally not meant to do this kind of thing, and it seems to only work because it's a custom implementation.