Private page

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.

The layout.js in /dashboard ensures any pages & subpages are private. If the user is not authenticated, he'll be redirected to the login page (see auth in config.js)

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

/app/dashboard/page.js

import { cookies } from "next/headers";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 
export const dynamic = "force-dynamic";
 
// This is a private page: It's protected by the layout.js component which ensures the user is authenticated.
// It's a server compoment which means you can fetch data (like the user profile) before the page is rendered.
export default async function Dashboard() {
  const supabase = createServerComponentClient({ cookies });
  const { data } = await supabase.from("todos").select();
 
  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <h1 className="text-3xl md:text-4xl font-extrabold">Private Page</h1>
 
        {/* You will only see something if you create an SQL table called todos with at least 1 row */}
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </section>
    </main>
  );
}

Private page

On this page