Kinde•5mo ago

Authentication flow: Received : key | Expected: State not found

I am facing this issue that seems that whenever '/api/auth/kinde_callback' is being requested, the app fails and there is this issue in the console of my Next.js app (mentioned in the title). Yesterday I did not have any issues, but today when I tried to work on my app, this is what I have faced

23 Replies

Daniel_Kinde•5mo ago

Hi, were s the app running?

Daniel237•5mo ago

Hello! I have it locally, it's in development I have changed nothing regarding Kinde Auth, yesterday was working, so my fear is that some key expired or something but I don't know what to do

Daniel237•5mo ago

Daniel237•5mo ago

This is the error I get with the api/auth/callback in the link I do not understand, I have literally changed nothing, I went to sleep and the next day it does not work, I really need this project and this is what I am dealing with, please help me I can access the app by deleting the middleware file, the issue seems to be linked with the withAuth function, but that is not what I am looking for @Daniel_Kinde can you please help?

Daniel_Kinde•5mo ago

Sorry, this slipped past me. This issue is caused when the session store can't read the state which has been stored. If you take our starter kit and use your environment variables, does login work on your local device?

Daniel237•5mo ago

yes, login, logout work with my env variables, only protecting routes through middleware does not. And the strange thing is that this happened overnight, without changing anything to the app @Daniel_Kinde

onderay•4mo ago

Sorry about the delay, @Daniel_Kinde is on leave until Tuesday. Are you able to confirm what Kinde NextJS SDK version you are running?

Daniel237•4mo ago

I am using NextJS App Router SDK

onderay•4mo ago

Are you using v2.3.1?

Daniel237•4mo ago

How can I check? Yes, I am using 2.3.1 @Andre @ Kinde

onderay•4mo ago

Thanks, are you able to check your middleware config? Here is a sample configuration for the middleware in a Next.js app:

// src/middleware.js
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

export default authMiddleware;

// src/middleware.js
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

export default authMiddleware;

Daniel237•4mo ago

I was using the "withAuth" method in order to help me protect routes, and the only solution I found to the issue that came up when I written this post was deleting the middleware entirely and therefore not having protected routes. With the new authMiddlware example you gave me, I do not seem to get that Authentication flow error, but for some reason now when I log in, I cannot enter any of the pages I specify in that config.matcher array

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

export const config = {
  matcher: ["/dashboard", "/trips", "/routes"],
};

export default authMiddleware;

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

export const config = {
  matcher: ["/dashboard", "/trips", "/routes"],
};

export default authMiddleware;

This is what I have now, I cannot enter any of those pages, and the issue is that the "/dashboard" is the post login redirect url

onderay•4mo ago

Mmmm, ok, I will get a more experienced team member to help with this

Peteswah•4mo ago

Hey Daniel, I would continue to look at using withAuth

import {withAuth} from "@kinde-oss/kinde-auth-nextjs/middleware";
export default function middleware(req) {
  return withAuth(req);
}
export const config = {
  matcher: ["/admin"]
};

import {withAuth} from "@kinde-oss/kinde-auth-nextjs/middleware";
export default function middleware(req) {
  return withAuth(req);
}
export const config = {
  matcher: ["/admin"]
};

generally when you get this key not found issue, it has to do with the cookies. Can you tell me what URL you start the auth flow from, and what URL you fail at?

Daniel237•4mo ago

Ok so I came back to

withAuth

withAuth

I am working locally at the moment, and the moment when I am on localhost:3000 and hit login, the login screen pops up as usual, and after logging in, the browser hits me with "too many redirects", and it fails to redirect me to the post login redirect url, and I have attached the network request that fails and it seems to simply be my login route

Daniel237•4mo ago

I could then try and force myself in one of the protected routes, /dashboard for example (the post login redirect url) And this is what fails (attached in the screenshot and pasted below) https://transportal-dev.eu.kinde.com/oauth2/auth?state=38ed18df36eecad3e20675fcd2d4&client_id=0fac190ff30b4ab5ae4da223e0b378a9&redirect_uri=http://localhost:3000/api/auth/kinde_callback&response_type=code&scope=openid profile email offline&audience=http://localhost:5010&audience=http://localhost:5020

Daniel237•4mo ago

https://transportal-dev.eu.kinde.com/oauth2/auth?state=38ed18df36eecad3e20675fcd2d4&client_id=0fac190ff30b4ab5ae4da223e0b378a9&redirect_uri=http://localhost:3000/api/auth/kinde_callback&response_type=code&scope=openid profile email offline&audience=http://localhost:5010&audience=http://localhost:5020

https://transportal-dev.eu.kinde.com/oauth2/auth?state=38ed18df36eecad3e20675fcd2d4&client_id=0fac190ff30b4ab5ae4da223e0b378a9&redirect_uri=http://localhost:3000/api/auth/kinde_callback&response_type=code&scope=openid profile email offline&audience=http://localhost:5010&audience=http://localhost:5020

Daniel_Kinde•4mo ago

Hi, Sorry, as Andre explained I have been on some leave. The reason you're seeing the too many redirects is because you have the redirect_uri envronment variable set to your callback URL, this should be a page on your site where you would want the user to end up. Can you change this and confirm it prevents the too many redirects?

Daniel237•4mo ago

@Daniel_Kinde I myself have been on some leave, now back to it I'm not sure I understand where the issue lies, so I will give you the exact values I have

KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard
KINDE_AUDIENCE=http://localhost:5010 http://localhost:5020

KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard
KINDE_AUDIENCE=http://localhost:5010 http://localhost:5020

And here are the callback urls set in kinde app settings

Daniel237•4mo ago

I tried to change the env variable but the issue stood for as long as I had the middleware there

Daniel_Kinde•4mo ago

Are you able to put together a minimal repo? I can't track what could be going on here from this thread

Daniel237•4mo ago

Will be able to it in a week or so, it's a uni project that should not be on the internet until I present it

Gaming

Programming

Authentication flow: Received : key | Expected: State not found