SvelteKit + Google Auth: invalid request: both auth code and code verifier should be non-empty

[simonh1000]

I created a new repo this morning that only has the code suggestions from https://supabase.com/docs/guides/auth/server-side/creating-a-client?framework=sveltekit and using a local DB with Google oAuth. Logging in seemed to work

I then switched back to a repo I had been working that did not work, and ended up copying across all of the src code from new repo. It continued not to work.

I then went back to this new repo, only to discover that it was now broken! By broken I mean that when the auth callback tries to call
supabase.auth.exchangeCodeForSession(code)
I get an error AuthApiError: invalid request: both auth code and code verifier should be non-empty

I'm confident the error is not in the code, because it did work earlier today, but in some part of the broader state. I've tried removing .svelte-kit, supabase db reset, even supabase init but without success.

One thing I do note is that the anon_key has not changed even despite all my resetting.

Any ideas?

[CalvinWilkinson]

I am currently having this issue right now and have been struggling for 2-3 days. I on the other hand am using deno fresh and I am using the SSR client. No matter what I try, I cannot get it to work. I have read docs, watched YouTube videos, checked discord server, just tried random things, used ChatGPT and more.

I did come across one thing that mentioned that if running locally, which is where I am having issues, this can be an issue. But it is very informative and not proven.

[ChristianMP]

Google led me here while encountering Auth: invalid request: both auth code and code verifier should be non-empty while trying to use a password reset link. For others that may be here on the same quest, I suggest reading this documentation, as that got me solved.

[wiwa]

I believe the issue is the incorrect cookies: CookieMethods setting, specifically in:

... = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
    cookies: {
      getAll() {
        return event.cookies.getAll()
      },
      setAll(cookiesToSet) {
        // ...
        cookiesToSet.forEach(({ name, value, options }) =>
          event.cookies.set(name, value, { ...options, path: '/' })
        )
      },
    },
  })

Instead of getAll and setAll, it should be get and set. Here's what I changed it to:

  cookies: {
      get: (name) => {
        return event.cookies.get(name);
      },
      set: (name, value, options) => {
        return event.cookies.set(name, value, { ...options, path: "/" });
      }
    }

The error seems to be due to sb-localhost-auth-token not being set correctly without the correct .set() method, which seems to be called by supabase.auth.signInWithOAuth.

[j4w8n]

The getAll and setAll methods should only be used with the ssr package, v0.4.0 and up.

[wiwa]

Thanks, I was somehow still on v0.3.0

[EpsilonOrionis]

I've found a solution. You have to redirect using the headers used to create the supabase client.

[therealpurplemana]

Can you post more info about this?

[EpsilonOrionis]

When you create the supabase client using the function createClientServer, you pass the headers object, as shown here:

const headers = new Headers();
  
const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
  cookies: {
    getAll() {
      return parseCookieHeader(request.headers.get('Cookie') ?? '')
    },
    setAll(cookiesToSet) {
      cookiesToSet.forEach(({ name, value, options }) =>
        headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
      )
    },
  },
});

When you get the redirect URL from the signInWithOAuth function call:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: `http://example.com/auth/callback`,
  },
})

You have to redirect using the URL obtained AND the headers object that you used to create the supabase client used to perform the request because supabase handles the code verifier generation by itself so if you redirect without the headers you are just providing the auth code without the verification code.

So the redirect is this:

if (data?.url) {
    return redirect(data.url, {headers}); // Reindirizza l'utente
} 

[EpsilonOrionis]

You just need to adapt the code to the framework you’re using. This code is for Remix, but the error is caused for the same reason.