Playwright based authentication errors - in vercel preview environment
I'm getting this error
{"error":"Authentication flow: State mismatch. Received: be9fa006355ccac6bd395933c3fe | Expected: 987605400499fff4b597efc2e1b3"}
at
https://....hj-flowt.vercel.app/api/auth/kinde_callback?code=of....
it's only happening in vercel preview and via playwright. App auth setup is via the Kinde Nextjs docs.
Any ideas or suggestions?
3 Replies
Hi,
Thanks for bringing this issue to our attention. I see you’re encountering a state mismatch error during authentication in the Vercel preview environment when running your Playwright tests. To help diagnose and resolve this, could you please provide some additional details?
- Which version of the Kinde SDK are you currently using?
- Is the error occurring every time you run your Playwright tests, or does it happen intermittently?
- Have you noticed any discrepancies between your local development environment and the Vercel preview (e.g., environment variables, session storage, or caching settings)?
- Does the authentication flow work as expected when not using Playwright? For example, if you manually sign in via the preview URL, does it complete without a state mismatch?
- Are there any customizations in your authentication or state management setup that might be affecting the state parameter between requests?
This will help us pinpoint the cause of the state mismatch error and offer a more targeted solution. Looking forward to your response.
1. "@kinde-oss/kinde-auth-nextjs": "2.5.1"
2. Only in the vercel preview. Works fine on my local machine with the same env vars
3. Auth works fine with a human logging in
4. the only thing I can see that was customized is our middleware
```
import { withAuth } from '@kinde-oss/kinde-auth-nextjs/middleware';
import type { NextRequest } from 'next/server';
export default withAuth(
async function middleware(_req: NextRequest) { },
{
publicPaths: [
'/',
'/api/stripe-events',
],
},
);
export const config = {
matcher: [
'/((?!_next|[^?]\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)',
],
};
Note: I tried to upgrade to 2.5.3, but get an error in unit tests
Error: Cannot find module 'D:...\node_modules.pnpm@kinde-oss+kinde-auth-nextj_14a465beb458173cca08b2b9740b9cfc\node_modules\next\headers' imported from D:...\node_modules.pnpm@kinde-oss+kinde-auth-nextj_14a465beb458173cca08b2b9740b9cfc\node_modules@kinde-oss\kinde-auth-nextjs\dist\server\index.js
some more info. If I run on localhost, pointing to a vercel preview, I now see
Access to fetch at 'https://flowt-dev.us.kinde.com/oauth2/auth?state=767b51728f61f23f0d1795e814e3&client_id=4b94e600b5d54382bb2c8ed6845f4dd4&redirect_uri=https%3A%2F%2Fflowt-by77214to-flowt.vercel.app%2Fapi%2Fauth%2Fkinde_callback&response_type=code&scope=openid+profile+email+offline' (redirected from 'https://flowt-by77214to-flowt.vercel.app/dashboard?_rsc=1ld0r') from origin 'https://flowt-by77214to-flowt.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Hi Scott,
Thanks for providing the additional details.
The error indicating a state mismatch (e.g., "Received: … | Expected: …") typically points to an issue with how cookies or session data are maintained between requests. In automated tests with Playwright—especially in a Vercel preview environment—it’s important to ensure that your testing setup is using a persistent browser context. This guarantees that cookies and session storage are retained throughout the authentication flow. Without this, the state parameter used during the initial authentication request might not be preserved, leading to the mismatch error. The CORS error you're seeing suggests that the OAuth endpoint at
Regarding the version upgrade issue from 2.5.1 to 2.5.3, the module resolution error you encountered might be due to compatibility issues with your current environment or test setup. If the 2.5.1 version is working reliably (aside from the testing-specific issues), you might consider staying on that version.
I hope these suggestions help resolve the issues. If you need any further assistance or have more questions, feel free to reach out.
The error indicating a state mismatch (e.g., "Received: … | Expected: …") typically points to an issue with how cookies or session data are maintained between requests. In automated tests with Playwright—especially in a Vercel preview environment—it’s important to ensure that your testing setup is using a persistent browser context. This guarantees that cookies and session storage are retained throughout the authentication flow. Without this, the state parameter used during the initial authentication request might not be preserved, leading to the mismatch error. The CORS error you're seeing suggests that the OAuth endpoint at
https://flowt-dev.us.kinde.com isn’t allowing requests from your Vercel preview URL (https://flowt-by77214to-flowt.vercel.app). Please verify that your OAuth client configuration in the Kinde dashboard includes your Vercel preview URL as an allowed origin and as part of the authorized redirect URIs. Adjusting these settings should resolve the preflight CORS issue.
Regarding the version upgrade issue from 2.5.1 to 2.5.3, the module resolution error you encountered might be due to compatibility issues with your current environment or test setup. If the 2.5.1 version is working reliably (aside from the testing-specific issues), you might consider staying on that version.
I hope these suggestions help resolve the issues. If you need any further assistance or have more questions, feel free to reach out.