Constantly getting ERR_TOO_MANY_REDIRECTS in production
Hello, when I login or sin up, I constantly get this page with ERR_TOO_MANY_REDIRECTS. I deleted my cookies and tried on different navigators but I do not see the problem. Locally, everyhing is fine.
71 Replies
Hi there. Can you share what SDK version or framework you are using?
Thanks for your answer
I use next js the latest one
I deployed on vercel my project
Thanks for the information. I have some suggestions and things for you to check.
Make sure:
- The domain you start the auth flow from matches the domain you are redirected to after auth completion
- Your callback URLs in Kinde dashboard match your Vercel deployment URLs
- Environment variables are not overridden in your Vercel project settings
Another reason the infinite redirect can happen is when there's a mismatch between:
- Your KINDE_SITE_URL and/or KINDE_POST_LOGIN_REDIRECT_URL
- The actual domain you're using (e.g., your-app-projects.vercel.app)
- The callback URL set in your Kinde dashboard
For example, if you're using preview deployments, ensure your callback URLs in Kinde include the preview URL pattern (e.g., your-app-*.vercel.app/api/auth/kinde_callback).
You can also try updating env variables dynamically by adding this to your next.config.js:
/** @type {import('next').NextConfig} */
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;
Let us know if this helpsHello thank you for your extensive answer
I followed step by step this tutorial of yours:https://www.youtube.com/watch?v=ZNuE7CkB6ck
Kinde
YouTube
How to deploy a Kinde Next.js app with Vercel
Software engineer Peter takes you through how to deploy a Kinde app using Vercel, and covers the common pitfalls involved.
00:00 - App demo
0:46 - Creating a project on Vercel
1:19 - Initialising Github repo
2:49 - Setting up environment variables on Vercel
4:00 - Deploying and visiting the app on the Vercel Domain
5:13 - Updating environment ...
And here are my values
Vercel:
The KINDE_POST_LOGIN_REDIRECT_URL: https://texxt-final.vercel.app/dashboard
TEXXT
Drive more sales to your location in seconds with SMS Marketing
it shows this:
I deleted my cookies but it keeps getting the same problem
Please if I could get an answer asap, it is for an importnt project thank you so much
I will try to expedite, but we do have a queue of queries to attend to.
Did you do a redeploy on Vercel after changing the variables?
Also, which Kinde business is the one you have issues with - I see you have three.
We need this info to help.
it is texxt.io
Yes I did redeploy
If you need more info do not hesitate
Okay, I'm putting in the queue to be picked up. We appreciate your patience.
Hey @M would you be able to share the route protection code for
dashboard and the cookies under the application tab šHello
import { DashboardSideBar } from "@/app/(store)/(components-store)/DashboardSideBar";
import { redirect } from "next/navigation";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import prisma from "@/app/lib/db";
// VƩrification si le user connectƩ existe sur la base de donnƩes, synchronisation entre Kinde et Supabase
async function getData(email: string, id: string) {
const store = await prisma.store.findUnique({
where: {
id: id,
},
select: {
id: true,
isSetUp: true,
},
});
if (!store) {
await prisma.store.create({
data: {
id: id,
email: email,
name: "Default Store Name", // Placeholder pour le nom
address: "Default Address", // Placeholder pour l'adresse
primaryColor: "#FFFFFF", // Placeholder pour les couleurs
secondaryColor: "#000000",
logoUrl: "",
phoneNumber: "000-000-0000", // Placeholder pour le numƩro
},
});
redirect("/set-up");
}else if(!store.isSetUp){
return redirect("/set-up");
}
} export default async function Layout({ children, }: { children: React.ReactNode; }) { const { getUser } = getKindeServerSession(); const user = await getUser(); if (!user) { return redirect("/"); } await getData(user.email as string, user.id as string); return ( <div className="container flex-1 md:grid md:grid-cols-[200px_1fr] md:gap-12"> <DashboardSideBar /> <main className="mt-6 md:mt-0">{children}</main> </div> ); } This is the layout of the dashboard where all the logic regarding the sync between my database and Kinde is done And this is the page.tsx import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Users, Star, Monitor, Clipboard } from "lucide-react"; export default function DashboardHome() { const cards = [ { title: "ELEMENT", icon: <Star />, link: "/dashboard/element", }, { title: "element", icon: <Users />, link: "/dashboard/element", }, { title: "Campaigns", icon: <Monitor />, link: "/dashboard/sendcampaign", }, { title: "Form", icon: <Clipboard />, link: "/dashboard/forms", }, ]; return ( <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6"> {cards.map((card, index) => ( <a key={index} href={card.link} className="transform transition hover:scale-105" > <Card className="hover:shadow-lg cursor-pointer"> <CardHeader className="flex items-center space-x-4"> {card.icon} <CardTitle>{card.title}</CardTitle> </CardHeader> <CardContent> <p className="text-sm text-gray-500"> Click to view details about {card.title.toLowerCase()}. </p> </CardContent> </Card> </a> ))} </div> ); } If possible, Iād really appreciate a response ASAP, as I need to deploy my application by tomorrow and authentication is the only blocker. I used to work with Clerk but switched to Kinde for the simplicity. Everything works perfectly in local, so Iād be grateful for your support to get this resolved. Thank you very muchš I deploy on vercel and here is the version of Kinde I use: kinde-oss/kinde-auth-nextjs": "^2.4.6" For next js I use: next": "15.1.3", And react I use the version 19 I think If you need any more info please do not hesitate
} export default async function Layout({ children, }: { children: React.ReactNode; }) { const { getUser } = getKindeServerSession(); const user = await getUser(); if (!user) { return redirect("/"); } await getData(user.email as string, user.id as string); return ( <div className="container flex-1 md:grid md:grid-cols-[200px_1fr] md:gap-12"> <DashboardSideBar /> <main className="mt-6 md:mt-0">{children}</main> </div> ); } This is the layout of the dashboard where all the logic regarding the sync between my database and Kinde is done And this is the page.tsx import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Users, Star, Monitor, Clipboard } from "lucide-react"; export default function DashboardHome() { const cards = [ { title: "ELEMENT", icon: <Star />, link: "/dashboard/element", }, { title: "element", icon: <Users />, link: "/dashboard/element", }, { title: "Campaigns", icon: <Monitor />, link: "/dashboard/sendcampaign", }, { title: "Form", icon: <Clipboard />, link: "/dashboard/forms", }, ]; return ( <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6"> {cards.map((card, index) => ( <a key={index} href={card.link} className="transform transition hover:scale-105" > <Card className="hover:shadow-lg cursor-pointer"> <CardHeader className="flex items-center space-x-4"> {card.icon} <CardTitle>{card.title}</CardTitle> </CardHeader> <CardContent> <p className="text-sm text-gray-500"> Click to view details about {card.title.toLowerCase()}. </p> </CardContent> </Card> </a> ))} </div> ); } If possible, Iād really appreciate a response ASAP, as I need to deploy my application by tomorrow and authentication is the only blocker. I used to work with Clerk but switched to Kinde for the simplicity. Everything works perfectly in local, so Iād be grateful for your support to get this resolved. Thank you very muchš I deploy on vercel and here is the version of Kinde I use: kinde-oss/kinde-auth-nextjs": "^2.4.6" For next js I use: next": "15.1.3", And react I use the version 19 I think If you need any more info please do not hesitate
Of course! Would you be able to send a screenshot of your cookies
I just tried loggin in just now and it was working
are you experiencing this issue on preview domains?
Thanks for your answer
I cannot access to the /dashboard
Yep that's fair I noticed that
I logged in
yep that looks good to me, I have the same
Do you think its the Layout page thats causing the redirect back to
/locally
Locally it is fine
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { isSetUp } from "@/app/actions/db/store";
export default async function Page() {
const { getUser } = getKindeServerSession();
const user = await getUser();
if (await isSetUp()) {
return redirect("/dashboard");
} else if (!user) {
return redirect("/");
}
return <SetupForm />;
}
import { DashboardSideBar } from "@/app/(store)/(components-store)/DashboardSideBar";
import { redirect } from "next/navigation";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import prisma from "@/app/lib/db";
// VƩrification si le user connectƩ existe sur la base de donnƩes, synchronisation entre Kinde et Supabase
async function getData(email: string, id: string) {
const store = await prisma.store.findUnique({
where: {
id: id,
},
select: {
id: true,
isSetUp: true,
},
});
if (!store) {
await prisma.store.create({
data: {
id: id,
email: email,
name: "Default Store Name", // Placeholder pour le nom
address: "Default Address", // Placeholder pour l'adresse
primaryColor: "#FFFFFF", // Placeholder pour les couleurs
secondaryColor: "#000000",
logoUrl: "",
phoneNumber: "000-000-0000", // Placeholder pour le numƩro
},
});
redirect("/set-up");
}else if(!store.isSetUp){
return redirect("/set-up");
}
} export default async function Layout({ children, }: { children: React.ReactNode; }) { const { getUser } = getKindeServerSession(); const user = await getUser(); if (!user) { return redirect("/"); } await getData(user.email as string, user.id as string); return ( <div className="container flex-1 md:grid md:grid-cols-[200px_1fr] md:gap-12"> <DashboardSideBar /> <main className="mt-6 md:mt-0">{children}</main> </div> ); } These are the two only places where I redirect to the homepage
} export default async function Layout({ children, }: { children: React.ReactNode; }) { const { getUser } = getKindeServerSession(); const user = await getUser(); if (!user) { return redirect("/"); } await getData(user.email as string, user.id as string); return ( <div className="container flex-1 md:grid md:grid-cols-[200px_1fr] md:gap-12"> <DashboardSideBar /> <main className="mt-6 md:mt-0">{children}</main> </div> ); } These are the two only places where I redirect to the homepage
I see, are you able to check your DB to see if the prod users are being set up?
it would be strange if
was firing, because the user is being loaded as a part of the avatar in the nav, can get the first letter of their name and the email
yes exaclty
But in my whole project, these are the only places
seems like the auth is working because the cookies are being set to the correct domain,
I think the issue must lie in
/dashboard or /set-up, unfortunately i can't work it out by just looking at the code
Would you be able to add some console logs?
- dashboard layout console.log(user) before if(!user)
- dashboard layout console.log("layout redirect") before redirect("/")
- set-up console,.log("setup redirect") before redirect("/')
that might help us debugOkok I am doing that
also are you using middleware?
No I am not
I followed this tutorial to set up kinde:
Jan Marshal
YouTube
Create a SaaS Application with Next.js.14, Stripe, Kinde, Prisma, S...
š Build a SaaS Application using Next.js 14, Stripe, Kinde, Prisma, Supabase, and Tailwind! Learn step-by-step and elevate your development skills.
š Kinde Auth: https://dub.sh/xeU8r3v
šØš»āš» GitHub Repository: https://www.janmarshal.com/courses/create-a-saas-application-with-next-js-14-stripe-kinde-prisma-supabase-and-tailwind
š My Website: h...
I simply installed kinde
And added this to my api
By the way I structured my folders in a certain way:
The (customer) and (store) have a different globals.css and layout
I don't know if it would be a factor but maybe
I can share my repo if needed
I deployed
Ah man i wonder what is going on, I think sharing the repo might be the best here
I dont think the layouts in customer and store should be an issue
Basically there is an infinite loop but I don't know from where
GitHub
GitHub - MohamedDoubleFocus/texxt-final
Contribute to MohamedDoubleFocus/texxt-final development by creating an account on GitHub.
Here it is
ahh! looks like its's private
I juste made it public
Hi all, I Am getting pretty much identical issues from following a similar tutorial from the same person. https://www.youtube.com/watch?v=_ypZyGeJox8
Jan Marshal
YouTube
Create a SaaS using Next.js, Kinde-Auth, Supabase, Prisma, Stripe, ...
Hey everyone, what's up šš»
Today, you are going to build a multi-tenant blogging SaaS application using the best tech on the market. This includes Next.js 15, Kinde Auth, Supabase, Prisma, Stripe, Tailwind CSS, shadcn/ui, Vercel, Conform, and much more. This is a full-stack tutorial, which means we will build everything from start to finish!
š...
GitHub
GitHub - evanhill1989/bizBroker
Contribute to evanhill1989/bizBroker development by creating an account on GitHub.
This is all way over my head , but maybe you can find some patterns here that make sense.
Screenshot of network requests from NOT WORKING production :
Screenshot from the WORKING local requests :
And I have tried these boilerplate fixes as best I can
Still getting state mismatches i think, even with dynamic redirects
Here's something maybe...
When I change KINDE_POST_LOGIN_REDIRECT_URL to https://bizlists.vercel.app/noauthroute we jump out of the loop. Basically everything works for the production login flow up until the point where I'm invoking getKindeServerSession() a subsequent time when I redirect to a url that's going to need user information, which triggers another hit to Kinde which redirects to a url that needs user information which triggers a hit to Kinde which...
Feels like there's an obvious fix here lol, but I'm just a front end idiot.
Create Next App
Generated by create next app
I'll get Peter to jump back in š
I am using middleware...
My middleware.ts file:
import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
export default withAuth({
loginPage: "/api/auth/login",
isReturnToCurrentPage: true,
});
export const config = {
matcher: ["/dashboard/:path*"],
};
Commented out my middleware.ts file and redeployed, but still getting the same issue.
One thing I thought was weird is that when I'm reauthenticating with Google(after clearing cookies) it still makes a callback GET to my https://bizlists.vercel.app/api/auth/creation. That URL was originally the KINDE_POST_LOGIN_REDIRECT_URL env variable in Vercel , but I switched to https://bizlists.vercel.app/noauthroute to try and troubleshoot without the infinite loop of creation -> dashboard -> kinde -> creation->...
Now the loop starts as usual, but the second time through Kinde interprets the callback as expected to https://bizlists.vercel.app/noauthroute . I have no idea where that first callback to https://bizlists.vercel.app/api/auth/creation is still coming from, so I was thinking that might be a symptom of the issue at least.
Create Next App
Generated by create next app
Thanks for the additional info. I'll nudge again.
Hey @Evan our dev is having a lot of trouble reproducing your issue, making it impossible to suggest a fix. I guess double-checking that URLs in vercel match .env ones, redeploying vercel after any changes. There may also be an ongoing issue with middleware and Next.JS - See this section of the docs. https://docs.kinde.com/developer-tools/sdks/backend/nextjs-sdk/#protect-routes-using-middleware
Kinde docs
Next.js App Router SDK
Our developer tools provide everything you need to get started with Kinde.
I wonder if @Bailey - Insider might be able to help from here?
Hi Evan, just to confirm - after changing your env variables in the Vercel dashboard, did you perform a rebuild? You must ensure you rebuild and tick ignore build cache otherwise you'll end up with stale env vars.
Yes I did. Thanks for following up @Bailey - Insider @CB_Kinde
Ultimately thereās a state mismatch in production. Everything continues working fine and predictably in dev env. no matter how grossly I hack things up trying to troubleshoot this.
Iām just going to actually learn how auth and cookies work so I can troubleshoot more intelligently.
Hrm, I wonder. Could you show me your Vercel build logs?
I wonder if the dashboard page is being statically generated meaning (regardless of state or auth cookies) the user is always evaluated to null, causing a redirect.
Yes! I'll follow that up tomorrow.
Thank you @Bailey - Insider
No worries @Evan - looking at the build logs
/dashboard is being pre-rendered as a static page at build time. This means await requireUser(); in your dashboard page.tsx is probably always going to redirect because at build time, there is no signed in user.
This causes the following redirect loop:
- User logs in and is redirected to /api/auth/creation
- /api/auth/creation redirects to /dashboard
- /dashboard checks if the current user exists (which has been pre-rendered, so it is always falsy) - so redirects back to /api/auth/login
- Repeat ad infinitum
For experimentation's sake - if you add export const dynamic = 'force-dynamic' at the top of the page within the dashboard page.tsx, set the env var to redirect post-login back to /api/auth/creation, and rebuild - does it work now?
This would also explain why it works in dev and not in prod - in dev, there's no pre-rendering of static routes.
Side note - there's ways we can improve the SDK to make routes where it's used force NextJS to render the route as dynamic, but we're taking our time to be careful of where we do this as some of this could result in breaking changes.
CC @CB_KindeReally incredible support ! ā¤ļø
Thanks, Iāll reach back out tomorrow and let you know the results
Glad I can be of assistance, looking forward to seeing how you go š
Brilliant work! Everything works as expected no looping.
Thank you for everything @CB_Kinde @Yoshify
Fantastic! So glad to hear. Youāre most welcome š