SupabaseS
Supabase•2mo ago
upo

Cookies get deleted

Hi. I cannot fix this issue for the life of me. I am following the docs for nextjs 1:1 and have tried about everything I can. But after logging in and redirecting on the server, my sb cookie gets deleted. If I log in on the client and redirect with the route, the cookie survives but gets deleted after a refresh. Both of this only happens in production builds and works perfectly fine in dev builds.

versions:
"next": "16.0.1", "@supabase/ssr": "^0.7.0", "@supabase/supabase-js": "^2.79.0",

my middleware client:

import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';
import { match } from 'path-to-regexp';

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  });

  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 }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({
            request,
          });
          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 protectedPages = [
    '/dashboard',
    '/private-item',
    '/private-items',
    '/items',
    '/item',
  ];

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

  // if user doesn't exist and the page is protected, redirect to login
  if (
    !user &&
    protectedPages.some((page) => {
      // eslint-disable-next-line no-unexpected-multiline
      const matcher = match(page);
      return matcher(request.nextUrl.pathname);
    })
  ) {
    // 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!

  return supabaseResponse;
}
`

my middleware:

import { type NextRequest } from 'next/server';
import { match } from 'path-to-regexp';
import { updateSession } from './utils/supabase/middleware';

const apiRoutes = ['/api{/*path}'];

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // api routes are not handled by middleare for this project.
  if (apiRoutes.some((route) => match(route)(pathname))) {
    return null;
  }
  if (request.nextUrl.pathname) return await updateSession(request);
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico)$).*)',
  ],
};
Was this page helpful?