SupabaseS
Supabase•3y ago
Wursteintopf

Google OAuth with Next.JS runs into error in SupabaseAuthClient._exchangeCodeForSession

So, its my first time working with Supabase and I am trying to setup Google OAuth authentication following the docs at:
https://supabase.com/docs/guides/auth/server-side/oauth-with-pkce-flow-for-ssr

The initial steps are all pretty clear, I've setup Google as an OAuth Provider for GoTrue and then trigger the OAuth with this handleLogin function:

  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `http://localhost:3000/auth/callback`,
      },
    });
  };


And this does correctly trigger the Login Workflow, it does create the user in supabase, it does redirect to the Auth Route Handler for exchanging the code, it does provide the code to that Route Handler and it does set the sb-localhost-auth-token-code-verifier Cookie. However supabase.auth.exchangeCodeForSession(code); then runs into an error:

error TypeError: Cannot read properties of null (reading 'split')
     at SupabaseAuthClient._exchangeCodeForSession (webpack-internal:///(rsc)/../../node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:398:132)


It seems that for some reason the GoTrueClient is not able to load the code verifier. Its this bit in the GoTrueClient that is throwing the error:
    const [codeVerifier, redirectType] = (
      (await getItemAsync(this.storage, `${this.storageKey}-code-verifier`)) as string
    ).split('/')


So for some reason it fails to correctly read the code verifier from the Cookies. Am I doing something wrong? Or is this a bug?
OAuth with PKCE flow for SSR | Supabase Docs
Learn how to configure OAuth authentication in your server-side rendering (SSR) application to work with the PKCE flow.
Was this page helpful?