502 Errors with updated createServerClient code

[SgtErnestBilko]

Description

When using the recommended createServerClient pattern in Next.js supabase/middleware/updateSession.

Setting cookies on both the request and response (or response alone) causes intermittent 502 errors.

Environment

• Next.js version: 14.2.10
• @supabase/ssr version: 0.5.1
• @supabase/supabase-js version: 2.45.2

Current Recommended Code

const supabase = createServerClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    cookies: {
      getAll() {
        return request.cookies.getAll();
      },
      setAll(cookiesToSet) {
         cookiesToSet.forEach(({ name, value, options }) =>
           request.cookies.set(name, value),
         );
        supabaseResponse = NextResponse.next({
          request,
        });
        cookiesToSet.forEach(({ name, value, options }) =>
          supabaseResponse.cookies.set(name, value, options),
        );
      },
    },
  }
);

Issue

This code results in intermittent 502 errors, which can be cured by deleting cookies on the site and re-logging on. Once a 502 error is triggered the only working solution (apart from deleting cookies) we've found is to set cookies only on the request:

setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            request.cookies.set(name, value),
          );
          // supabaseResponse = NextResponse.next({
          //   request,
          // });
          // cookiesToSet.forEach(({ name, value, options }) =>
          //   supabaseResponse.cookies.set(name, value, options),
          // );
        },

Concerns

While the working solution prevents 502 errors, we're concerned about:

1. Not following the recommended pattern
2. Losing cookie options (secure, sameSite, etc.)
3. Potential authentication issues in the future

Questions

1. Is it safe to only set cookies on the request?
2. Are we losing important security features by not setting cookie options?
3. Is there a recommended way to handle this that avoids the 502 errors?

[silentworks]

What kind of sign in/sign up are you doing when this issue happens? is it when doing email/password, OAuth, magic link...? Are there any errors in your NextJS terminal?

[SgtErnestBilko]

Thank you for your reply

No errors in NextJS terminal. This happens post sign in. The user signs in (user and password) and can navigate site. Sometime later (annoyingly intermittent) users get a 502 when navigating between pages. At that point either I have to 1) re-login 2) delete cookie and re-login or 3) comment out the code (as above)

[bytaesu]

It looks like the issue might be related to the updateSession part in the official documentation. Could I take a look at the file that’s causing the problem?

I’ve uploaded a code to my public GitHub repository that uses Supabase auth with Next.js. Feel free to refer to it, as it might be helpful.

I’ve gone through a lot of the official documentation related to auth, so I’m happy to assist if you need further help!

[SgtErnestBilko]

Thank you. That makes complete sense and I will rewrite the code accordingly.

[bytaesu]

I haven’t encountered a 502 error myself, so I may not be able to provide a definitive solution to your issue. If you manage to resolve it, please consider sharing any insights. Best of luck!

[SgtErnestBilko]

You are kind. Thank you.

I've looked back over github as the app has been working fine. I noticed that

"@supabase/ssr": "latest",
"@supabase/supabase-js": "latest",

had changed to

"@supabase/ssr": "^0.5.1",
"@supabase/supabase-js": "^2.45.2",

The latest version (on npm) of supabase-js is 2.46.1

I have changed back to "latest" for both and ran npm install --package-lock

What is in your package-json ?

I have also added granular error checking and logging. I will let you know (if I may) what this produces if I get another 502

Thanks once again

[bytaesu]

I'm using these!

[SgtErnestBilko]

Tried to change to those versions. Still the same. I did upgrade recently to nextjs 14.2.10 because of a reported cookie vulnerability. I will produce full error logs when I have a solution but basically createServerClient runs fine until it has to setAll() then it changes the values of both request and response cookies and serves up a 502........ It might be related to the NextJS version

[SgtErnestBilko]

so I changed the code back to supabase recommended plus added auth: {persistSession: true,} plus granular logging and error handling (see below).

initial and all successful middleware calls give this log

=== Request cookies ===
 [ 'sb-mask_project_identifier-auth-token' ]

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== returned supabase response cookies ===
 [] 

After an hour or so I get 502 with this log

=== Request cookies ===
 [ 'sb-mask_project_identifier-auth-token' ]

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== GetAll cookies comparison ===
No changes detected

=== Running setAll() ===

=== SetAll cookies comparison (request) ===
Modified: sb-mask_project_identifier-auth-token (value changed)

=== SetAll cookies comparison (response) ===
Modified: sb-mask_project_identifier-auth-token (value changed)

=== returned supabase response cookies ===
 [ 'sb-mask_project_identifier-auth-token' ] 

utilities/supabase/middleware.ts

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

function maskProjectId(cookieName: string): string {
  return cookieName.replace(
    /sb-(.*?)-auth-token/,
    "sb-mask_project_identifier-auth-token",
  );
}

// Modify the compareCookies function to use the mask
function compareCookies(
  label: string,
  original: { name: string; value: string }[],
  modified: { name: string; value: string }[],
) {
  console.log(`\n=== ${label} ===`);

  const originalMap = new Map(
    original.map((c) => [maskProjectId(c.name), c.value]),
  );
  const modifiedMap = new Map(
    modified.map((c) => [maskProjectId(c.name), c.value]),
  );

  let changes = 0;

  // Check for added or modified cookies
  modifiedMap.forEach((value, name) => {
    if (!originalMap.has(name)) {
      console.log(`Added: ${maskProjectId(name)}`);
      changes++;
    } else if (originalMap.get(name) !== value) {
      console.log(`Modified: ${maskProjectId(name)} (value changed)`);
      changes++;
    }
  });

  // Check for removed cookies
  originalMap.forEach((value, name) => {
    if (!modifiedMap.has(name)) {
      console.log(`Removed: ${maskProjectId(name)}`);
      changes++;
    }
  });

  if (changes === 0) {
    console.log("No changes detected");
  }
}

export async function updateSession(request: NextRequest) {
  try {
    console.log(
      `\n=== Request cookies ===\n`,
      request.cookies.getAll().map((c) => maskProjectId(c.name)),
    );

    let supabaseResponse = NextResponse.next({
      request,
    });

    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            try {
              const cookies = request.cookies.getAll();
              compareCookies(
                "GetAll cookies comparison",
                request.cookies.getAll(),
                cookies,
              );
              return cookies;
            } catch (error) {
              console.error("Cookie retrieval error:", error);
              return [];
            }
          },
          setAll(
            cookiesToSet: {
              name: string;
              value: string;
              options: CookieOptions;
            }[],
          ) {
            console.log(`\n=== Running setAll() ===`);
            const initialCookies = request.cookies.getAll();
            //run when (according to claude-3.5-sonnet):
            //Setting the authentication token after login
            //Refreshing the authentication token
            //Clearing the token during logout
            try {
              //   console.log(
              //     "SetAll cookies to set:",
              //     cookiesToSet.map((c) => c.name),
              //   );

              // Log the request cookies before modification
              //   console.log(
              //     "Request cookies before:",
              //     request.cookies.getAll().map((c) => c.name),
              //   );

              cookiesToSet.forEach(({ name, value, options }) =>
                request.cookies.set(name, value),
              );

              // Log the request cookies after modification
              //   console.log(
              //     "Request cookies after:",
              //     request.cookies.getAll().map((c) => c.name),
              //   );

              supabaseResponse = NextResponse.next({ request });

              cookiesToSet.forEach(({ name, value, options }) => {
                supabaseResponse.cookies.set(name, value, options);
                // Log each cookie as it's being set
                //console.log(`Setting cookie in response: ${name}`);
              });

              compareCookies(
                "SetAll cookies comparison (request)",
                initialCookies,
                request.cookies.getAll(),
              );

              compareCookies(
                "SetAll cookies comparison (response)",
                initialCookies,
                Array.from(supabaseResponse.cookies.getAll()),
              );
              //   // Log the final response cookies
              //   const finalCookies = Array.from(
              //     supabaseResponse.cookies.getAll(),
              //   );
              //   console.log(
              //     "Final response cookies:",
              //     finalCookies.map((c) => c.name),
              //   );
              //   if (finalCookies.length === 0) {
              //     console.warn("Warning: supabaseResponse cookies are empty!");
              //     console.log("cookiesToSet:", cookiesToSet);
              //     console.log("supabaseResponse:", supabaseResponse);
              //   }
            } catch (error: unknown) {
              console.error("Cookie setting error:", error);
              if (error instanceof Error) {
                console.error(error.stack);
              }
            }
          },
        },
        auth: {
          persistSession: true,
        },
      },
    );

    // IMPORTANT: Avoid writing any logic between createServerClient and
    // supabase.auth.getUser(). A simple mistake could make it very hard to debug
    // issues with users being randomly logged out.

    const {
      data: { user },
    } = await supabase.auth.getUser();

    if (
      !user &&
      !request.nextUrl.pathname.startsWith("/login") &&
      !request.nextUrl.pathname.startsWith("/auth")
    ) {
      // no user, potentially respond by redirecting the user to the login page
      const url = request.nextUrl.clone();
      url.pathname = "/login";
      return NextResponse.redirect(url);
    }

    // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
    // creating a new response object with NextResponse.next() make sure to:
    // 1. Pass the request in it, like so:
    //    const myNewResponse = NextResponse.next({ request })
    // 2. Copy over the cookies, like so:
    //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
    // 3. Change the myNewResponse object to fit your needs, but avoid changing
    //    the cookies!
    // 4. Finally:
    //    return myNewResponse
    // If this is not done, you may be causing the browser and server to go out
    // of sync and terminate the user's session prematurely!

    console.log(
      "\n=== returned supabase response cookies ===\n",
      supabaseResponse.cookies.getAll().map((c) => maskProjectId(c.name)),
      "\n",
    );
    return supabaseResponse;
  } catch (error) {
    console.error("Critical middleware error:", error);
    return NextResponse.redirect(new URL("/error", request.url));
  }
}

[SgtErnestBilko]

Given up ......... unless anyone has any bright ideas.

We have traced the problem to middleware not updating cookies to refresh token on expiry of JWT token.

Supabase logs show a refresh token being issued, but no matter how much log and error trapping we put into the getAll() and SetAll() functions the same (original JWT) token is returned by code in middleware.

middleware with error trapping and logging

import { NextResponse, type NextRequest } from "next/server";

// Helper function to format cookie value
const formatCookieValue = (value: string) => {
  if (value.length <= 35) return value;
  return `${value.substring(0, 15)}...${value.slice(-20)}`;
};

// Add this helper function
const sanitizeCookieName = (name: string) => {
  // Replace sb-{projectId} with sb-{supabaseID} while preserving the -auth-token suffix
  return name.replace(/sb-[a-z0-9]+(-auth-token)/, "sb-{supabaseID}$1");
};

// Update the cookie logging format
const formatCookieLog = (cookies: { name: string; value: string }[]) => {
  return cookies.map((c) => ({
    name: sanitizeCookieName(c.name),
    value: formatCookieValue(c.value),
  }));
};

export async function updateSession(request: NextRequest) {
  try {
    // Log incoming request cookies
    console.log(
      "Incoming request cookies:",
      request.cookies.getAll().map((c) => ({
        name: sanitizeCookieName(c.name),
        value: formatCookieValue(c.value),
      })),
    );

    let supabaseResponse = NextResponse.next({
      request,
    });

    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            try {
              const cookies = request.cookies.getAll();
              console.log(
                "Supabase getAll cookies:",
                formatCookieLog(
                  cookies.map((c) => ({
                    name: c.name,
                    value: formatCookieValue(c.value),
                  })),
                ),
              );
              return cookies;
            } catch (error) {
              console.error("Failed to get cookies:", error);
              return [];
            }
          },
          setAll(cookiesToSet) {
            try {
              console.log(
                "Attempting to set cookies:",
                cookiesToSet.map((c) => ({
                  name: sanitizeCookieName(c.name),
                  value: formatCookieValue(c.value),
                })),
              );

              cookiesToSet.forEach(({ name, value, options }) => {
                console.log(
                  `Setting browser cookie: ${sanitizeCookieName(name)}, value: ${formatCookieValue(value)}, options:`,
                  options,
                );
                request.cookies.set(name, value);
              });

              supabaseResponse = NextResponse.next({
                request,
              });

              cookiesToSet.forEach(({ name, value, options }) => {
                console.log(
                  `Setting response cookie: ${sanitizeCookieName(name)}, value: ${formatCookieValue(value)}, options:`,
                  options,
                );
                supabaseResponse.cookies.set(name, value, options);
              });

              // Add this debug section
              const finalCookies = supabaseResponse.cookies.getAll();
              console.log(
                "Final cookies detail:",
                finalCookies.map((cookie) => ({
                  name: sanitizeCookieName(cookie.name),
                  value: formatCookieValue(cookie.value),
                  options: {
                    path: cookie.path,
                    maxAge: cookie.maxAge,
                    httpOnly: cookie.httpOnly,
                    secure: cookie.secure,
                  },
                })),
              );

              // Log final state of response cookies
              console.log(
                "Final response cookies:",
                supabaseResponse.cookies.getAll().map((c) => ({
                  name: sanitizeCookieName(c.name),
                  value: formatCookieValue(c.value),
                })),
              );
            } catch (error) {
              console.error("Failed to set cookies:", error);
              throw new Error(`Cookie operation failed: ${error}`);
            }
          },
        },
      },
    );

    // IMPORTANT: Avoid writing any logic between createServerClient and
    // supabase.auth.getUser(). A simple mistake could make it very hard to debug
    // issues with users being randomly logged out.

    const {
      data: { user },
    } = await supabase.auth.getUser().catch((error: Error) => {
      console.error("Failed to get user:", error);
      throw error;
    });

    // Log successful user retrieval with type guard
    if (user?.id) {
      console.log("Successfully retrieved user: ID:", user.id);
      console.log(
        "Supabase response cookies:",
        supabaseResponse.cookies.getAll().map((c) => ({
          name: sanitizeCookieName(c.name),
          value: formatCookieValue(c.value),
        })),
      );
    } else {
      console.log("No user found");
      console.log(
        "Supabase response cookies:",
        supabaseResponse.cookies.getAll().map((c) => ({
          name: sanitizeCookieName(c.name),
          value: formatCookieValue(c.value),
        })),
      );
    }

    if (
      !user?.id &&
      !request.nextUrl.pathname.startsWith("/login") &&
      !request.nextUrl.pathname.startsWith("/auth")
    ) {
      console.log("No user found, redirecting to login page");
      const url = request.nextUrl.clone();
      url.pathname = "/login";
      const redirectResponse = NextResponse.redirect(url);
      console.log(
        "Redirect response cookies:",
        redirectResponse.cookies.getAll().map((c) => ({
          name: sanitizeCookieName(c.name),
          value: formatCookieValue(c.value),
        })),
      );
      return redirectResponse;
    }

    // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
    // creating a new response object with NextResponse.next() make sure to:
    // 1. Pass the request in it, like so:
    //    const myNewResponse = NextResponse.next({ request })
    // 2. Copy over the cookies, like so:
    //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
    // 3. Change the myNewResponse object to fit your needs, but avoid changing
    //    the cookies!
    // 4. Finally:
    //    return myNewResponse
    // If this is not done, you may be causing the browser and server to go out
    // of sync and terminate the user's session prematurely!

    // Log final response cookies before returning
    console.log(
      "Final response cookies:",
      supabaseResponse.cookies.getAll().map((c) => ({
        name: sanitizeCookieName(c.name),
        value: formatCookieValue(c.value),
      })),
    );
    return supabaseResponse;
  } catch (error) {
    console.error("Middleware error:", error);
    const errorResponse = NextResponse.redirect(new URL("/error", request.url));
    // Log the error response cookies
    console.log(
      "Error response cookies:",
      errorResponse.cookies.getAll().map((c) => ({
        name: sanitizeCookieName(c.name),
        value: formatCookieValue(c.value),
      })),
    );
    return errorResponse;
  }
}

Produces these console log entries

Incoming request cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]

Supabase getAll cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
x 5

Attempting to set cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]

Setting browser cookie: sb-{supabaseID}-auth-token, value: base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19, options: { path: '/', sameSite: 'lax', httpOnly: false, maxAge: 34560000 }
Setting response cookie: sb-{supabaseID}-auth-token, value: base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19, options: { path: '/', sameSite: 'lax', httpOnly: false, maxAge: 34560000 }

Supabase response cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]

After days of research and testing the only workaround we can come up with is to extend the JWT expiry time and add an automatic logout for any session that exceeds the expiry time. Seems a shame as the suggested supabase middleware code seems to work in production, but we can't take the risk that users get repeated 502 pages.

[SgtErnestBilko]

You are very kind and I appreciate your help. Rather than incorporate the whole of your solution. I have incorporated both the middleware files as follows (i.e. simply commenting out the redirection directives):

src/middleware

import { authMiddleware } from "./utils/supabase/middleware";

//import { AUTH_ROUTES, ONLY_PRIVATE_ROUTES, ONLY_PUBLIC_ROUTES } from "./lib/supabase/auth-config";

export async function middleware(request: NextRequest) {
  const {
    supabaseResponse,
    user,
    // error
  } = await authMiddleware(request);

  /**
   * Error Handling
   * Additional error handling logic can be added here, if needed.
   */
  // if (error) {}

  // // Redirect unauthenticated users from private-only routes to the sign-in page.
  // const isOnlyPrivateRoute = ONLY_PRIVATE_ROUTES.some((path) => request.nextUrl.pathname.startsWith(path));
  // if (!user && isOnlyPrivateRoute) {
  //   return NextResponse.redirect(new URL(AUTH_ROUTES.Public.SignIn, request.url));
  // }

  // // Redirect authenticated users from public-only routes to the private home.
  // const isOnlyPublicRoute = ONLY_PUBLIC_ROUTES.some((path) => request.nextUrl.pathname.startsWith(path));
  // if (user && isOnlyPublicRoute) {
  //   return NextResponse.redirect(new URL(AUTH_ROUTES.Private.PrivateHome, request.url));
  // }

  return supabaseResponse;
}

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

and lib/supabase/middleware.ts

import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

/**
 * Middleware function to handle user authentication.
 * Retrieves the current user's session from Supabase and sets cookies for responses.
 */
export async function authMiddleware(request: NextRequest) {
  // Initialize the response object to proceed to the next middleware or handler
  const supabaseResponse = NextResponse.next();

  // Create a Supabase client with server-side configurations
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "",
    {
      // Custom cookies handling for Next.js
      cookies: {
        // Retrieves all cookies from the incoming request
        getAll: () => request.cookies.getAll(),

        // Sets all cookies on the outgoing response
        setAll: (cookiesToSet) => {
          cookiesToSet.forEach(({ name, value, options }) => {
            supabaseResponse.cookies.set(name, value, options);
          });
        },
      },
    },
  );

  /**
   * IMPORTANT: Avoid writing any logic between createServerClient and
   * supabase.auth.getUser(). A simple mistake could make it very hard to debug
   * issues with users being randomly logged out.
   */
  const {
    data: { user },
    error,
  } = await supabase.auth.getUser();

  /**
   * IMPORTANT: You *must* return the supabaseResponse object as it is.
   * Return the supabaseResponse, user data, and any error for further processing
   */
  return { supabaseResponse, user, error };
}

I'm still getting 502 on the expiry of the JWT token.

Does your solution work for you in development as well as production ?

[SgtErnestBilko]

Could you add some logs to see if your code is changing the cookies in your setup ? You would need to 'hit' the middleware once before jwt expiry and once after.

import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

// Helper function to format cookie value
const formatCookieValue = (value: string) => {
  if (value.length <= 35) return value;
  return `${value.substring(0, 15)}...${value.slice(-20)}`;
};

const sanitizeCookieName = (name: string) => {
  // Specifically match sb-XXXXX-auth-token pattern
  return name.replace(/sb-[a-z0-9]+-auth-token/, "sb-{supabaseID}-auth-token");
};

/**
 * Middleware function to handle user authentication.
 * Retrieves the current user's session from Supabase and sets cookies for responses.
 */
export async function authMiddleware(request: NextRequest) {
  // Initialize the response object to proceed to the next middleware or handler
  let supabaseResponse = NextResponse.next();

  // Log incoming request cookies
  console.log(
    "Incoming request cookies:",
    request.cookies.getAll().map((c) => ({
      name: sanitizeCookieName(c.name),
      value: formatCookieValue(c.value),
    })),
  );

  // Create a Supabase client with server-side configurations
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "",
    {
      // Custom cookies handling for Next.js
      cookies: {
        // Retrieves all cookies from the incoming request
        getAll: () => request.cookies.getAll(),

        // Sets all cookies on the outgoing response
        setAll: (cookiesToSet) => {
          cookiesToSet.forEach(({ name, value, options }) => {
            supabaseResponse.cookies.set(name, value, options);
          });
        },
      },
    },
  );

  /**
   * IMPORTANT: Avoid writing any logic between createServerClient and
   * supabase.auth.getUser(). A simple mistake could make it very hard to debug
   * issues with users being randomly logged out.
   */
  const {
    data: { user },
    error,
  } = await supabase.auth.getUser();

  if (user?.id) {
    console.log("Successfully retrieved user");
    console.log(
      "Supabase response cookies:",
      supabaseResponse.cookies.getAll().map((c) => ({
        name: sanitizeCookieName(c.name),
        value: formatCookieValue(c.value),
      })),
    );
  }

  /**
   * IMPORTANT: You *must* return the supabaseResponse object as it is.
   * Return the supabaseResponse, user data, and any error for further processing
   */
  return { supabaseResponse, user, error };
}

It produces (before and after JWT expiry) for me....

Incoming request cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...ueW1vdXMiOmZhbHNlfX0'
}
]
Successfully retrieved user
Supabase response cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...ueW1vdXMiOmZhbHNlfX0'
}
]

[bytaesu]

hold on

I will reply within 30 minutes.

[bytaesu]

I tested your code, but I’m not sure how to interpret the debugging results. What do you think is the main point of the problem?

[SgtErnestBilko]

Thank you. This is what I know....

1. If (for testing purposes only) I reduce Access token (JWT) expiry time to 60s
2. The initial JWT token works for a) my supabase middleware, your supabase middleware and supabase recommended middleware. I can access all authorised routes and pages etc
3. After 60s I get a 502 error in development but the production server (runs off same supabase auth and db) continues to work as expected.
4. As I understand it the switch from JWT to refresh token is handled by getUser().
5. My log was supposed to show that the token had not changed. BUT I don't think that is correct as the changes are hidden deeper in the cookie value. So.... I'm sorry for wasting your time. I have more debug code but I think it shows that getUser does indeed change the access token.

Can we go back to my question "does your code work in development as well as production"

[bytaesu]

My Settings for debugging

• Access token (JWT) expiry time : 20 seconds
• Refresh token reuse interval : 10 seconds

Case 1. Not authenticated

----- Auth Middleware Start -----
Incoming request cookies: []
Supabase auth error:  [AuthSessionMissingError: Auth session missing!] {
  __isAuthError: true,
  name: 'AuthSessionMissingError',
  status: 400,
  code: undefined
}
No user found.
----- Auth Middleware End -----

Case 2. Authenticated

----- Auth Middleware Start -----
Incoming request cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
Setting cookie: sb-mebgtnholeaxodgunsct-auth-token=base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19
Successfully retrieved user: 81f8cc55-58b4-4b02-bad5-1d458da91310
Supabase response cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
----- Auth Middleware End -----

Case 3. Refresh browser 5 seconds after Case 2

----- Auth Middleware Start -----
Incoming request cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
Successfully retrieved user: 81f8cc55-58b4-4b02-bad5-1d458da91310
Supabase response cookies: []
----- Auth Middleware End -----

Case 4. Refresh browser 30 seconds after Case 2

----- Auth Middleware Start -----
Incoming request cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
Setting cookie: sb-mebgtnholeaxodgunsct-auth-token=base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19
Successfully retrieved user: 81f8cc55-58b4-4b02-bad5-1d458da91310
Supabase response cookies: [
  {
  name: 'sb-{supabaseID}-auth-token',
  value: 'base64-eyJhY2Nl...bnltb3VzIjpmYWxzZX19'
}
]
----- Auth Middleware End -----

Case 5. Sign out event

----- Auth Middleware Start -----
Incoming request cookies: []
Supabase auth error:  [AuthSessionMissingError: Auth session missing!] {
  __isAuthError: true,
  name: 'AuthSessionMissingError',
  status: 400,
  code: undefined
}
No user found.
----- Auth Middleware End -----
----- Auth Middleware Start -----
Incoming request cookies: []
Supabase auth error:  [AuthSessionMissingError: Auth session missing!] {
  __isAuthError: true,
  name: 'AuthSessionMissingError',
  status: 400,
  code: undefined
}
No user found.
----- Auth Middleware End -----

My Research

• Request Cookies: These are cookies included when the client sends a request to the server. In this case, the sb-{supabaseID}-auth-token cookie is used to verify the user’s authentication status.
• Response Cookies: These are cookies set by the server when sending a response to the client. When an auth state change event occurs, the authentication token is set. However, if the user is already authenticated and within the refresh token reuse interval, the cookie is not reset.

When an event occurs on the server, createSupabaseClient resets the cookie through the response. The relevant part of the source code in the @supabase/ssr package is included below.

My Conclusion

I have not encountered 502 error. Just in case, I even changed the URL configuration, but I did not face such problems. If any issues arise, they do not seem to be related to this. However, you had asked about setting cookies only through the request cookies initially, but I recommend setting cookies through response cookies. As I understand it, this makes sense in the flow. I even believe that the Supabase Auth official documentation needs to be updated.

Client (Browser)
       |
       | HTTP Request (including Request Cookies)
       v
    Server (Next.js Middleware)
       |
       | Supabase Client Request
       v
   Supabase Server
       |
       | Supabase Response
       v
    Server (Next.js Middleware)
       |
       | Set Response Cookies (if necessary)
       v
    Client (Browser)

Good luck

[SgtErnestBilko]

I'm lost !!!!!

Your code and logic should work. Indeed it does work for you and judging by the lack of issues / discussion / bugs relating to the response object, that's the same for the vast majority if not of developers. I think it did work for us (in development) but I have spent so much time in the last few days writing and rewriting code that maybe it is my imagination and it didn't. Maybe the problem was masked by a jwt expiry time of 1 hour. Maybe our development server was always restarted before the hour was up.

I have spent days coding and recoding. Error checking and logging to small details. I've used old dependancies, in between and the latest. I have reverted to previous gitHub code. I have used vercel A0 and claude-3.5-sonnet. I've used my middleware, your middleware and plain supabase recommended middleware and still the same situation persists.

While the jwt token is current:

1. middleware code produces an authenticated user
2. the server code runs on the destination page / route
3. GET /destination route returns a 200 response
4. The page renders.

After the JWT token expires

1. middleware code produces an authenticated user
2. the server code runs on the destination page / route
3. GET /destination route returns a 200 response
4. 502 error

The only way to stop a 502 is to comment out any lines relating to set / setAll for response cookies. Am I right in thinking this comment out should not work ??

I cannot bring myself to simply comment out the code and move on, because I believe it shouldn't work. We have a working production app and I cannot risk pulling new code until I understand why I am experiencing this problem and why (if its true) commenting out set / setAll for response cookies solves the issue.

As always, think you for your help.

[SgtErnestBilko]

FFS............. someone in the organisation changed the dns settings and or Proxy Server setup so that it was refusing to update connections from the refresh token but accepting them from the JWT token.

I am sorry for wasting your time. I do like your code and intend to change mine in line with yours.