Protected Routes

Once user is authentified, you can build private routes like a user dashboard, account, etc.

If you want to make protected API calls, follow this tutorial. All pages in /dashboard folder will redirect the user to /dashboard/sign-in page. Since the /sign-in page is in the /dashboard folder, we decided not to handle the layout with a layout.tsx file, but 2 separate layout components, 1 for the dashboard itself, 1 for the auth pages.

The /layout/index.tsx file contains the standard dashboard layout which includes the sidebar, navbar, all with implemented functionalities like displaying user profile image, details, and links to all pages and logout button.

The /auth/index.tsx file contains the standard auth layout which consists of a split screen with the Auth UI and a beautiful image on the left, the footer and a link sending back the user to the landing page.

Here's an example of a simple user dashboard showing private user data in a server component:

import {
  getSession,
  getUserDetails,
  getSubscription,
  getActiveProductsWithPrices,
} from '@/app/supabase-server';
import Generator from '@/components/dashboard/ai-generator';
import { redirect } from 'next/navigation';
 
export default async function Account() {
  const [session, userDetails, products, subscription] = await Promise.all([
    getSession(),
    getUserDetails(),
    getActiveProductsWithPrices(),
    getSubscription(),
  ]);
 
  if (!session) {
    return redirect('/dashboard/signin');
  }
  // To get it one step further, you can check if the user has a subscription going or not.
  if (!subscription) {
    redirect('/dashboard/essay-generator');
  }
 
  return (
    <Generator
      session={session}
      userDetails={userDetails}
      user={session?.user}
      products={products}
      subscription={subscription}
      apiKeyApp={process.env.NEXT_PUBLIC_OPENAI_API_KEY}
    />
  );
}