Bug: Authentication flow state

prathmesh-pandya commented 11 months ago

Prerequisites

[X] I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
[X] I have checked the latest version of the library to replicate my issue
[X] I have read the contributing guidelines
[X] 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 commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

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

iyansr commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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

DaveOrDead commented 9 months ago

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 commented 9 months ago

Hi @DaveOrDead thank for share

na-zi-ya commented 8 months ago

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 commented 8 months ago

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

na-zi-ya commented 8 months ago

@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 commented 8 months ago

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

na-zi-ya commented 8 months ago

@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 commented 8 months ago

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

nip10 commented 7 months ago

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 commented 7 months ago

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

What browser and OS do you see the issue?

nip10 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

@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 commented 7 months ago

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 commented 6 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

peterphanouvong commented 2 months ago

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 commented 1 week ago

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

kinde-oss / kinde-auth-nextjs