S
Supabase•2y ago
Paul

Social Oauth - both auth code and code verifier should be non-empty

I'm getting this error as well. There are a bunch of threads already. I'm using Next14 and @supabase/ssr. I've tried createBrowserClient on the page and createServerClient in a form action. In both cases when I try to const { error } = await supabase.auth.exchangeCodeForSession(code); I get
AuthApiError: invalid request: both auth code and code verifier should be non-empty
I've tried both createBrowserClient on the page and createServerClient for the supabase instanciation. Not sure what else to try. 🤷‍♂️
2 Replies
Paul
PaulOP•2y ago
Found this, will try to replicate it tomorrow morning: https://github.com/supabase-community/supabase-by-example/tree/2b2a0eb01ab5f09f37e374f72e0c9fcc322139f4/oauth-flow/nextjs
GitHub
supabase-by-example/oauth-flow/nextjs at 2b2a0eb01ab5f09f37e374f72e...
Contribute to supabase-community/supabase-by-example development by creating an account on GitHub.
Paul
PaulOP•2y ago
Using the example from the above. The process worked without errors but no session was created at the end. Switching out createRouteHandlerClient with my own createSupabaseServerClient 
import {cookies} from "next/headers";
import {createBrowserClient, createServerClient} from "@supabase/ssr";

export function createSupabaseServerClient() {
  return createServerClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_KEY!,
    {
      cookies: {
        get(name: string) {
          // return cookie with the 'name' here    
          return cookies().get(name)?.value;      
        },
        set(name: string, value, options) {
          // set cookie
          cookies().set(name, value, options);
        },
        remove(name: string, options) {
          // remove cookie
          cookies().set(name, "", options);
        },       
      },
      // cookieOptions: getSupabaseCookieOptions()
    }
  );  
};
import {cookies} from "next/headers";
import {createBrowserClient, createServerClient} from "@supabase/ssr";

export function createSupabaseServerClient() {
  return createServerClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_KEY!,
    {
      cookies: {
        get(name: string) {
          // return cookie with the 'name' here    
          return cookies().get(name)?.value;      
        },
        set(name: string, value, options) {
          // set cookie
          cookies().set(name, value, options);
        },
        remove(name: string, options) {
          // remove cookie
          cookies().set(name, "", options);
        },       
      },
      // cookieOptions: getSupabaseCookieOptions()
    }
  );  
};
Now I get a session Now to work out, why I need this route.ts for nextjs (perhaps for the cookie to be created) 🤔 completed with changing to a server action for the generation of the social url: 
export function SocialLoginServer() {
  return (
    <form action={async() => {
      const {url, error} = await handleOAuthLogin('github');
      redirect(url!);
    }}>
      <button className="w-full">
        <Group justify="center">
          <Icon icon="github" type="far" />
          <Text>Github</Text>
        </Group>
      </button>
    </form>
  )
}
export function SocialLoginServer() {
  return (
    <form action={async() => {
      const {url, error} = await handleOAuthLogin('github');
      redirect(url!);
    }}>
      <button className="w-full">
        <Group justify="center">
          <Icon icon="github" type="far" />
          <Text>Github</Text>
        </Group>
      </button>
    </form>
  )
}

Did you find this page helpful?