adrianhajdin / ai_saas_app

Build a REAL Software-as-a-Service app with AI features and payments & credits system that you might even turn into a side income or business idea using Next.js 14, Clerk, MongoDB, Cloudinary AI, and Stripe.

Home Page:https://jsmastery.pro

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cant´see Clerk layout - "Third-party cookie will be blocked

innovashion opened this issue · comments

Chrome browser is blocking Clerk as it says "Third-party cookie will be blocked. As a result you cannot see or use Clerk application within the web.

https://developers.google.com/privacy-sandbox/3pcd?hl=es-419, le recomiendo leer este articulo donde se menciona el bloqueo de cookies de terceros en 2024.
ahora en cuanto no pueda utilizar clerk, es probanble que:

  • si usa src/ archivo middleware.ts tiene que estar en la carpeta /src y no en la raíz del proyecto
  • authMiddleware esta desfasado y ahora se usa clerkMiddleware() a diferencia del primero que proteje todas las rutas por defecto clerkMiddleware() no proteje ninguna ruta por defecto. por ello tiene que hacer esto en middleware.ts:
// para proteger la ruta / que es la home y todas las rutas de credits
const isProtectedRoute = createRouteMatcher(["/", "/credits(.*)"]);

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect();
});
export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

facing the same thing