Creating Protected Page
Protected pages are internal web app pages such as dashboard, user settings etc. These pages usually require a condition to be met, and the common case is that the user must be authenticated.
All authenticated user pages should be children of this layout - src/app/(dynamic-pages)/(authenticated-pages)/layout.tsx
.
Because this layout handles checking if the user is authenticated or not. If the user is not authenticated, the user will be redirected to the login page.
import { ReactNode } from 'react';
import { ClientLayout } from './ClientLayout';
import { redirect } from 'next/navigation';
import { createSupabaseUserServerComponentClient } from '@/supabase-clients/user/createSupabaseUserServerComponentClient';
export default async function Layout({ children }: { children: ReactNode }) {
const { data, error } =
await createSupabaseUserServerComponentClient().auth.getUser();
if (error || !data.user) {
return redirect('/login');
}
return <ClientLayout>{children}</ClientLayout>;
}
Middleware Protection
In addition to the layout-based protection, Nextbase uses middleware to enhance security and performance. The middleware runs before server components are rendered, allowing for early authorization checks.
// In your middleware file
const unprotectedPagePrefixes = [
'/',
'/changelog',
'/auth(/.)?',
// ... other unprotected routes ...
];
function isUnprotectedPage(pathname: string) {
// Check if the pathname matches any unprotected prefix
}
export async function middleware(req: NextRequest) {
// Check user session and redirect if necessary
// Handle onboarding and admin access
}
This middleware:
- Defines unprotected pages that don't require authentication
- Checks if the user is authenticated for protected routes
- Handles user onboarding and admin access
- Redirects unauthenticated users to the login page
By implementing both layout-based and middleware-based protection, you ensure robust security for your protected pages while maintaining good performance.