SSR Oauth with next js pages router

[alecswjo]

Chore

SSR Oauth with next js pages router

Describe the chore

SSR Oauth doesn't work with next js pages router. The example here (https://supabase.com/docs/guides/auth/server-side/oauth-with-pkce-flow-for-ssr?framework=nextjs) uses apps router.

Since { cookies } from 'next/headers' needs a server component (not in pages router). i'm not sure how to implement. Does anyone have any tips?

[charislam]

The flow is very similar, just that you need to get your cookies from the request object instead of the cookies function. (I actually prefer that pattern: aligns better with the platform, and less magic.)

Check out the Next.js Starter Guide for how to set up a Supabase client inside your API route that reads the cookies from the request: https://supabase.com/docs/guides/auth/server-side/nextjs?router=pages

Then it's just a matter of substituting the client. Everything else should be relatively router-agnostic (barring some minor differences in the request object and redirect function, which you can check the Next.js docs for).

[big-nico]

https://github.com/big-nico/nextjs-supabase-pages-starter

Here is a sample repo - all you have to do is make sure the supabase project you connect has google oauth enabled.

[charislam]

Ahhh you know what, you're right, it's our problem. In the cookies methods for the API handler, it should be appendHeader, not setHeader. We must have missed that one in our testing, I'll put in a PR to fix it.

Thanks for the catch!

[big-nico]

Exciting stuff! Let me know when the PR is out & how to incorporate the latest into our project.

[charislam]

Hey @big-nico, no need to wait on us! The instructions are the problem, not the package, so in your utils/supabase/api.ts, just swap out res.setHeader for res.appendHeader!

[big-nico]

lovely!

[riccardolardi]

Hi, we're in the same situation, still on legacy pages router but migrating to supabase/ssr package. Which client to use in middleware.ts though?

[Stephcraft]

The latest version of the Next.js Pages router supabase/util scripts can be found here:

server-props.ts for getServerSideProps() — The new App router server.ts does not work on the Page router

import { type GetServerSidePropsContext } from 'next'
import { createServerClient, serializeCookieHeader } from '@supabase/ssr'

export function createClient({ req, res }: GetServerSidePropsContext) {
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
        {
            cookies: {
                getAll() {
                    return Object.keys(req.cookies).map((name) => ({ name, value: req.cookies[name] || '' }))
                },
                setAll(cookiesToSet) {
                    res.setHeader(
                        'Set-Cookie',
                        cookiesToSet.map(({ name, value, options }) =>
                            serializeCookieHeader(name, value, options)
                        )
                    )
                }
            }
        }
    )

    return supabase
}

static-props.ts for getStaticProps() — Can be replaced by the admin client

import { createClient as createClientPrimitive } from '@supabase/supabase-js'

export function createClient() {
    const supabase = createClientPrimitive(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
    )

    return supabase
}

components.ts for React client components — Same as the new client.ts

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
  )

  return supabase
}

api.ts for API routes pages/api/... — Same as server-props.ts, except for function signature parameters

import { createServerClient, serializeCookieHeader } from '@supabase/ssr'
import { type NextApiRequest, type NextApiResponse } from 'next'

export default function createClient(req: NextApiRequest, res: NextApiResponse) {
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
        {
            cookies: {
                getAll() {
                    return Object.keys(req.cookies).map((name) => ({ name, value: req.cookies[name] || '' }))
                },
                setAll(cookiesToSet) {
                    res.setHeader(
                        'Set-Cookie',
                        cookiesToSet.map(({ name, value, options }) =>
                            serializeCookieHeader(name, value, options)
                        )
                    )
                }
            }
        }
    )

    return supabase
}

middleware.ts/proxy.ts continues to be compatible on both the App and Pages router.

These are from the last commit (7d722bf Nov 2025) modifying the legacy Next.js documentation right before the commit deleting the page (534c300). The history of the commits for this documentation can be found here. Idk where the actual example files for these code snippets (examples/auth/nextjs/utils/supabase/) are though.