AuthApiError: invalid flow state, no valid flow state found

[kei2e]

I was trying to implement Proof Key for Code Exchange (PKCE) in my authentication flow using Supabase Auth Helpers, and I kept receiving this error. So, I decided to see if I can make "User Management App with NextJS" example--from Supabase Docs--works.

I still get the same error:

- error AuthApiError: invalid flow state, no valid flow state found
    at handleError (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/lib/fetch.js:36:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _handleRequest (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/lib/fetch.js:84:9)
    at async _request (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/lib/fetch.js:63:18)
    at async SupabaseAuthClient._exchangeCodeForSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:377:33)
    at async eval (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:784:28) {
  __isAuthError: true,
  status: 403
}

I have also noticed that, before this is triggered, I get the following error:

TypeError: cookies is not iterable
    at get [headers map sorted] (node:internal/deps/undici/undici:1881:34)
    at node:internal/deps/undici/undici:1911:25
    at Headers Iterator.next (node:internal/deps/undici/undici:1121:26)
    at toNodeOutgoingHttpHeaders (./supabase-nextjs/node_modules/next/dist/server/web/utils.js:106:31)
    at invokeRender (./supabase-nextjs/node_modules/next/dist/server/lib/router-server.js:275:122)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handleRequest (./supabase-nextjs/node_modules/next/dist/server/lib/router-server.js:447:24)
    at async requestHandler (./supabase-nextjs/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (./supabase-nextjs/node_modules/next/dist/server/lib/start-server.js:117:13)

I don't seem to be able to find any solution to this. Does anyone know what the problem might be?

[Bartek532]

I'm experiencing exactly the same, which package are you using?

[N00nDay]

I am using SvelteKit / Supabase and this is happening to me when trying to use Google OAuth locally.

[shawnesquivel]

I'm experiencing the same with NextJS and Supabase. I can get the URL from my google auth

      const googleRes = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          redirectTo: "http://localhost:3000",
        },
      });

which returns a URL with the code_challenge

{\"data\":{\"provider\":\"google\",\"url\":\"https://qctnbkfmquxoifgzwmml.supabase.co/auth/v1/authorize?provider=google&code_challenge=<CODE_CHALLENGE>&code_challenge_method=s256\"}

however when I pass it here, I get the same error as you all:

        const { data, error } = await supabase.auth.exchangeCodeForSession(
          code
        );

Error:

\"name\":\"AuthApiError\",
\"message\":\"invalid flow state, no valid flow state found\",\
"status\":403}"

[diego-yason]

Have you guys figured this out? Got stuck on the exact same error when trying to use Supabase locally.
@N00nDay @shawnesquivel

[SonnyFishback]

I was not able to find any documentation anywhere to explain this well so I hope this helps. @diego-yason.

In my case I ran into this issue while implementing Google OAuth w/ SvelteKit w/ Local Supabse however, I think the same concept translates across OAuth Clients/ Metaframeworks.

1. You must configure your OAuth Client to redirect to API URL http://127.0.0.1:54321 of your local Supabase instance

Authorized JavaScript origins
For use with requests from a browser
URIs 1 
https://******************.vercel.app
URIs 2 
http://localhost:5173
URIs 3 
http://localhost:54321
URIs 4 
http://127.0.0.1:54321

Authorized redirect URIs
URIs 1 
https://${PUBLIC_SUPABASE_URL}/auth/v1/callback
URIs 2 
http://localhost:5173/auth/v1/callback
URIs 3 
http://localhost:54321/auth/v1/callback
URIs 4 
http://127.0.0.1:54321/auth/v1/callback

2. You must configure your config.toml correctly to allow redirects to the proper endpoint. Here is mine:

[auth]
enabled = true
# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
# in emails.
site_url = "http://localhost:5173/"
# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
additional_redirect_urls = ["https://127.0.0.1:3000"]

......... MORE CONFIG

[auth.external.google]
enabled = true
client_id = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_CLIENT_ID)"
secret = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = "http://127.0.0.1:54321/auth/v1/callback"
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

[dijonmusters]

The redirectTo option needs to redirect to a Code Exchange route. I added a deeper explanation here but just realised the Next.js starter suggestion is probably not very helpful if you're building a SvelteKit app 😆

Hopefully this one can steer you in the right direction for declaring a SvelteKit route that can handle the code exchange 👍