S
Supabase•3w ago
Nerap

OAuth Authentication: 'code challenge does not match previously saved code verifier' Error

Hello ! What's going wrong: I consistently get a 'code challenge does not match previously saved code verifier' → 'bad_code_verifier' error when exchanging the OAuth code for a session. I followed the official Supabase Next.js SSR documentation multiple times..... - OS: macOS - Framework: Next.js 15 - Library versions: @supabase/ssr@0.5.2, @supabase/supabase-js@2.46.1 Both createBrowserClient & createServerClient are exactly like the docs said OAuth initiation: 
const result = await authClient.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: `${window.location.origin}/api/auth/callback`,
    queryParams: {
      access_type: 'offline',
      prompt: 'consent',
    },
  },
})
const result = await authClient.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: `${window.location.origin}/api/auth/callback`,
    queryParams: {
      access_type: 'offline',
      prompt: 'consent',
    },
  },
})
Callback handler: (/api/auth/callback/route.ts) 
let supabaseResponse = NextResponse.redirect(`${origin}${next}`)

const supabase = createServerClient(
  env.NEXT_PUBLIC_SUPABASE_URL,
  env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  {
    cookies: {
      getAll() {
        return request.cookies.getAll()
      },
      setAll(cookiesToSet) {
        cookiesToSet.forEach(({ name, value }) => {
          request.cookies.set(name, value)
        })
        supabaseResponse = NextResponse.redirect(`${origin}${next}`)
        cookiesToSet.forEach(({ name, value, options }) => {
          supabaseResponse.cookies.set(name, value, options)
        })
      },
    },
  },
)

const { data, error: exchangeError } = await supabase.auth.exchangeCodeForSession(code)
let supabaseResponse = NextResponse.redirect(`${origin}${next}`)

const supabase = createServerClient(
  env.NEXT_PUBLIC_SUPABASE_URL,
  env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  {
    cookies: {
      getAll() {
        return request.cookies.getAll()
      },
      setAll(cookiesToSet) {
        cookiesToSet.forEach(({ name, value }) => {
          request.cookies.set(name, value)
        })
        supabaseResponse = NextResponse.redirect(`${origin}${next}`)
        cookiesToSet.forEach(({ name, value, options }) => {
          supabaseResponse.cookies.set(name, value, options)
        })
      },
    },
  },
)

const { data, error: exchangeError } = await supabase.auth.exchangeCodeForSession(code)
Additional investigation: I noticed in GoTrueClient.ts that the storageKey appears to be "sb-127" (localhost-related) while the default STORAGE_KEY in @supabase/auth-js is 'supabase.auth.token'. I tried manually setting {auth: {storageKey: 'local'}} , but didn't do anything. Both browser and server clients use identical environment variables and configuration. I'm unable to debug why the code verifier isn't matching. Any clue on what I'm missing ?
3 Replies
Nerap
NerapOP•3w ago
The GoTrueClient has the following constructor warning messages 
  constructor(options: GoTrueClientOptions) {
    this.instanceID = GoTrueClient.nextInstanceID
    GoTrueClient.nextInstanceID += 1

    if (this.instanceID > 0 && isBrowser()) {
      console.warn(
        'Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.'
      )
      //etc...
    }
  constructor(options: GoTrueClientOptions) {
    this.instanceID = GoTrueClient.nextInstanceID
    GoTrueClient.nextInstanceID += 1

    if (this.instanceID > 0 && isBrowser()) {
      console.warn(
        'Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.'
      )
      //etc...
    }
Is there any way it's related to multiple tabs or "browser" behavior? I'm using Arc, but chrome also fail. Even if I override GoTrueClient "storageKey" properties with another name (on browser & server client) I have another error message Code exchange error: Error [AuthApiError]: invalid request: both auth code and code verifier should be non-empty, even thought the suth-token is there as cookie. So I'm kinda lost here The things I already made Supabase Auth worked few months, and it was pretty easy to use.
silentworks
silentworks•2w ago
This generally means the -verifier cookie isn't being saved. So you will need to figure out why this isn't being saved and fix that in order for this to work.
Nerap
NerapOP•2w ago
So, I fixed the issue, and still I have no clue why. I cleared modules, .next, cleared docker volumes, images, container, evertyhing ! Still it wasn't working. I juste restarted my laptop, then it worked like a charm. I have no clue what happenend but I guess it's fixed.. Thanks nevertheless

Did you find this page helpful?