Settings

Overview

The Settings feature allows users to configure their application settings, providing access to session details, account actions, and other configuration options. It ensures that users can manage their sessions and account-related activities effectively.

User-facing behavior

The Settings page is accessible only to authenticated users. If a user is not signed in, they are redirected to the sign-in page.
The page displays session details, including a summary of the current session.
Users can perform account actions, such as accessing the "account danger zone" for critical account management tasks.
The interface is designed with a clean layout, using cards to separate different sections of information.

Architecture and data flow

The Settings page is built using React and Next.js, leveraging server-side rendering to fetch session data.
Authentication is handled through a session management system, which checks if a user is logged in before rendering the page.
The page structure is divided into a header, session details, and account actions, each encapsulated in a Card component for better organization and styling.

Key implementation details

The Settings page checks for an active session using the getSession function. If no session is found, the user is redirected to the sign-in page:

const session = await getSession();
if (!session) {
  redirect('/sign-in?redirect=/settings');
}

This ensures that only authenticated users can access the settings page apps/web/src/app/settings/page.tsx:7-12.

The main content of the page is structured into two primary sections: session details and account actions, each presented within a Card component:

<Card className="p-6 bg-zinc-900/70 border-zinc-800 space-y-4">
  <h2 className="text-lg font-semibold">Session details</h2>
  <SessionSummary />
</Card>

This design choice enhances readability and user experience by visually separating different types of information apps/web/src/app/settings/page.tsx:19-23.

The account actions section includes a link to the account danger zone, where users can manage sensitive account settings:

<Button asChild variant="outline" size="sm">
  <Link href="/account">Open account danger zone</Link>
</Button>

This provides a clear call to action for users needing to perform critical account management tasks apps/web/src/app/settings/page.tsx:27-30.

Key files