Bug: Authentication flow state #86

prathmesh-pandya · 2023-11-06T10:46:24Z

Prerequisites

I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
I have checked the latest version of the library to replicate my issue
I have read the contributing guidelines
I agree to the terms within the code of conduct

Describe the issue

When click on register link or login link it throw me HTTP 500 error code and the url which i redirect by clicking the login link is http://localhost:3000/api/auth/register?

i have app router and i have write the code for login and register link in page.js of home or root
version of next js "next": "^13.5.6",
version of kinde "@kinde-oss/kinde-auth-nextjs": "^2.0.1",
node version 16.20.0

Library URL

https://github.com/kinde-oss/kinde-auth-nextjs

Library version

2.0.1

Operating system(s)

Other Linux

Operating system version(s)

Linux mint 20 Cinnamon ,Cinnamon version 4.6.6

Further environment details

No response

Reproducible test case URL

No response

Additional information

No response

peterphanouvong · 2023-11-06T12:16:06Z

Hey @prathmesh-pandya did you set up the API routes as specified in the docs https://kinde.com/docs/developer-tools/nextjs-sdk/#set-up-kinde-auth-route-handlers ?

jrozbicki · 2023-11-16T11:34:40Z

Also getting 500 issue on http://localhost:3000/api/auth/kinde_callback and server log:

web:dev: - error Error: Authentication flow state not found
web:dev:     at AuthorizationCode.exchangeAuthCodeForTokens (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/oauth2-flows/AuthorizationCode.js:100:19)
web:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev:     at async AuthorizationCode.handleRedirectFromAuthDomain (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/oauth2-flows/AuthCodeAbstract.js:68:24)
web:dev:     at async Object.handleRedirectToApp (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/clients/server/authorization-code.js:92:9)
web:dev:     at async kinde_callback (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:430:9)
web:dev:     at async ue (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:445:16)
web:dev:     at async eval (webpack-internal:///(sc_server)/../../node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37)

DonsWayo · 2023-12-21T23:28:54Z

I have the same error with the middleware. If you try to change the matchers, it is working for me.

iyansr · 2023-12-23T15:24:14Z

Also getting 500 issue on http://localhost:3000/api/auth/kinde_callback and server log:

web:dev: - error Error: Authentication flow state not found
web:dev:     at AuthorizationCode.exchangeAuthCodeForTokens (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/oauth2-flows/AuthorizationCode.js:100:19)
web:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev:     at async AuthorizationCode.handleRedirectFromAuthDomain (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/oauth2-flows/AuthCodeAbstract.js:68:24)
web:dev:     at async Object.handleRedirectToApp (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-typescript-sdk/dist-cjs/sdk/clients/server/authorization-code.js:92:9)
web:dev:     at async kinde_callback (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:430:9)
web:dev:     at async ue (webpack-internal:///(sc_server)/../../node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js:445:16)
web:dev:     at async eval (webpack-internal:///(sc_server)/../../node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37)

Same here

iyansr · 2023-12-23T15:26:21Z

I have the same error with the middleware. If you try to change the matchers, it is working for me.

How do you recommend if my matcher looks like this:
@DonsWayo

  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    '/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)',
  ],
};

iyansr · 2023-12-24T01:51:05Z

I have some minimum reproducible example, you can find that here:
https://github.com/iyansr/kinde-next-middleware

DaveOrDead · 2024-01-04T16:49:41Z

In @iyansr's case it seems the issue was using a subdomain for the post login redirect url

KINDE_SITE_URL=http://localhost:3000/
KINDE_POST_LOGIN_REDIRECT_URL=http://app.localhost:3000/

so the auth flow was starting on a naked / root domain and trying to complete on app. which was causing issues with the state being read.

He kindly shared his solution in the community

Thought I would share in case it helps others

iyansr · 2024-01-05T05:22:42Z

Hi @DaveOrDead thank for share

na-zi-ya · 2024-02-04T14:49:36Z

Hi..!!
I am new to Kinde and attempting to integrate it into my Next.js 14 project using TypeScript for authentication. Following the Kinde documentation.

I am receiving the following TypeScript error:
In Signin Signup Authentication.
Cannot find module '@kinde-oss/kinde-typescript-sdk/components' or its corresponding type declarations.

In Auth Route Handlers
Expected 2 arguments, but got 0.ts(2554)
index.d.ts(93, 3): An argument for 'request' was not provided.
(alias) handleAuth(request: NextRequest, endpoint: AuthEndpoints): any
It project has the following structure
app/api/auth/[kindeAuth]/route.ts

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";

export const GET = handleAuth();

Are there any specific TypeScript configurations..?

DanielRivers · 2024-02-04T17:46:06Z

@naz-i-ya can I ask which version of the SDK you're using please?

na-zi-ya · 2024-02-04T18:06:37Z

@naz-i-ya can I ask which version of the SDK you're using please?

"next": "14.1.0",
"typescript": "^5"
@kinde-oss/kinde-auth-nextjs": "^1.9.2",
@kinde-oss/kinde-typescript-sdk": "^2.6.2",

DanielRivers · 2024-02-04T19:03:25Z

@naz-i-ya Can you upgrade to 2.1.7 and try again?

na-zi-ya · 2024-02-05T06:42:44Z

@naz-i-ya Can you upgrade to 2.1.7 and try again?

After the upgrade, the authentication process seems to be working fine; however, upon redirecting to the dashboard page, I encounter the following

Error: This method must be invoked in a Node.js environment
Call Stack: createKindeServerClient

My project is utilizing Node.js version 18.17.1.

DanielRivers · 2024-02-23T15:32:26Z

@naz-i-ya Apologies, I missed your response, are you able to give me a reproduction ?

nip10 · 2024-03-10T20:42:41Z

Any news about this issue ? This is still a problem

"next": "14.1.3" w/ app router
"@kinde-oss/kinde-auth-nextjs": "^2.1.15"

 ⨯ Error: Authentication flow: Received: ad566e87c616ea3c04cc74d2d5e4 | Expected: State not found
    at AuthorizationCode.eval (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:183:35)
    at step (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:53:23)
    at Object.eval [as next] (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:34:53)
    at fulfilled (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:25:58)

DanielRivers · 2024-03-10T20:44:42Z

@nip10 I'm after some reproduction details. Can you help?

What browser and OS do you see the issue?

nip10 · 2024-03-10T21:01:27Z

I'm trying to migrate a nextjs project from another auth provider to Kinde, but it's been a couple of days and I can't get this to work. Followed these docs.

OS macOS 13.4
Node v21.6.0
Chrome 120.0.6099.71

PS: I have another project using Kinde, also with NextJS and app router, but using sdk v1 and working fine

VaggelisKa · 2024-03-28T16:37:11Z

Any news about this issue ? This is still a problem

"next": "14.1.3" w/ app router "@kinde-oss/kinde-auth-nextjs": "^2.1.15"

 ⨯ Error: Authentication flow: Received: ad566e87c616ea3c04cc74d2d5e4 | Expected: State not found
    at AuthorizationCode.eval (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:183:35)
    at step (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:53:23)
    at Object.eval [as next] (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:34:53)
    at fulfilled (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:25:58)

Getting the exact same error, did you manage to figure out what is causing this? @nip10

Some info about our app

Nextjs app router v14.1.3
@kinde-oss/kinde-auth-nextjs v2.2.0
App deployed on Vercel
Device Iphone with iOS 17.4.1

The interesting thing in my case is that it only happens when trying to login from a mobile browser.

nip10 · 2024-03-28T17:00:31Z

@VaggelisKa I haven't, unfortunately. I spent some time debugging and trying different versions, middleware, etc, but this project was time sensitive so I ended up going in another direction.

na-zi-ya · 2024-03-28T17:14:42Z

@naz-i-ya Apologies, I missed your response, are you able to give me a reproduction ?

Apologies for the delay. Unfortunately, I wasn't able to resolve the issue, so I decided to switch to NextAuth.

DanielRivers · 2024-03-28T18:49:16Z

Any news about this issue ? This is still a problem
"next": "14.1.3" w/ app router "@kinde-oss/kinde-auth-nextjs": "^2.1.15"
 ⨯ Error: Authentication flow: Received: ad566e87c616ea3c04cc74d2d5e4 | Expected: State not found
    at AuthorizationCode.eval (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:183:35)
    at step (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:53:23)
    at Object.eval [as next] (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:34:53)
    at fulfilled (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:25:58)
Getting the exact same error, did you manage to figure out what is causing this? @nip10

Some info about our app

Nextjs app router v14.1.3 @kinde-oss/kinde-auth-nextjs v2.2.0 App deployed on Vercel Device Iphone with iOS 17.4.1

The interesting thing in my case is that it only happens when trying to login from a mobile browser.

Thank you, The mobile browser aspect is really useful here, I have been unable to reproduce this issue locally. I will look at seeing what could cause the problem on iPhone.

JeremyKennedy · 2024-04-18T18:46:33Z

Hi, I was having this same error: Error: Authentication flow: Received: ad566e87c616ea3c04cc74d2d5e4 | Expected: State not found.

I was getting it only in preview environments on Vercel. I am using a custom domain. I had KINDE_COOKIE_DOMAIN set, because I am using subdomains. Turns out that this should not be set for Vercel's preview environments. So I changed it to only be set for "preview on dev", which is my dev env on Vercel. Previously it was affecting all preview environments.

Update: I also had some confusion with Vercel's Branch URLs vs Preview URLs. I'm using the script to add Vercel's URLs to Kinde's authorized URLs. I can either use the VERCEL_BRANCH_URL or the VERCEL_URL, I haven't found a way to use both. Make sure when testing, you know which one you're using. The Kinde docs use VERCEL_URL, but Vercel's Github comments use the VERCEL_BRANCH_URL. Info: https://kinde.com/docs/developer-tools/nextjs-sdk/#working-with-preview-urls

In addition, the /api/auth/health route ended up being quite useful. I skipped over this in the docs until a while later.

ZeinZeini · 2024-08-08T16:22:46Z

Hi, I also have the same problem when I try to log in. semper next js app on vercel. It also happens that when I log in and refresh the page, things come out of the login if you had never logged in. in fact when I checkout it tells me user not authenticated even if I'm logged in, but if I refresh it tells me log in immediately. locally everything works perfectly {"error":"Authentication flow: Received: 9d3d9c465029931219b20ee42e2d | Expected: State not found"}

ayushsarode · 2024-08-10T13:45:42Z

Hi, I also have the same problem when I try to log in. semper next js app on vercel. It also happens that when I log in and refresh the page, things come out of the login if you had never logged in. in fact when I checkout it tells me user not authenticated even if I'm logged in, but if I refresh it tells me log in immediately. locally everything works perfectly {"error":"Authentication flow: Received: 9d3d9c465029931219b20ee42e2d | Expected: State not found"}

Same happening with me, in local machine it works and when I deployed my application, also setup .env file but failed

ZeinZeini · 2024-08-11T08:42:48Z

I have no idea how to fix it. I tried asking kinde support

peterphanouvong · 2024-08-15T07:39:57Z

Hey guys, sorry for letting this issue hang. Hopefully, I'll be able to shed some light on what the error means and what we're doing to help with the DX in the future.

The fix

Confirm that the domain you start the auth flow from is different to the domain you are redirected to after the auth flow is complete. If this is not the case, see the explanation.
Dynamically set the KINDE_SITE_URL and KINDE_POST_LOGIN_REDIRECT_URL when working with vercel preview domains. You can read more in the docs.

const nextConfig = {
  env: {
    KINDE_SITE_URL: process.env.KINDE_SITE_URL ?? `https://${process.env.VERCEL_URL}`,
    KINDE_POST_LOGOUT_REDIRECT_URL:
      process.env.KINDE_POST_LOGOUT_REDIRECT_URL ?? `https://${process.env.VERCEL_URL}`,
    KINDE_POST_LOGIN_REDIRECT_URL:
      process.env.KINDE_POST_LOGIN_REDIRECT_URL ?? `https://${process.env.VERCEL_URL}/dashboard`
  }
};

module.exports = nextConfig;

Explanation

The State not found error in production is usually a result of a mismatch between a few variables.

KINDE_SITE_URL and/or KINDE_POST_LOGIN_REDIRECT_URL
The domain you are on e.g. your-app-projects.vercel.app
Callback URL set on the Kinde dashboard

Let's say you set KINDE_SITE_URL=https:// your-app-projects.vercel.app and KINDE_POST_LOGIN_REDIRECT_URL=https:// your-app-projects.vercel.app/dashboard.
You also set your Callback URL to be your-app-*.vercel.app/api/auth/kinde_callback.

Then if you start the auth flow from a Vercel preview domain your-app-PREVIEW-projects.vercel.app you will be able to log in, but you will be redirected to your-app-projects.vercel.app/api/auth/kinde_callback which is NOT the same as the domain you started at your-app-PREVIEW-projects.vercel.app (this is what causes the error).

The error happens because when we start the auth flow, we set a cookie state which needs to be checked against when you return back to your app. If there is mismatch, we error out for security reasons. When you start the auth flow on one domain, but return to a different domain, there is no way to find the state cookie that was set when initiating the auth flow, so that's why there is a mismatch.

You are redirected to the wrong domain because KINDE_POST_LOGIN_REDIRECT_URL environment variable is static and is set for all your vercel deployments/domains.

What we'll do to help fix

I'll keep an eye on this issue/thread to make sure problems are resolved and that we fully understand the issue
We will write up a guide on how to solve this error
We will update the error message to link to the guide on how to resolve it.

More info can be found here:

Bonekazz · 2024-10-17T18:50:52Z

@prathmesh-pandya I was getting the same error. Figured that it was because there was /login and /register routes in my project.

maxbraeutigam · 2024-11-27T20:40:01Z

I had the impression that wrapping the links to /api/auth/login and /api/auth/register in a next/link component caused the error since the link component tries to fetch data from the target in advance, such that the state mismatched. So, the solution was to simply use an <a> tag. Does that make sense?
Cheers, Max

DanielRivers · 2024-11-27T21:06:30Z

@maxbraeutigam This is indeed a common issue, however using our LoginLink, RegisterLink and LogoutLink component, these do now use the Link component from next.js so will not present this problem.

maxbraeutigam · 2024-11-27T21:23:46Z

Hi @DanielRivers, thanks for the clarification. Being honest, I also dropped the env var KINDE_POST_LOGIN_REDIRECT_URL and substituted it by the search param, i.e. /api/auth/login?post_login_redirect_url=/dashboard. And my env var was set as a full URL (protocol, domain, path), while for the search param I am only using the path. Would you be so kind to comment an that? First, is it your intention to use in one case a full URL and in the other a path? Second, can that explain the error?

mhergharibyan550 · 2024-12-21T18:04:24Z

Hi everyone!

Did anyone fixed the problem?
It seems that the problem occurs not only when the domain is changed but also when the URL is changed.

My case: when the user logs in I forward him/her to /auth-callback to some additional stuff for specific condition. Basically, I use there the router of NextJS. Maybe the problem is because of that, too? Or maybe because I don't return the user back to the origin but forward to the /auth-callback?

prathmesh-pandya added the bug Something isn't working label Nov 6, 2023

DaveOrDead changed the title ~~Bug: (fill in)~~ Bug: Authentication flow state Dec 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: Authentication flow state #86

Bug: Authentication flow state #86

prathmesh-pandya commented Nov 6, 2023

peterphanouvong commented Nov 6, 2023

jrozbicki commented Nov 16, 2023

DonsWayo commented Dec 21, 2023

iyansr commented Dec 23, 2023

iyansr commented Dec 23, 2023

iyansr commented Dec 24, 2023

DaveOrDead commented Jan 4, 2024

iyansr commented Jan 5, 2024

na-zi-ya commented Feb 4, 2024

DanielRivers commented Feb 4, 2024

na-zi-ya commented Feb 4, 2024

DanielRivers commented Feb 4, 2024

na-zi-ya commented Feb 5, 2024

DanielRivers commented Feb 23, 2024

nip10 commented Mar 10, 2024

DanielRivers commented Mar 10, 2024

nip10 commented Mar 10, 2024 •

edited

Loading

VaggelisKa commented Mar 28, 2024

nip10 commented Mar 28, 2024

na-zi-ya commented Mar 28, 2024

DanielRivers commented Mar 28, 2024

JeremyKennedy commented Apr 18, 2024 •

edited

Loading

ZeinZeini commented Aug 8, 2024

ayushsarode commented Aug 10, 2024

ZeinZeini commented Aug 11, 2024

peterphanouvong commented Aug 15, 2024

Bonekazz commented Oct 17, 2024

maxbraeutigam commented Nov 27, 2024

DanielRivers commented Nov 27, 2024

maxbraeutigam commented Nov 27, 2024

mhergharibyan550 commented Dec 21, 2024 •

edited

Loading

Bug: Authentication flow state #86

Bug: Authentication flow state #86

Comments

prathmesh-pandya commented Nov 6, 2023

Prerequisites

Describe the issue

Library URL

Library version

Operating system(s)

Operating system version(s)

Further environment details

Reproducible test case URL

Additional information

peterphanouvong commented Nov 6, 2023

jrozbicki commented Nov 16, 2023

DonsWayo commented Dec 21, 2023

iyansr commented Dec 23, 2023

iyansr commented Dec 23, 2023

iyansr commented Dec 24, 2023

DaveOrDead commented Jan 4, 2024

iyansr commented Jan 5, 2024

na-zi-ya commented Feb 4, 2024

DanielRivers commented Feb 4, 2024

na-zi-ya commented Feb 4, 2024

DanielRivers commented Feb 4, 2024

na-zi-ya commented Feb 5, 2024

DanielRivers commented Feb 23, 2024

nip10 commented Mar 10, 2024

DanielRivers commented Mar 10, 2024

nip10 commented Mar 10, 2024 • edited Loading

VaggelisKa commented Mar 28, 2024

nip10 commented Mar 28, 2024

na-zi-ya commented Mar 28, 2024

DanielRivers commented Mar 28, 2024

JeremyKennedy commented Apr 18, 2024 • edited Loading

ZeinZeini commented Aug 8, 2024

ayushsarode commented Aug 10, 2024

ZeinZeini commented Aug 11, 2024

peterphanouvong commented Aug 15, 2024

The fix

Explanation

What we'll do to help fix

Bonekazz commented Oct 17, 2024

maxbraeutigam commented Nov 27, 2024

DanielRivers commented Nov 27, 2024

maxbraeutigam commented Nov 27, 2024

mhergharibyan550 commented Dec 21, 2024 • edited Loading

nip10 commented Mar 10, 2024 •

edited

Loading

JeremyKennedy commented Apr 18, 2024 •

edited

Loading

mhergharibyan550 commented Dec 21, 2024 •

edited

Loading