Open prathmesh-pandya opened 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 ?
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)
I have the same error with the middleware. If you try to change the matchers, it is working for me.
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
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+).*)',
],
};
I have some minimum reproducible example, you can find that here: https://github.com/iyansr/kinde-next-middleware
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
Hi @DaveOrDead thank for share
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..?
@naz-i-ya can I ask which version of the SDK you're using please?
@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",
@naz-i-ya Can you upgrade to 2.1.7 and try again?
@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.
@naz-i-ya Apologies, I missed your response, are you able to give me a reproduction ?
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)
@nip10 I'm after some reproduction details. Can you help?
What browser and OS do you see the issue?
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
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.
@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.
@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.
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.
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.
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"}
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
I have no idea how to fix it. I tried asking kinde support
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.
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;
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
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.
More info can be found here:
@prathmesh-pandya I was getting the same error. Figured that it was because there was /login and /register routes in my project.
Prerequisites
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