Dynamic server usage: Page couldn't be rendered statically because it used cookies

[nicitaacom]

Link to the code that reproduces this issue

codsandbox - https://codesandbox.io/p/github/nicitaacom/auth-cookie-supabase-willbedeleted/auth-form-next
github repository (userIcon.tsx) - https://github.com/nicitaacom/auth-cookie-supabase-willbedeleted/blob/auth-form-next/app/components/Navbar/components/UserIcon.tsx
github repository (userIcon.tsx) - https://github.com/nicitaacom/auth-cookie-supabase-willbedeleted/blob/auth-form-next/app/utils/supabaseServer.ts

To Reproduce

1. Use auth with cookies and supabase
2. Got this error

Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

Current vs. Expected behavior

I wait no error but I got the error

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

![image](https://github.com/vercel/next.js/assets/39565703/d7f0fe3d-b94c-424b-aa5e-d4bcb37971ce)
![image](https://github.com/vercel/next.js/assets/39565703/a19ca3e4-9fe5-4615-bd76-985eec35e509)

Which area(s) are affected? (Select all that apply)

Dynamic imports (next/dynamic)

Additional context

Similar issue - #49373

middleware.ts

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req:NextRequest) {
	const res = NextResponse.next();
	const supabase = createMiddlewareClient({ req, res });
	await supabase.auth.getSession();
	return res;
}

app/api/auth/callback/route.ts

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

app/utils/supabaseServer.ts

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


const supabaseServer = createServerComponentClient({ cookies })

export default supabaseServer

Update:I updated reproduction link - now you able to open it and have access

[jonashaven]

Did you try the following?

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";

export default () => {
  cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient({ cookies });
};

You can then import and use it like this:

import supabaseServer from "./supabaseServer";

export const isAuthentificatedServer = async () => {
  const {
    data: { session },
  } = await supabaseServer().auth.getSession();
  if (!session) {
    return false;
  } else {
    return true;
  }
};

I encountered the same bug and managed to resolve it this way. I'm not exactly sure why this happens, though. I suspect that when Next.js tries to build your app, it somehow loses track of the cookies when executing the function in an asynchronous context.

[nicitaacom]

Did you try the following?

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";

export default () => {
  cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient({ cookies });
};

You can then import and use it like this:

import supabaseServer from "./supabaseServer";

export const isAuthentificatedServer = async () => {
  const {
    data: { session },
  } = await supabaseServer().auth.getSession();
  if (!session) {
    return false;
  } else {
    return true;
  }
};

I encountered the same bug and managed to resolve it this way. I'm not exactly sure why this happens, though. I suspect that when Next.js tries to build your app, it somehow loses track of the cookies when executing the function in an asynchronous context.

---

You absolutely the best - thank you
I already strat think about replace supabase to something else

I improved this code a bit:

1. Added Database type for TypeScript autocomplete
2. Fixed warning about anonymus function import/no-anonymous-default-export
   app/urils/supabaseServer.ts

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { Database } from "@/interfaces/types_db";

const supabaseServer = () => {
  cookies().getAll(); // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies });
};

export default supabaseServer

Note: Also I opened new issue - supabase/supabase#18089
You may check it (it this issue appears when I use cookie base auth)

Keep building cool stuff :)

[JorSoi]

Had the same issue yesterday. Is this a common issue or just a bug from either supabase or nextjs side?

[nicitaacom]

Had the same issue yesterday. Is this a common issue or just a bug from either supabase or nextjs side?

I'm sure its something from supabase side because not only you have this issue

[jundran]

There is a very similar example to what @Flushey posted on the Supabase getting started guide that also works, although it uses createRouteHandlerClient instead of createServerComponentClient:

https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs#proof-key-for-code-exchange-pkce

[nicitaacom]

There is a very similar example to what @Flushey posted on the Supabase getting started guide that also works, although it uses createRouteHandlerClient instead of createServerComponentClient:

https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs#proof-key-for-code-exchange-pkce

I want bring attention to this issue because supabase created something that impossible to use
https://github.com/orgs/supabase/discussions/18086

Also as I know createRouteHandlerClient used for route handlers (its like when you create auth/callback/route.ts and in this route you wriite GET or POST or PUT function)

[GeneralTyres]

I experienced the same issue locally but when I deployed on Netlify the deployment succeeded

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.