Chrome browser login issues with email verification code

Hi Could you please send me a link to your project?

https://teamigo-app.pages.dev/

I can't get as far as the verification, can you share any code how you're starting the auth flow?

Also, has the flow worked before and is now not working?

It works if you try with Safari, for instance

btw, locally it works fine, however the production environment, in this case cloudflare pages, using next.js, I get this problem.

I don’t have anything special in cloudflare logs, and I can access kinde logs 😅

We think this is because next is serving a cached redirect which is invalid as already been used.

Can you share what is happening when you hit your product route? are you using the Kinde middleware here or custom?

As a test we tried using your NextJS login API endpoint directly
https://teamigo-app.pages.dev/api/auth/login in Chrome and was able to sign in fine

If it’s prod only it seems like possibly Cloudflare Pages is adding something to the request prior to the auto-redirect as I can see in the Network requests that some type of caching or preflight is going on before it hits us

ok, but the strange part is that it seems to affect chrome based browsers, but not Safari... Which I find it strange

I don't have any middleware currently, what I'm doing is the following. The main page

and the api route

Firefox also seems affected, looking through the network requests I can see additional query params are being appended to the URL `/api/auth/login?_rsc=1iwkq which must be some sort of Cloudflare thing

Maybe Safari and Firefox has higher security and are stripping this

Let me see if I can find any more details on Cloudflare pages

btw, I was able to overcome the problem... It's not the cleanest solution, but I went with this

thanks for the support

however the part of the creation of account is failing, even if I try to go directly through the address https://teamigo-app.pages.dev/api/auth/login

I see, this is quote curious.

quote curious ? 🙂

What’s happening on the create flow? Is it isolated to a specific browser?

Seems to be only affecting chrome

is there any update, idea on how to solve this ?

I think we’d need more details here. I’ve tested your app at https://teamigo-app.pages.dev/api/auth/login on Chrome and have been able to both login and register successfully

could you please try to create an account ?

I'll provide a repo

I have 2 accounts - created one just now also

The repo

https://github.com/pedroresende/next-kinde-cloudflare

Hey ,
We are still looking into this issue.

Thank you

Any ideia what is the problem ? Any idea when it might be fixed ?

Hey ,
We are still investigating this issue, so unfortunately I can't provide concrete information on what the problem is and when it will be fixed.

Once we have more information on this issue I will get back to you.

Hey the most I’ve managed to work out so far is that it is happening with the next/navigation redirect. I tried to reproduce it in my own deployed project with no luck :(

One thing that worked before to fix an issue similar to this was to use permanentRedirect instead of redirect from next/navigation

thank you , I'll give it a try

, any news about this ? I'm asking because it is a blocker for more than 12 days already... From other comments, I see that this issue is affecting more people

I love your product, but this is a deal breaker on my point of view

Hey ,
I apologise that this issue has not resolved.
My team are still investigating this issue.

It seems like the issue is to do with some sort of pre-fetching going on, and possibly a Chrome update as it seemingly is happening out of nowhere.

- are you able to let me know the following:

• What version of the NextJS SDK you are using?
• What version of Chrome you are using that you can reproduce this on?
• Can you reproduce this locally and when deployed to Cloudflare?

I think it is related to this: https://github.com/vercel/next.js/issues/65335

https://github.com/vercel/next.js/discussions/59167

hey I reproduced the error with the github repo you sent through, I managed to find a fix for you

I’ll send a video in a moment, TLDR: if you are redirecting to api/auth/login the page you do that from should be dynamic -> export const dynamic = "force-dynamic" to avoid prefetching which is causing the issue

In your case specifically, for the dashboard page I would suggest you redirect to api/auth/login straight away rather than redirecting back to / if that suits your needs

Then on the home page, you can force dynamic or as your app evolves maybe the home page will be a dynamic page anyway

Thank you for the help , it was the problem. 👏

Do we know why this started now even though code has been running for months

does it make sense to also add force dynamic to the API

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

import { routeHandler } from '@/lib/route/handlers/edge';

export const GET = routeHandler(handleAuth());

export const dynamic = 'force-dynamic';

export const runtime = 'edge';

i still have this issue even after adding force-dynamic

In my case what I have in the api it's the following

the force-dynamic shouldn't be needed, since it's already an API

Yh I thought so. But I still cannot seem to get it to work

hum... in the main page.tsx, I have

which version of the package are you using ?

2.3.4

I'm actually using 2.3.6, could you try to update it ?

Dong that now 🙏

import IndexPage from '@/components/ui/layouts/dashboard/pages/index';

export const runtime = 'edge';

export const dynamic = 'force-dynamic';

export default IndexPage;

thats my index page

so the signin/signup form is displayed using a middleware ?

I have a dedicated login / register page and this index page redirects to that page if not authenticated and if authenticated to dashboard

after the update (and before actually) I am getting this when deployed

when i clear storage though it goes back to the roast/mixed issue

Hey ,
Sorry that you are still experiencing this issue, I will get a member of my team to look into the issue further.

hey would you be able to send over your code?

Hey also I don't know if this is helpful but it seems new Users are able to get in but I am not able to sign in even in an incognito window and after clearing out my whole storage, cookies and all.

I will send the code ASAP

// src/app/page.tsx
'use server';

import { RedirectType } from 'next/navigation';

import { routes } from '@/config/navigation/routes';
import { getFFValue } from '@/config/permissions/feature-flags';
import { generateRoutes, redirect } from '@/lib/auth/utils';
import { isUserAuthenticated } from '@/lib/sdks/kinde/api/session';

interface AuthenticationRedirection {
  replace?: boolean;
  redirectWhenAuthenticated?: boolean;
  redirectPaths?: {
    authenticated: string;
    unauthenticated: string;
  };
}

const defaultARArgs = {
  replace: false,
  redirectWhenAuthenticated: false,
  redirectPaths: {
    authenticated: routes.businesses, // routes.dashboard
    unauthenticated: routes.login
  }
};

export async function authenticationRedirection(
  authArgs: AuthenticationRedirection = defaultARArgs
) {
  const currentPath = generateRoutes().current.path;

  const args = Object.assign({}, defaultARArgs, authArgs);

  const authCheck = await isUserAuthenticated();

  const redirectType = args.replace ? RedirectType.replace : RedirectType.push;

  let pathOrUrl = '';

  if (!authCheck && getFFValue('NEEDS_AUTH')) {
    pathOrUrl = `${args.redirectPaths.unauthenticated}?next=${currentPath}`;
  }

  if (!authCheck && !getFFValue('NEEDS_AUTH') && args.redirectWhenAuthenticated) {
    pathOrUrl = args.redirectPaths.unauthenticated;
  }

  if (authCheck && args.redirectWhenAuthenticated) {
    pathOrUrl = args.redirectPaths.authenticated;
  }

  if (pathOrUrl) {
    redirect({ pathOrUrl, redirectType });
  }
}

export default async function IndexPage() {
  await authenticationRedirection({
    redirectWhenAuthenticated: true,
    replace: true
  });
}

export const dynamic = 'force-dynamic';

// src/app/login/page.tsx

import { redirect } from 'next/navigation';

import { routes, apiRoutes } from '@/config/navigation/routes';
import { generateRoutes } from '@/lib/auth/utils';
import { isUserAuthenticated } from '@/lib/sdks/kinde/api/session';

export const dynamic = 'force-dynamic';

export default async function LoginPage() {
  const authCheck = await isUserAuthenticated();

  if (authCheck) {
    redirect(routes.businesses); // routes.dashboard
  }

  const redirectPath = generateRoutes(routes.authCallback).generated.url ?? routes.businesses; // routes.dashboard
  redirect(`${apiRoutes.auth.login}?post_login_redirect_url=${redirectPath}`);
}

could the Redirect.replace be an issue?

Seems to work locally now after changing that replace to push (not sure if it mattered) pushing live and will see

Let us know

I still get this error

and in incognito i don't even get that far

Unknown response content-type. Received: text/plain; charset=utf-8. Expected: roast/mixed

Thanka , I’ll lookk into this for you today

would you be able to send a link to your website so we can reproduce the error you’re getting?

Ahh looks like Next.js changed some of their prefetching headers - should be fixed now

it should just work

Hey Peter. It works!

I see you said prefetching headers changed. Would you be able to give more insight into how that was an issue and the fix that was done only so i can have more knowledge on how Kinde and NextJS are connected

hey - Next.js does a prefetching thing from static pages where it will load a route a user visits it. When prefetching is done to a Kinde Auth route it will break the auth flow for security reasons.

So we put in place a check to requests to the Kinde Auth routes where if it contains the prefetching header provided by Next.js we ignore it.

What happened was Next.js changed how they were setting their prefetching headers, so we weren’t able to detect prefetches and so it would error out in the auth flow