State mismatch next.js 15
Hello I am Daniel and I am developing next.js 15 app with Kinde. I need help as I am receiving a lot of state mismatch after login. Could You help me to solve this problem?
3 Replies
Hi, @Daniel J
Thanks for reaching out,
The "State not found error" in Next.js 15 with Kinde is typically caused by a mismatch between environment variables and the domains you're using.
Here's how to resolve it:
The error occurs when there's a mismatch between:
- KINDE_SITE_URL and/or KINDE_POST_LOGIN_REDIRECT_URL
- The domain you're actually on
- Callback URL set in your Kinde dashboard
When you start the auth flow, a state cookie is set which needs to be checked when you return to your app. If you're redirected to a different domain than where you started, the state cookie won't be found, causing the error
Solutions
1. If you're using Vercel, dynamically set your environment variables in next.config.js
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;
2. Ensure your environment variables match your application setup:
- Make sure the redirect path (e.g., "/dashboard") matches your actual route
- Ensure variables aren't overridden in your Vercel project settings
3. In your Kinde dashboard, verify your callback URLs include the domains you're using.
For Vercel, you can use wildcard URLs like your-app-*.vercel.app/api/auth/kinde_callback
4. If you're experiencing this in production, confirm that:
- The domain you start authentication from matches where you're redirected
- Your KINDE_POST_LOGIN_REDIRECT_URL is set correctly for your production domain
- Your Kinde dashboard has the correct callback URLs configured
Let me know if this helps, ThanksI changed nextConfig as You described. my KINDE_POST_LOGIN_REDIRECT_URL=https://myDomain.pl
KINDE_COOKIE_DOMAIN=.myDomain.pl
KINDE_ISSUER_URL=https://auth.myDomain.pl (set as Custom domain, I tried this to fix state mismatch but no success)
and still state mismatch error is there from time to time. I would say 50% but only on production. localhost is working without problem
Hi, Daniel
Based on your setup with a custom domain, here are the key fixes: 1. Update your next.config.js For Next.js with custom domains, use this configuration 2. Environment Variable Configuration Since you're using a custom domain, ensure these variables are set correctly: -
Based on your setup with a custom domain, here are the key fixes: 1. Update your next.config.js For Next.js with custom domains, use this configuration 2. Environment Variable Configuration Since you're using a custom domain, ensure these variables are set correctly: -
KINDE_ISSUER_URL should be your custom domain: https://auth.myDomain.pl
- KINDE_SITE_URL should match exactly where your app runs: https://myDomain.pl
- KINDE_POST_LOGIN_REDIRECT_URL should be the full URL: https://myDomain.pl/dashboard (or your intended redirect path)
3. Custom Domain Setup
Make sure your custom domain is properly configured:
- The custom domain must include a subdomain (like auth.myDomain.pl)
- DNS CNAME records are correctly set up
- Your application environment variables use the exact custom domain
- Callback and logout redirect URLs in Kinde dashboard are updated with the custom domain
4. Callback URL Configuration
In your Kinde dashboard, ensure your callback URLs are set to:
- Allowed callback URLs: https://myDomain.pl/api/auth/kinde_callback
- Allowed logout redirect URLs: https://myDomain.pl
The intermittent nature suggests a configuration mismatch. Check that:
- Your KINDE_POST_LOGIN_REDIRECT_URL is dynamically set based on the domain you're initiating auth from
- There are no trailing spaces in your environment variables
- Your production environment variables aren't being overridden elsewhere
The fact that localhost works but production fails intermittently typically indicates that your KINDE_POST_LOGIN_REDIRECT_URL environment variable is static and doesn't match the domain you're starting the auth flow from.
Try setting KINDE_POST_LOGIN_REDIRECT_URL dynamically in your next.config.js rather than as a static environment variable to resolve the intermittent failures.
Let me know if anything needs clarification, Thanks