Unsolvable cookies() should be awaited Error with Next.js App Router (Turbopack) + Supabase SSR

[Eonis48]

Summary

Experiencing "Route used cookies().get(...). cookies() should be awaited" error in Next.js 15.3.3 App Router with @supabase/ssr, even though cookies() is synchronous. This happens on page loads and Server Actions.

Additional information

Hello everyone,

I'm developing an application using the Next.js App Router and u/supabase/ssr, and I've been stuck for a very long time on a persistent error that I can't seem to solve. I consistently get the following error:

Error: Route "/dashboard" used cookies().get('...'). cookies() should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

This error appears both on page loads (for routes like /dashboard, /tables, etc.) and when Server Actions are executed. The error message suggesting await is misleading because the cookies() function from next/headers is synchronous. I suspect the issue stems from how Next.js (especially with Turbopack) statically analyzes the use of dynamic functions during the rendering process.

Tech Stack:

Next.js: 15.3.3 (using Turbopack)

React: 18.3.1

u/supabase/ssr: ^0.5.1

u/supabase/supabase-js: ^2.45.1

Relevant Code:

src/lib/supabase/server.ts

import { createServerClient, type CookieOptions } from '@supabase/ssr'

import { cookies } from 'next/headers'

export const createClient = () => {

const cookieStore = cookies()

return createServerClient(

process.env.NEXT_PUBLIC_SUPABASE_URL!,

process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

{

cookies: {

get(name: string) {

return cookieStore.get(name)?.value

},

set(name: string, value: string, options: CookieOptions) {

try {

cookieStore.set({ name, value, ...options })

} catch (error) {

// The \set` method was called from a Server Component.`

// This can be ignored if you have middleware refreshing

// user sessions.

}

},

remove(name: string, options: CookieOptions) {

try {

cookieStore.set({ name, value: '', ...options })

} catch (error) {

// The \delete` method was called from a Server Component.`

// This can be ignored if you have middleware refreshing

// user sessions.

}

},

},

}

)

}

src/middleware.ts

import { createServerClient } from '@supabase/ssr'

import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {

let response = NextResponse.next({

request: { headers: request.headers },

})

const supabase = createServerClient(

process.env.NEXT_PUBLIC_SUPABASE_URL!,

process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

{

cookies: {

get: (name) => request.cookies.get(name)?.value,

set: (name, value, options) => {

request.cookies.set({ name, value, ...options })

response = NextResponse.next({ request: { headers: request.headers } })

response.cookies.set({ name, value, ...options })

},

remove: (name, options) => {

request.cookies.set({ name, value: '', ...options })

response = NextResponse.next({ request: { headers: request.headers } })

response.cookies.set({ name, value: '', ...options })

},

},

}

)

await supabase.auth.getUser()

return response

}

export const config = {

matcher: [

'/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',

],

}

What I've Tried (and failed):

Wrapping the createClient function with React.cache.

Marking the get, set, and remove functions in server.ts as async.

Calling cookies() inside each get/set/remove function instead of once at the top.

Fetching user data in the root layout.tsx and passing it down as props.

Updating all Supabase and Next.js packages to their latest versions.

None of these attempts have resolved the issue.

Has anyone encountered this problem before or can spot an error in my code that I'm missing? Could this be a known issue specifically with Turbopack? I would be grateful for any help or suggestions.

Thanks in advance.

Example

No response

[icyJoseph]

Since v15, https://nextjs.org/docs/app/api-reference/functions/cookies, cookies is an asynchronous call, that resolves to the cookie store **

• https://nextjs.org/blog/next-15#async-request-apis-breaking-change
• https://nextjs.org/docs/app/guides/upgrading/version-15#cookies

** There's temporary support to use these synchronously in 15, but the combination of TypeScript support and ongoing feature development makes it a bit hard to land, the more 15 releases happen - like usually, I see people running into this during deploy/build time, cuz during dev things seemingly work fine, although IIRC, there are warnings printed to console.

So in src/lib/supabase/server.ts you should await the cookies, and make the create function into async - or you could rework the associated methods to await for the store...