The Shift to @supabase/ssr
If you are upgrading to Next.js 16, the old @supabase/auth-helpers-nextjs package is officially deprecated and will cause severe SSR issues. The new standard is @supabase/ssr, which provides a much more robust mechanism for handling cookies across the server, client, and middleware.
The Middleware Proxy Issue
One of the most common issues developers face when implementing Supabase Auth in Next.js 16 is infinite redirects or stale sessions in Edge Middleware.
This happens because you must explicitly refresh the session and update the response cookies before returning the NextResponse.
The Correct Implementation
// middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'
export async function middleware(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, options }) => request.cookies.set(name, value))
supabaseResponse = NextResponse.next({
request,
})
cookiesToSet.forEach(({ name, value, options }) =>
supabaseResponse.cookies.set(name, value, options)
)
},
},
}
)
// IMPORTANT: Avoid calling getUser() multiple times
const { data: { user } } = await supabase.auth.getUser()
// Route protection logic here...
return supabaseResponse
}By ensuring cookies are correctly passed back to the supabaseResponse, you eliminate the stale session bugs that plague Next.js SSR authentication flows.
Free Consultation
Got a project?
Safe & private. Privacy Policy
