Skip to main content

​
App Router

Tracera uses the Next.js App Router (introduced in Next.js 13, matured in 16) for file-system based routing with React Server Components.

​
Pages

RouteFileAuthDescription
/app/page.tsxNoHome page — redirects to /dashboard or /login
/loginapp/login/page.tsxNoLogin page with OAuth and magic link options
/dashboardapp/dashboard/page.tsxYesUser profile and dashboard

​
Root Layout

The root layout (app/layout.tsx) wraps all pages with:
  1. ThemeProvider — enables dark/light mode switching
  2. AuthProvider — provides authentication context to all client components
  3. Global styles — Tailwind CSS base styles and fonts
export default async function RootLayout({ children }) {
  const user = await getSession();

  return (
    <html>
      <body>
        <ThemeProvider>
          <AuthProvider initialUser={user}>
            {children}
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

​
Authentication Flow

​
Home Page (/)

The home page checks authentication status server-side and redirects:
  • Authenticated → /dashboard
  • Not authenticated → /login

​
Login Page (/login)

Displays available authentication options:
  • OAuth buttons for configured providers (Google, GitHub, Steam)
  • Magic link email form
  • Dynamically hides providers that aren’t configured

​
Dashboard (/dashboard)

Protected page that requires authentication:
  • Server-side session check redirects to /login if unauthenticated
  • Displays user profile information
  • Shows linked authentication providers
  • Theme toggle and logout functionality

​
Server Actions

Server Actions in app/actions/auth.ts handle authentication mutations:
ActionDescription
logout()Calls backend logout endpoint with CSRF token
requestMagicLink(email)Sends magic link request to backend
These run server-side, keeping authentication tokens and API calls secure.