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.
57 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*"],
};