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

handleLogin

function:

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

  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

sb-localhost-auth-token-code-verifier

Cookie. However

supabase.auth.exchangeCodeForSession(code);

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)

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('/')

    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.

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

handleLogin

handleLogin

function:

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

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

sb-localhost-auth-token-code-verifier

sb-localhost-auth-token-code-verifier

Cookie. However

supabase.auth.exchangeCodeForSession(code);

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)

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('/')

    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.

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

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

Similar Threads

Similar Threads

Similar Threads