Documentation
Documentation
Introduction

Getting Started

Getting StartedInstallationQuick StartProject Structure

Architecture

Architecture OverviewTech StacktRPC MiddlewareDesign Principles

Patterns

Code Patterns & ConventionsFeature ModulesError HandlingType Safety

Database

DatabaseSchema DefinitionDatabase OperationsMigrationsCaching

API

tRPCProceduresRouterstRPC Proxy Setup
APIsOpenAPIREST Endpoints

Auth & Access

AuthenticationConfigurationOAuth ProvidersRolesSession Management
AuthorizationUser RolesPermissions

Routing & i18n

RoutingDeclarative RoutingNavigation
InternationalizationTranslationsLocale Routing

Components & UI

ComponentsButtonsFormsNavigationDialogs
StylesTailwind CSSThemingTypography

Storage

StorageConfigurationUsageBuckets

Configuration

ConfigurationEnvironment VariablesFeature Flags

Templates

Template GuidesCreate New FeatureCreate New PageCreate Database TableCreate tRPC RouterAdd Translations

Development

DevelopmentCommandsAI AgentsBest Practices

Authentication

User authentication with Better-Auth

Overview

This project uses Better-Auth for authentication with support for email/password and OAuth providers.

Architecture

src/lib/auth/
├── server.ts       # Server-side auth instance + layout guards
├── client.ts       # Client-side auth hooks (useAuth)
├── definition.ts   # Type definitions
└── permissions.ts  # Permission utilities

src/features/auth/
├── schema.ts       # User schemas and types
├── functions.ts    # User database operations
├── hooks.ts        # Auth-related form hooks
└── components/     # Auth UI components

Quick Start

Server-Side

import { getAuth } from "@/lib/auth/server";

// Get current session
const auth = await getAuth();

if (auth?.user) {
  console.log("Logged in as:", auth.user.email);
}

Client-Side

"use client";

import { useAuth } from "@/lib/auth/client";

export function UserProfile() {
  const { user, isAuthenticated, signOut } = useAuth();

  if (!isAuthenticated) return <LoginPrompt />;

  return (
    <div>
      Welcome, {user.name}
      <button onClick={() => signOut()}>Logout</button>
    </div>
  );
}

Authentication Flows

Email/Password Login

  1. User submits email/password
  2. Server validates credentials
  3. Session created and cookie set
  4. Redirect to callback URL or dashboard

OAuth Login

  1. User clicks provider button
  2. Redirect to provider's OAuth page
  3. User authorizes application
  4. Callback receives auth code
  5. Server exchanges code for tokens
  6. User account created/linked
  7. Session created and redirect

Email Verification

  1. User registers with email
  2. Verification email sent
  3. User clicks verification link
  4. Account marked as verified
  5. User can now fully access the app

Password Reset

  1. User requests password reset
  2. Reset email sent with token
  3. User clicks reset link
  4. User enters new password
  5. Password updated, session created

Auth Components

Login Form

import { FormLogin } from "@/features/auth/components";

<FormLogin
  onSuccess={() => router.push(PageDashboard())}
  showSocialProviders={true}
/>

Register Form

import { FormRegister } from "@/features/auth/components";

<FormRegister onSuccess={() => router.push(PageLogin())} />

User Dropdown

import { UserDropdown } from "@/features/auth/components";

<UserDropdown /> // Shows user menu or login button

Protected Routes

Routes defined in PagesRequiringAuth are automatically protected:

// src/routes/routing.ts
PagesRequiringAuth: () => [
  PageSettingsProfile,
  PageDashboard,
  PageAdmin,
],

Next Steps

Configuration

Session Management

OAuth Providers

Roles

On this page

Overview
Architecture
Quick Start
Server-Side
Client-Side
Authentication Flows
Email/Password Login
OAuth Login
Email Verification
Password Reset
Auth Components
Login Form
Register Form
User Dropdown
Protected Routes
Next Steps