Documentation
Documentation
Introduction

Getting Started

Getting started
Getting StartedInstallationQuick StartProject Structure

Configuration

Configuration
ConfigurationEnvironment ConfigurationEdge ConfigDatabaseAuth SecretStripeFirebaseStorageGoogle Maps And Cloud Service AccountOAuth ProvidersEmail DeliverySentryFeature Flags

Architecture

Architecture
Architecture OverviewTech StackoRPC MiddlewareDesign Principles

Patterns

Patterns
Code Patterns & ConventionsFeature ModulesError HandlingType Safety

Database

Database
DatabaseSetupSchema DefinitionDatabase OperationsMigrationsCaching
Data Tables

API

oRPCProceduresRoutersoRPC Proxy Setup
APIsOpenAPIREST Endpoints

Auth & Access

AuthenticationConfigurationOAuth ProvidersRolesSession Management
AuthorizationUser RolesPermissions

Routing & i18n

RoutingDeclarative RoutingNavigation
InternationalizationTranslationsLocale Routing

Components & UI

ComponentsButtonsFormsNavigationDialogs
StylesTailwind CSSThemingTypography

Storage

Storage
StorageConfigurationUsageBuckets
Stripe Billing

Extra

Caching

Templates

Templates
Template GuidesCreate New FeatureCreate New PageCreate Database TableCreate oRPC RouterAdd Translations

Development

Development
DevelopmentCommandsAI AgentsBest Practices
Pulling Updates

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