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

[probablykasper]

Bug report

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

Describe the bug

When calling auth.exchangeCodeForSession(code) this error is thrown:

AuthApiError: invalid request: both auth code and code verifier should be non-empty
    at /Users/k/git/myrepo/node_modules/@supabase/gotrue-js/dist/main/lib/fetch.js:41:20
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  __isAuthError: true,
  status: 400

To Reproduce

Login callback handler:

const code = event.url.searchParams.get('code')
if (typeof code === 'string') {
  const { data, error } = await event.locals.supabase.auth.exchangeCodeForSession(code)
}

This is how I'm starting the login:

const supabaseAnonPkce = createClient<Database>(
	PUBLIC_SUPABASE_URL,
	PUBLIC_SUPABASE_ANON_KEY,
	{
		auth: {
			flowType: 'pkce',
		},
	}
)
const { error } = await supabaseAnonPkce.auth.signInWithOtp({
	email,
})

Expected behavior

• It seems like an unexpected error since it mentions a "code verifier", so I'm guessing it's not supposed to happen
• Errors should be returned in the error property, not thrown.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser: Brave 1.51.114, Chromium 113.0.5672.92
• Version of supabase-js: 2.21.0
• Version of Node.js: 18.15.0

[imownbey]

I am also seeing this with using google oauth. Our initiation of the auth flow is on the client and I am seeing this error on the server, not sure if that is important.

[AlexIsMaking]

I ran into this error earlier and the issue was caused by not passing the response from the sign in process to the callback request and using it to create the client, as shown in the docs.

So from:

// Start sign in with one-time password
  const { error } = await supabase.auth.signInWithOtp({
    email: 'foo@example.com',
    options: {
      emailRedirectTo: 'http://localhost:3000/api/auth/callback',
    },
  })

To:

// api/auth/callback
import { NextApiRequest, NextApiResponse } from 'next'
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Create authenticated Supabase Client
  const supabase = createServerSupabaseClient(
    { req, res },
    {
      supabaseUrl: SUPABASE_URL,
      supabaseKey: SUPABASE_ANON_KEY,
    }
  )

[imownbey]

I am running into this with createRouteHandlerSupabaseClient (which is the same as createServerComponentSupabaseClient) that only takes headers and cookies, maybe something is lacking there?

[KrisBraun]

I am also seeing this with using google oauth. Our initiation of the auth flow is on the client and I am seeing this error on the server, not sure if that is important.

Seeing exactly the same thing (client-initiated Google PKCE failing on exchangeCodeForSession on the server). The code returned from Google looks fine and is being passed to await supabase.auth.exchangeCodeForSession(code), so this must have something to do with the code verifier.

[silentworks]

The issue in the code seems to be the use of two different clients. You are using the auth helpers along with the normal supabase client, this won't work and will result in the error you are getting. We have a branch of the auth-helpers with PKCE support that you should use until we make the final release. You can install this using:

npm install @supabase/auth-helpers-sveltekit@next

You shouldn't mix the auth-helpers client with a normal supabase-js client unless you are planning to do things with the service_role key. There is an example project using these at the moment in this repo https://github.com/supabase-community/supabase-by-example/tree/next/magic-link/sveltekit. We will be releasing the next version of the auth-helpers with full support soon. Currently we are just finalising the documentation for release.

[KrisBraun]

Yes, this was exactly my issue. Using 0.2.0-next.3 I've now moved on to a new error: AuthApiError: invalid flow state, no valid flow state found

[silentworks]

@KrisBraun do you have a repo somewhere that I can check out the code? I'm still thinking there is a mix going on with the supabase-js client libraries.

[KrisBraun]

@silentworks To avoid confusing the original issue here, I've created #549. The issue seems to be related to exchangeCodeForSession expecting user_id to be set in the flow state. It's unclear to me how that would be, since this is the initial login, so no user has been created yet.

[probablykasper]

@silentworks I was mixing clients and what you suggested did fix it for me locally, but I'm still getting the error on Vercel unfortunately

[silentworks]

@probablykasper thats likely due to either incorrect version being installed on Vercel or your code is cached on there somehow. Try deploying the fixed version to a new Vercel setup and report back here if there are still errors.

[probablykasper]

That was my suspicion as well, but no luck. The lockfile does use 0.10.0-next.3 - tried redeploying without build cache, pushing new commits and visiting the commit-specific deployment domain doesn't work

[silentworks]

@probablykasper I'm going to make a big ask of you, but can you create a minimal reproducible example repo that I can take a look at please?

[probablykasper]

I tried reproducing it with the new 0.10.0 version, and the issue wasn't there. I'll let you know once I figure out more!

[EdmondChuiHW]

I played with this in the debugger and found a reliable repro. The blog post also confirms the following flow:

1. User clicks "sign in with magic link", Supabase signInWithOTP gets called with a redirect, usually the project's /auth/callback
2. Supabase generates a code verifier, saves it in a cookie called sb-<project ID>-auth-token-code-verifier
3. User clicks the magic link in the email, gets redirected to /auth/callback with the code query param
4. Supabase checks the code from the query param against the code verifier in the cookie
5. If the user clicks the link from another client, the code verifier cookie won't be found and causes the error thrown here

"Another client" cold mean an incognito window, another browser, another device, etc. E.g. someone initiated sign in from the browser on a desktop, then open the magic link from a mobile email app. Or initiated from the main browser app, but continued in a webview with a separate cookies store.

If I understand correctly, the code verifier shouldn't leave the client (that's the whole point of PKCE). So the fix here would just be failing gracefully from Supabase/GoTrue, and let the project display a recovery path. Something shorter than

Looks like you requested sign in from another device.

Open this page in Chrome on Windows
– or –
Sign in with another magic link on this iPhone

Workaround for now is to catch it (as it's not returned via result.error)

Edit: Example with screenshots and code added here: #545 (comment)

[z-x]

I am having this exact issue, but only when I run npm run dev --host and open the page from my mobile device (or a laptop using the hosted IP). It works on production deployed to Vercel, works when running locally with npm run dev and using localhost but fails with this error when running from hosted development server (so when I use the IP instead of localhost).

I am using the code example from the documentation without much changes so the error is appearing on the callback page.

I thought that maybe I am missing the redirect URL configured in Supabase, but it's there.

SvelteKit @ 1.20.2
Svelte @ 3.59.1
Auth Helpers SvelteKit @ 0.10.1
Supabase JS @ 2.24.0

[tholder]

Issue for me is with email confirmation flow not oauth. Works fine locally. Should point out, it seems to actually confirm the email but throws an error.

This is happening on Vercel and it's kicking out:

- error AuthApiError: invalid request: both auth code and code verifier should be non-empty
    at /var/task/.next/server/chunks/928.js:3374:24
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  __isAuthError: true,
  status: 400
}

For now, I have worked around this simply by suppressing the offending function. This obviously isn't an ideal situation though:

try {
    await supabase.auth.exchangeCodeForSession(code)
} catch (error) {}

[krsnaa]

The issue in the code seems to be the use of two different clients. You are using the auth helpers along with the normal supabase client, this won't work and will result in the error you are getting.

@silentworks, Is this mentioned anywhere in the docs? I spent pretty much all day today trying to get OAuth to work in SSR mode on a NextJS project with a refine.dev template and coming across this information earlier would have been incredibly helpful!

Also, the naming is rather misleading - auth-helpers strikes more as an add-on to supabase-js and not so much a replacement.

[probablykasper]

I tried reproducing it with the new 0.10.0 version, and the issue wasn't there. I'll let you know once I figure out more!

Updating the auth helpers made the error go away for me @silentworks

[AnthonyLzq]

I'm having the same error with @supabase/auth-helpers-remix^0.2.1.

[wottpal]

Same issue. Not able to reproduce it locally. Also, on Vercel, only some users are experiencing it :/
Using Next.js pages directory.

Thanks @tholder, probably gonna use this fix as well for now…

[ky1ejs]

nb: I'm using App Router on NextJS 13.4.7

I did some digging this evening and found that my NextJS route handler is not receiving cookies when calling cookies().

I confirmed this by changing the route.ts of the handler to a page.tsx and checking the cookies, indeed finding that the sb-<id>-auth-token-code-verifier key was present.

I noticed this because throughout my debugging, the cookie was in the client and was being seen by the middleware, yet the exception we're talking about was still thrown...

The problem I have now is that only Route Handlers and Server Actions can return cookies to the client, so using a Server Component will not be possible.

I'll share if I find a solution, but it seems this could be a NextJS issue rather than a Supabase issue?

[ky1ejs]

Did some more digging... in an older YouTube video on the Supabase channel, the presenter describes that there is a bug in NextJS with GET requests where cookies are not piped through! Here's to the point in the video where this is mentioned.

However, in a newer video, this seems to no longer be the case... I'm still experiencing empty cookies in NextJS 13.4.7, though :/

[ky1ejs]

After much googling and trawling the Vercel's GitHub discussions/issues, I've not found a solution to this.

In the end, I've taken a hacky approach in my middleware to handle the auth cookie, since cookies are available there for every request. I feel there is probably a way to do this with a ServerComponent and Server Actions, but I've already lost too much time to this issue and I want to get back to developing my project.

This is what my middleware looked like now:

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse, NextRequest } from 'next/server'
import type { Database } from '@/supabase/database.types'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const url = new URL(req.url)
  const supabase = createMiddlewareClient<Database>({ req, res })

  if (url.pathname === "/auth/callback") {
    const code = url.searchParams.get('code')
    if (code) {
      await supabase.auth.exchangeCodeForSession(code)
    }
  } else {
    await supabase.auth.getSession()
  }
  return res
}

Needless to say, this is not idea.

There are quite a few discussions/issues related to cookies in NextJS 13:

• Server Component: Dynamic server usage: cookies when using generateStaticParams with next/headers vercel/next.js#49066
• [NEXT-1181] DynamicServerError: Dynamic server usage: cookies vercel/next.js#49373
• Dynamic Server Usage: Headers, Cookies or SearchParams vercel/next.js#50634
• [NEXT-1275] cookies().get() fails refreshing Client Cache vercel/next.js#49865

I couldn't find many that are exactly about cookies being missing:

• route handlers missing results of cookies() and headers() in production vercel/next.js#49022

So I made my own report with an example to clearly describe this exact case:
vercel/next.js#52209

[Jordaneisenburger]

Hi @ky1ejs,

For what it's worth, I'm also working with Next.js and I've did the following which works for me:

//app/auth/callback/route.ts

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

import type { NextRequest } from 'next/server';
import type { Database } from '@/types/database.types';
import { ROUTES } from '@/consts';

export async function GET(request: NextRequest) {
    const requestUrl = new URL(request.url);
    const code = requestUrl.searchParams.get('code');

    if (code) {
        const supabase = createRouteHandlerClient<Database>({ cookies });
        await supabase.auth.exchangeCodeForSession(code);
    }

    // URL to redirect to after sign in process completes
    return NextResponse.redirect(`${requestUrl.origin}${ROUTES.accountNew}`);
}

Hope this helps 🎉 

[edgarasben]

OK, I solved it partly — it works if I send a signup email with supabase.auth.signInWithOtp in server component (a regular) page. I just tested with a server action and it works!

However, what doesn't work, and what I need for my use case is sending a signup email via API route.

So probably something is wrong with createRouteHandlerClient({ cookies }), probably it's not setting a "code verifier" that is used later in callback route.

---

Can someone try sending a sign up email via API route with createRouteHandlerClient({ cookies }) and supabase.auth.signInWithOtp to confirm it doesn't work?

[nickjg1]

OK, I solved it partly — it works if I send a signup email with supabase.auth.signInWithOtp in server component (a regular) page. I just tested with a server action and it works!

However, what doesn't work, and what I need for my use case is sending a signup email via API route.

So probably something is wrong with createRouteHandlerClient({ cookies }), probably it's not setting a "code verifier" that is used later in callback route.

---

Can someone try sending a sign up email via API route with createRouteHandlerClient({ cookies }) and supabase.auth.signInWithOtp to confirm it doesn't work?

Also still struggling with this. Pretty bad UX in my app and can't seem to get around the code verifier being stored locally.

[Slyracoon23]

I have the same issue on nextjs and supabase-auth-nextjs.

I have a workaround where I use authStateChange on client-side. It doesn't break the UI/UX too much.

import { useEffect } from 'react';
import { createClientComponentClient } from '@supabase/supabase-js';
import { useRouter } from 'next/router';

export default function Home() {
  const supabase = createClientComponentClient();
  const router = useRouter();

  useEffect(() => {
    // Set up an authentication listener
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        console.log(`Supabase auth event in home: ${event}`);

        if (event === 'SIGNED_IN') {
          // Redirect to the dashboard upon successful sign-in
          router.push('/dashboard');
        }

        if (session !== null) {
          // Redirect to the dashboard if a session is present
          console.log('session is:', session);
          router.push('/dashboard');
        }
        // Additional checks or redirects can be implemented
      }
    );

    // Cleanup function: unsubscribe the auth listener when the component unmounts
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      {/* Your home page content */}
    </div>
  );
}

[silentworks]

We have published a new guide on how to handle this from the email perspective and framework side of things. This requires an email template change and a new endpoint in your application https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr

If you are using the Supabase CLI and want to customize your email templates, you can do this now by following this guide https://supabase.com/docs/guides/cli/customizing-email-templates

[edgarasben]

We have published a new guide on how to handle this from the email perspective and framework side of things. This requires an email template change and a new endpoint in your application https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr

If you are using the Supabase CLI and want to customize your email templates, you can do this now by following this guide https://supabase.com/docs/guides/cli/customizing-email-templates

Awesome! So, should app/auth/confirm route with verifyOtp be used from now on instead of app/auth/callback with exchangeCodeForSession like in other examples?

[silentworks]

@edgarasben yes if you are doing any auth process that uses magic links (signUp, resetPasswordForEmail, inviteUserByEmail and signInWithOtp). If you plan on doing signInWithOAuth in your app then you will still need the app/auth/callback route.

[edgarasben]

@edgarasben yes if you are doing any auth process that uses magic links (signUp, resetPasswordForEmail, inviteUserByEmail and signInWithOtp). If you plan on doing signInWithOAuth in your app then you will still need the app/auth/callback route.

If I need both, and there is only one email template, will the /callback route be able to handle the updated email templates?

[silentworks]

@edgarasben but signInWithOAuth doesn't use email templates. You would still just have both endpoints in your project.

[silentworks]

Closing this out as we now have a guide showing how to get around this issue:

supabase/supabase#16728
supabase/supabase#16683

[tolgaergin]

Looks like the problem still continues for signInWithOAuth in nextjs@13.4.19. @silentworks
with the same code not getting any error if i use nextjs@13.4.7

error AuthApiError: invalid flow state, no valid flow state found

client component

const signInWithGithub = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "github",
      options: {
        redirectTo: window.location.origin + "/auth/callback",
      },
    });
  };

app/auth/callback/route.js

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET(request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(requestUrl.origin);
}

[silentworks]

Re-opening this issue as a number of users have reported it still happening.

Can anyone still experiencing this please also state the browser they are using along with Next version and if its app router or pages directory?

[vinch]

Re-opening this issue as a number of users have reported it still happening.

Can anyone still experiencing this please also state the browser they are using along with Next version and if its app router or pages directory?

@silentworks I encounter the same error with exchangeCodeForSession with SvelteKit on Chrome, simply by following this official tutorial: https://supabase.com/docs/guides/auth/auth-helpers/sveltekit

The complete code for my src/routes/auth/callback/+server.ts file is the following (adapted for TypeScript):

import type { SupabaseClient } from '@supabase/supabase-js';
import { redirect } from '@sveltejs/kit';

export const GET = async ({
	url,
	locals: { supabase }
}: {
	url: URL;
	locals: { supabase: SupabaseClient };
}) => {
	const code = url.searchParams.get('code');

	if (code) {
		await supabase.auth.exchangeCodeForSession(code);
	}

	throw redirect(303, '/');
};

The error message: AuthApiError: invalid request: both auth code and code verifier should be non-empty

[Alex-Yakubovsky]

For those using Remix (and likely other frameworks). One potential cause is that you're not forwarding the Set-Cookie header to your client from your supabase.auth.signUp(...) server side call, which sets the verifier code for the PKCE flow. If you're using remix, you're probably creating a signup within an action

// app/routes/sign-up.tsx
import { createServerClient } from "@supabase/auth-helpers-remix";

export async function action({ request, context }) {
   const response = new Response()
     const supabase = createServerClient(
    SUPABASE_URL,
    SUPABASE_ANON_KEY,
    {
      request,
      response,
      cookieOptions: {
        name: context.env.SUPABASE_COOKIE_NAME,
      },
    },
  );

   await supabase.auth.signUp({ ... }) // this updates the `response` headers

   // or redirect(..., { headers: response.headers })
   return json(..., { headers: response.headers })
}

Double check in your dev tools that a cookie named something like supabase_verifier_code is set in your browser (the implication being that you have to redeem the auth code in the same browsers that issued the signup).

[z-x]

Also still expecting this using SvelteKit and following the guide from the official docs 1:1 and then using npm dev --host and using the IP in the browser instead of localhost. Logging in using OAuth, doesn't matter which one.

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

[silentworks]

@z-x your issues is related to you using the IP address and your browser not being able to read the cookie. If anyone else is doing this you need to setup your cookieOptions correctly when using --host in order to use IP address instead.

[silentworks]

Re-opening this issue as a number of users have reported it still happening.
Can anyone still experiencing this please also state the browser they are using along with Next version and if its app router or pages directory?

@silentworks I encounter the same error with exchangeCodeForSession with SvelteKit on Chrome, simply by following this official tutorial: https://supabase.com/docs/guides/auth/auth-helpers/sveltekit

The complete code for my src/routes/auth/callback/+server.ts file is the following (adapted for TypeScript):

import type { SupabaseClient } from '@supabase/supabase-js';
import { redirect } from '@sveltejs/kit';

export const GET = async ({
	url,
	locals: { supabase }
}: {
	url: URL;
	locals: { supabase: SupabaseClient };
}) => {
	const code = url.searchParams.get('code');

	if (code) {
		await supabase.auth.exchangeCodeForSession(code);
	}

	throw redirect(303, '/');
};

The error message: AuthApiError: invalid request: both auth code and code verifier should be non-empty

@vinch is this with magic links or OAuth? If magic links we have a guide on how to resolve this https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr. @Alex-Yakubovsky this guide would also be the same for Remix too.

[silentworks]

I've tested this again in my setup using SvelteKit with OAuth and cannot replicate what folks are reporting here. It's best one of your provide a minimal reproducible example repository otherwise I won't be able to help much with this. My test OAuth projects are all here for the framework of your choice https://github.com/supabase-community/supabase-by-example/tree/main/oauth-flow

Kapture.2023-09-14.at.19.59.22.mp4

[nilooy]

Looks like the problem still continues for signInWithOAuth in nextjs@13.4.19. @silentworks with the same code not getting any error if i use nextjs@13.4.7

error AuthApiError: invalid flow state, no valid flow state found

client component

const signInWithGithub = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "github",
      options: {
        redirectTo: window.location.origin + "/auth/callback",
      },
    });
  };

app/auth/callback/route.js

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET(request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(requestUrl.origin);
}

i am also having same issue, with all latest version supabase js, auth helpers and same code

[silentworks]

I'm going to close this issue again until someone actually provides an reproducible example repo as I've showed in my recording and examples I've linked. This is working but folks keep on adding on here I have the same issue without any reproducible examples.

[mennankara]

Repro is easy, just do a resetPasswordForEmail from your desktop, and click the update password link from your mobile.

[ErwinAI]

@silentworks My reproduction (nuxt-modules/supabase#262 (comment)) using nuxtjs/supabase may be of interest. This reproduction is for a reset password flow. Particularly the SPA method exposes some extra detail. I suspect this particular network request is causing the error:

Failed to load resource: the server responded with a status of 403 ()
https://<id>.supabase.co/auth/v1/token?grant_type=pkce"

{
  code: 403
  msg: "code challenge does not match previously saved code verifier"
}  

Could be a bug in nuxtjs/supabase, though. Not sure. Unfortunately for me this bug is blocking and means I will have to migrate to a different platform :(

[ErwinAI]

@silentworks I've cloned https://github.com/supabase-community/supabase-by-example/tree/main/reset-flow/nuxt
and set it up according to the readme file. The only deviation is that I use a https://.supabase.co URL / cloud hosted instead of a local instance of Supabase. Shouldn't matter though as far as I know.

I can reproduce the problem where I get the above result:

Failed to load resource: the server responded with a status of 403 ()
https://<id>.supabase.co/auth/v1/token?grant_type=pkce"

{
  code: 403
  msg: "code challenge does not match previously saved code verifier"
}  

OS: Windows 11
Browser: Chrome 116.0.5845.190 (Official Build) (64-bit)
Node: v18.12.1

[silentworks]

@ErwinAI you will need to raise that with the Nuxt team as they manage the Nuxt Supabase integration. The solution is outlined here https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr but unfortunately Nuxt works a bit different when it comes to the server compared to other SSR frameworks. Also note the issue is due to you requesting the reset in one browser/device and then clicking the link on another device, this is not permitted when using the pkce auth flow. The link I've added above addresses this.

[silentworks]

Repro is easy, just do a resetPasswordForEmail from your desktop, and click the update password link from your mobile.

@mennankara please read existing comments before adding new ones, I've added a link in previous comments on how to address this https://supabase.com/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr, if you aren't doing this then it won't work.