Tutorials > Private Page

🔐 Once the user is authenticated, it's time to craft some exclusive routes! 🚀 Build a personalized user dashboard, an awesome account page, and more! 🌟

Protected API

🔒 Want to make protected API calls? 🚀 Follow the Protected API tutorial to unlock the secrets! 🌟

🔒 /dashboard's layout.ts keeps pages private. Unauthenticated? Swift redirect to login! 🚀 (Check config.ts for auth.)

Check out this sneak peek! A simple user dashboard revealing private user data in a server component. 🌟

/app/dashboard/page.tsx

  import { cookies } from "next/headers";
  import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
  
  // Define a dynamic variable for forced dynamic rendering
  export const dynamic = "force-dynamic";
  
  // This page is marked private and relies on the layout.js component to enforce authentication.
  // Being a server component allows pre-rendering data, such as fetching the user's profile.
  export default async function Dashboard() {
    // Create a Supabase client for server components with cookies support
    const supabase = createServerComponentClient({ cookies });
  
    // Fetch todos data from the Supabase database
    const { data } = await supabase.from("todos").select();
  
    // Display private content in the main section
    return (
      <main className="min-h-screen p-8 pb-24">
        <section className="max-w-xl mx-auto space-y-8">
          {/* Greet users with a bold title */}
          <h1 className="text-3xl md:text-4xl font-extrabold">Welcome to the Private Page</h1>
  
          {/* Show the fetched data only when an SQL table named todos has at least one row */}
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </section>
      </main>
    );
  }
    