`exchangeCodeForSession` throws error instead of returning

[probablykasper]

Bug report

• [x] I confirm this is a bug with Supabase, not with my own application.
• [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

When users log in using PKCE and click the email login link in a different browser, you get this AuthApiError:

invalid request: both auth code and code verifier should be non-empty`

I believe that's expected, but the error is thrown instead of returned from exchangeCodeForSession().

To Reproduce

1. Set up PKCE with an auth handler like this:

   const code = event.url.searchParams.get('code')
   if (typeof code === 'string') {
   	const { data, error } = await supabase.auth.exchangeCodeForSession(code).catch((e) => {
   		console.log('Thrown error', e);
   	});
   }
   

Expected behavior

Since it's a expected and fairly common error, this error should be returned so that it can be properly handled

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser: Brave
• Version of supabase-js: 2.33.1
• Version of Node.js: 18.17.1

[jason-hwang]

In my opinion, there are two problems:

1. when using createBrowserClient in @supabase/ssr
2. when using createClient from @supabase/supabase-js without auth option.

In both cases 1 and 2, you will not be able to set auth: { flowType: 'pkce' } on the supabase client. This causes problems with the following logic written in GoTrueClient, the actual implementation of Supabase client

finally, the exchangeCodeForSession will be faced the problem.

I think this is the reason why exchangeCodeForSession returns an error.

@probablykasper @saltcod Is there any clue to solve this use case?

[kafle1]

Is there any update, I am still getting the same error, everything works fine locally but I get the same error in deployment am following this doc: https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit#building-the-app

@probablykasper

[probablykasper]

No update afaik. Not really sure what you mean, maybe you misunderstood this issue. Is your error being thrown or returned?

[kafle1]

its being thrown

[therealpurplemana]

I was getting this error when accessing my local host from http://localhost:3000 but the generated link was http://192.168.x.x.:3000/. I synced up these variables in my client, server env, native env, and then it all came together.

[blakedeckard]

+1, just realized there is suddenly a 500 on the login redirect

[jczstudios]

This is a problem, it breaks the error design pattern for the rest of the API methods in the Supabase JS SDK. Please fix!

[AlexisKenAlvarez]

+1, I'm also getting this error. I just followed the docs

[rajaman0]

same

[vyas-meet]

I was getting this error when accessing my local host from http://localhost:3000 but the generated link was http://192.168.x.x.:3000/. I synced up these variables in my client, server env, native env, and then it all came together.

Thanks man! That helped me :)

[ylwu]

I ran into this issue too and realized it's the bug on my end that the original url and redirect url is not with the same domain. Agreeing with others that when this happens the function should return an error instead of throwing

[syakirurahman]

i experienced the same issue when login using google oAuth. its only happened locally when i use custom local.host domain (i need to custom it). i already added local.host to config url in supabase auth.

maybe anyone has quick workaround to solve this?

[Gbillington1]

+1 I'm facing this too. With NextJS and the new @supabase/ssr package that uses cookie storage instead of local storage.

I've tried initiating with both server side & client side implementations of supabase.auth.signInWithOAuth() listed in this doc.

Every time I get to my callback endpoint, I get AuthApiError: invalid request: both auth code and code verifier should be non-empty from supabase.auth.exchangeCodeForSession.

// api/auth/callback/route.js
import { NextResponse } from "next/server";
import config from "@/config";
import { createClient } from "@/libs/supabase/server";

export const dynamic = "force-dynamic";

// This route is called after a successful login. It exchanges the code for a session and redirects to the callback URL (see config.js).
export async function GET(req) {
  const requestUrl = new URL(req.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) {
      console.error("Error exchanging code for session", error);
      return NextResponse.error(new Error("Error exchanging code for session"));
    }
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(requestUrl.origin + config.auth.callbackUrl);
}

[GiuseppePapalia]

+1, just realized there is suddenly a 500 on the login redirect

Also getting a 500 on login redirect, were you able to resolve this?

[conner-cross]

+1 I'm facing this too. With NextJS and the new @supabase/ssr package that uses cookie storage instead of local storage.

Every time I get to my callback endpoint, I get AuthApiError: invalid request: both auth code and code verifier should be non-empty from supabase.auth.exchangeCodeForSession.

Seeing this as well with both server side and client side implementations