# Private pages

If you need to authenticate your users, you probably need to give them access to a private section of the website.

Shipped provides patterns to handle private pages.

### Authenticated pages

These are pages accessible only if a user is logged in.

Use the NextAuth hook `useSession` you retrieve the current user session, and if they are logged in or not.

{% code title="src/app/dashboard/page.tsx" %}

```typescript
"use client";

import { Button, Center, Spinner, Stack, Text } from "@chakra-ui/react";
import { useSession } from "next-auth/react";

const Dashboard = () => {
  const { data: session, status } = useSession();

  return (
    <Center minH="100vh">
      {status === "loading" && <Spinner color="brand.500" />}
      {status === "authenticated" && (
        <p>You are logged in as {session?.user?.email}</p>
      )}
      {status === "unauthenticated" && (
        <Stack>
          <Text>Sign in to access</Text>
          <Button as="a" href="/login" colorScheme="brand">
            Sign in
          </Button>
        </Stack>
      )}
    </Center>
  );
};

export default Dashboard;
```

{% endcode %}

### Authenticated API endpoints

These are API endpoints that are protected and only logged in users can call them and get a correct response.

{% code title="src/app/api/user/route.ts" %}

```typescript
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../auth/[...nextauth]/route";
import { HttpStatusCode } from "axios";
import { prismaClient } from "@/prisma/db";

export async function POST(req: NextRequest) {
  const session = await getServerSession(authOptions);

  if (!session || !session?.user?.email) {
    return NextResponse.json(
      { error: "Unauthorized" },
      { status: HttpStatusCode.Unauthorized } // 401
    );
  }

  if (session && session?.user?.email) {
    const user = await prismaClient.user.findFirst({
      where: {
        email: session?.user?.email,
      },
    });

    if (!user) {
      return NextResponse.json(
        { error: "Unauthorized" },
        { status: HttpStatusCode.Unauthorized } // 401
      );
    }

    if (user) {
      return NextResponse.json({ user }, { status: HttpStatusCode.Ok }); // 200
    }
  }
}
```

{% endcode %}

### How to add a new private page

{% embed url="<https://www.loom.com/share/302b938422994b43bb60a339a2363136?sid=d093d02b-ddbb-4ec7-9988-6f2b36ac3b17>" %}
How to add a new page
{% endembed %}

As an example, let's say we want to add a new section to our SaaS, at `/todo` to show a simple todo app.

Add the new route to the file `src/data/routes.ts`

{% code title="src/data/routes.ts" %}

```typescript
export enum Routes {
  /* ... */
  todo = "/todo",
}

```

{% endcode %}

Create a new folder in `src/app` and call it `todo`.

Create a new file, called `page.tsx` inside the `todo` folder.

In the `page.tsx`, add a code similar to this

{% code title="src/app/todo/page.tsx" %}

```typescript
import { WebAppPage } from "@/components/templates/WebAppPage/WebAppPage";
import { Routes } from "@/data/routes";

const TodoPage = () => {
  return <WebAppPage currentPage={Routes.todo} />;
};

export default TodoPage;

```

{% endcode %}

Open the component `<WebAppPage />` at `src/components/templates/WebAppPage/WebAppPage.tsx` and scroll down.

Render your new page, when the current page is `Routes.todo`

```jsx
<Flex>
  {currentPage === Routes.dashboard && (
    <Center w="100%" flexDir="column">
      <Dashboard />
    </Center>
  )}
  
  {currentPage === Routes.todo && (
    <Center w="100%" flexDir="column">
      <Todo />
    </Center>
  )}
  
  {/* Add the route components here */}
</Flex>
```

To add the new menu item to the sidebar, open `src/components/organisms/Sidebar/SidebarMenuItems.tsx` scroll to the MenuItem, and add a new element:

{% code title="src/components/organisms/Sidebar/SidebarMenuItems.tsx" %}

```jsx
<MenuItem
    route={Routes.todo}
    currentPage={currentPage}
    onClick={onMenuItemClick}
    loadingRoute={loadingRoute}
    >
    <TbChecklist size="16px" /> &nbsp;<MenuLabel>Todo</MenuLabel>
</MenuItem>
```

{% endcode %}

Your menu item will now appear in the sidebar:

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FpB2wOlUPCHkHQcb7svay%2Fimage.png?alt=media&#x26;token=e6d39882-5a47-43d9-a6c5-8ed9987fc904" alt=""><figcaption><p>Todo page in the sidebar</p></figcaption></figure>