Kinde•6mo ago

Next.js app router: is it safe to do the authenticated check in the layout?

In my current project I have added all the pages that need to be protected in the (firm) directory. Is it safe to perform the isAuthenticated check within the layout for all these pages? My use of the middleware would be a little more complicated, since I'm already adding a CSP configuration there that needs to be applied to both protected and non-protected pages. So if this would also be a safe option, it would make it a lot more simple for me, but I'm not sure if I'm overlooking some security implications here.

import SideBar from "@/features/navigation/components/Sidebar";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { redirect } from "next/navigation";

import getCurrentUser from "@/features/authentication/data/getCurrentUser";

export default async function FirmLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isAuthenticated, getPermission } = getKindeServerSession();
  const loggedIn = await isAuthenticated();
  const adminRead = (await getPermission("admin:read"))?.isGranted ?? false;

  if (!loggedIn) {
    redirect("/api/auth/login");
  }

  const { data } = await getCurrentUser();
  const { user } = data ?? {};

  return (
    <>
      <SideBar user={user} adminRead={adminRead}></SideBar>
      <main className="lg:pl-72">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
      </main>
    </>
  );
}

import SideBar from "@/features/navigation/components/Sidebar";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { redirect } from "next/navigation";

import getCurrentUser from "@/features/authentication/data/getCurrentUser";

export default async function FirmLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isAuthenticated, getPermission } = getKindeServerSession();
  const loggedIn = await isAuthenticated();
  const adminRead = (await getPermission("admin:read"))?.isGranted ?? false;

  if (!loggedIn) {
    redirect("/api/auth/login");
  }

  const { data } = await getCurrentUser();
  const { user } = data ?? {};

  return (
    <>
      <SideBar user={user} adminRead={adminRead}></SideBar>
      <main className="lg:pl-72">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
      </main>
    </>
  );
}

2 Replies

onderay•6mo ago

Thanks for providing the addition details around your question. Yes, it is safe to perform the isAuthenticated check within the layout for all the pages in your firm directory. This approach ensures that the authentication check is centralized and consistently applied to all pages using the layout. However, there are a few considerations to keep in mind: Performance: Performing the isAuthenticated check in the layout means that this check will be executed every time the layout is rendered. Ensure that this does not introduce significant performance overhead. Security: As long as the isAuthenticated check is performed on the server side (as shown in your code), it is secure. This prevents unauthorized users from accessing protected pages. User Experience: Redirecting unauthenticated users to the login page from the layout ensures a seamless user experience, as they are redirected before any protected content is rendered. Given your requirement to handle CSP configuration in the middleware, performing the authentication check in the layout is a practical and secure solution.

WoetOP•6mo ago

Thanks for the detailed feedback @onderay ! Very helpful to have a second opinion on this 🙇‍♂️

Gaming

Programming

Next.js app router: is it safe to do the authenticated check in the layout?