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.

[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 = ""

[ShriPunta]

Thank you for this message. It took me 2 days of debugging and I was going nowhere. The supabase documentation was not clear at all.

Hope other people find it helpful.

[benwestdev]

Interesting...I am building in a sveltekit app as well and when I followed your advice I get this error: {"message":"no Route matched with those values"}
Anyone else get this?

Edit: Figured it out! Had a typo in redirect_uri. Make sure you literally use http://127.0.0.1:54321/auth/v1/callback

[wilsonam]

@SonnyFishback thank you so much for this! I ran into the same issue with Supabase and Nextjs locally. I've been searching docs for days before I found this thread.

[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 👍

[asnimansari]

Can't find this page.

[Zizouducode]

Here is my config :

Front: NextJS
Backend: NestJS with Supabase

I followed this tutorial with the server side connection.

On my side the issue was in my config.toml.

I added the redirect_url here in my config.toml file: additional_redirect_urls = ["https://localhost:3000", "http://localhost:3000/auth/callback"]

I fixed the issue when I commented this line in the google auth provider : #redirect_uri = "" in my config.toml. I was passing the URI from my .env file. But it seems there is a mismatch between this URI and the one sent in the frontend by the supabase method.