supabase / auth-helpers

A collection of framework specific Auth utilities for working with Supabase.
https://supabase.github.io/auth-helpers/
MIT License
892 stars 240 forks source link

Nextjs: Using a non-auth related search parameter `code` can be very problematic! #770

Open williamlmao opened 2 months ago

williamlmao commented 2 months ago

This maybe isn't a complete bug, but I think it's something people should be aware of. An extra warning could be nice.

I was using code=123 as a URL search param, completely unrelated to auth. Spent a couple hours trying to debug why a certain route was clearing auth cookies completely, turns out its because the nextjs auth callback file that you find in the supabase docs uses that search param.

This results in this error: helpers.js:108 POST http://localhost:54321/auth/v1/token?grant_type=pkce 403 (Forbidden) and

This was a pretty tough one to debug. I would recommend adding a hint to the 403 PKCE forbidden error, or switching the search param here to use something more unique to supabase.

import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
import { type CookieOptions, createServerClient } from '@supabase/ssr'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')

  const next = searchParams.get('next') ?? '/'
  if (code) {
    const cookieStore = cookies()
    const supabase = 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) {
            cookieStore.set({ name, value, ...options })
          },
          remove(name: string, options: CookieOptions) {
            cookieStore.delete({ name, ...options })
          },
        },
      }
    )
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      return NextResponse.redirect(`${origin}${next}`)
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}
0xBoom commented 1 week ago

Facing the same issue with Facebook Business Login. Successful FB App OAUTH Hashed values return #access_token= and others like error, code etc, that conflicts like OP said. Would be nice if we could somehow prefix-name the supabase ones so they do not interfere with other integrations that is not compatible with Supabase 'natively'.

Would be nice if we could add prefix like sb_ to all supabase hashvalues so there is no clashing.