Kinde•2w ago

error fetch failed when logging in

Hi everyone, I am new to Kinde and currently stuck at the very first stage for login. I followed every step in the Quick start in my Nextjs project, I also changed the Allowed logout redirect URLs to match with the url in .env.local. Specifically I am following a tutorial on youtube and in the tutorial it worked properly. My problem is that after signing in, it doesn’t redirect to the post login url as expected but show this error: fetch failed, even though as I checked in network tab and on Kinde, user logged in successfully. What I had tried: - Deleted cache, deleted business and created new one - Replace app/api/auth/[kindeAuth]/route.js with this:

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

export async function GET(request, {params}) {
    const endpoint = params.kindeAuth;
    return await handleAuth(request, endpoint);
}

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

export async function GET(request, {params}) {
    const endpoint = params.kindeAuth;
    return await handleAuth(request, endpoint);
}

- Add this to Sentry config

export default withSentryConfig(config, {
  excludeServerRoutes: [new RegExp('/api/auth/.*')],
});

export default withSentryConfig(config, {
  excludeServerRoutes: [new RegExp('/api/auth/.*')],
});

I haven’t added middleware or deployed on Vercel yet. I am using Nextjs 15.1.6 and Kinde 2.5.0

5 Replies

Ages•2w ago

Hi Anh Thư, Thanks for reaching out! Since the user login is successful on Kinde but the redirect isn't working properly, let's go through some troubleshooting steps: Possible Causes & Fixes 1. Check API Route Handling - Your route.js file looks mostly correct, but try updating it to ensure it properly handles both GET and POST requests:

     import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
     
     export async function GET(req) {
         return handleAuth(req);
     }
     
     export async function POST(req) {
         return handleAuth(req);
     }

     import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
     
     export async function GET(req) {
         return handleAuth(req);
     }
     
     export async function POST(req) {
         return handleAuth(req);
     }

- Also, make sure @kinde-oss/kinde-auth-nextjs is installed and up to date:

     npm update @kinde-oss/kinde-auth-nextjs

     npm update @kinde-oss/kinde-auth-nextjs

2. Check NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL - Ensure this matches your actual redirect URL. Try logging process.env.NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL to verify it's set correctly. - It should be set in .env.local as:

     NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

     NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

3. Network & CORS Issues - Since you're seeing "fetch failed," check if the error appears in the Network tab of your browser's DevTools. - If CORS is an issue, try adding this to next.config.js:

     module.exports = {
       async headers() {
         return [
           {
             source: "/api/:path*",
             headers: [
               { key: "Access-Control-Allow-Origin", value: "*" },
             ],
           },
         ];
       },
     };

     module.exports = {
       async headers() {
         return [
           {
             source: "/api/:path*",
             headers: [
               { key: "Access-Control-Allow-Origin", value: "*" },
             ],
           },
         ];
       },
     };

4. Temporarily remove the Sentry configuration (excludeServerRoutes) and see if login works properly. 5. Some authentication flows behave differently in local vs. deployed environments. If possible, deploy to Vercel and test if the issue persists. Let me know if any of these steps help or if you’re still facing issues—happy to dig deeper

Anh ThưOP•2w ago

Hi, I changed from KINDE_POST_LOGIN_REDIRECT_URL to NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL as you said. I tried all modifications but still doesn't work, however it works on production. I also cloned the code from the tutorial I was working on and still have the same issue, I hope this this information give you a clue.

Ages•2w ago

Hi Anh Thư,
It’s likely related to your local environment setup since the issue occurs locally but works in production. Let’s troubleshoot further: --- Possible Causes & Next Steps 1. Please ensure your .env.local file is correctly formatted and loaded. Double-check for typos or missing variables. - Example:

     NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard  
     NEXT_PUBLIC_KINDE_SITE_URL=http://localhost:3000

     NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard  
     NEXT_PUBLIC_KINDE_SITE_URL=http://localhost:3000

2. Network Issues - If you’re using a VPN or proxy, it might interfere with local requests. Try disabling them temporarily. - Ensure your local server is running on the correct port (e.g., localhost:3000). 3. Browser Cache or Cookies - Clear your browser cache and cookies, as stale data might cause issues. - Try using an incognito window to rule out browser-specific problems. 4. Check Network Tab in DevTools - Open your browser’s DevTools (F12) and inspect the Network tab for failed requests. Look for: - CORS errors. - Incorrect redirect URLs. - Missing or invalid tokens. 5. Temporarily Disable Sentry - Remove or comment out the Sentry configuration to rule out conflicts:

     // next.config.js  
     // export default withSentryConfig(config, {  
     //   excludeServerRoutes: [new RegExp('/api/auth/.*')],  
     // });

     // next.config.js  
     // export default withSentryConfig(config, {  
     //   excludeServerRoutes: [new RegExp('/api/auth/.*')],  
     // });

6. Test with a Fresh Local Setup - Create a new Next.js project and integrate Kinde from scratch. This helps isolate the issue. --- If the Issue Persists Could you provide: 1. The exact error message from the browser console or Network tab. 2. Screenshots of your .env.local file (redact sensitive data). 3. The version of Node.js and npm/yarn you’re using. This will help us pinpoint the root cause. --- Let me know how it goes or if you need further assistance

Anh ThưOP•2w ago

I created a new project and integrated Kinde from scratch but still have the same error. Here is my .env.local file:

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=https://thunguyen123.kinde.com
KINDE_SITE_URL=http://localhost:3000
NEXT_PUBLIC_KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=https://thunguyen123.kinde.com
KINDE_SITE_URL=http://localhost:3000
NEXT_PUBLIC_KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

I use Node v20.0.0 and npm 9.6.4

Ages•3d ago

Hi Anh Thư, Thanks for sharing the details. I’ll try to reproduce the issue on my end using the same setup and will get back to you as soon as I have more insights. In the meantime, if you notice any additional error messages or patterns, feel free to share them Hi Anh Thư, Thanks for providing your details and screenshots. Since the issue only occurs locally while production works fine, here are some additional troubleshooting steps to try: 1. I noticed your .env.local file shows an empty value for KINDE_CLIENT_SECRET. If your integration uses a confidential client flow, you’ll need to provide the client secret. Please verify whether this variable should have a value or if your project is set up for public clients. 2. Double-check that the Allowed Login Redirect URL in your Kinde dashboard exactly matches your NEXT_PUBLIC_KINDE_POST_LOGIN_REDIRECT_URL (i.e., http://localhost:3000/dashboard). Even small mismatches can cause redirection issues. 3. Local Environment & Caching: - Make sure your environment variables are being loaded correctly; after any changes to .env.local, restart your Next.js development server. - Test in an incognito window or clear your browser cache to rule out caching issues. - If you’re behind a VPN or proxy, try disabling them to see if they’re affecting local requests. 4. Please inspect the failing fetch request in your browser’s DevTools (Network tab) for more details. Look for: - CORS errors, - HTTP status codes (like 4xx or 5xx), - Any network timeouts or other error details. These details can help us determine if the issue is due to a misconfigured request, network restrictions, or something else in your local environment. 5. Since some middleware can interfere with authentication flows, try temporarily disabling Sentry (or any additional middleware) to check if that resolves the issue.
Let me know how it goes. If you’re still facing the issue, I will escalate this to my engineering team to review.

Gaming

Programming

error fetch failed when logging in

Did you find this page helpful?