diff --git a/ts/mobile-starter/.gitignore b/ts/mobile-starter/.gitignore
new file mode 100644
index 00000000..279c4059
--- /dev/null
+++ b/ts/mobile-starter/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+.encore
+encore.gen
+.turbo
+.expo
diff --git a/ts/mobile-starter/README.md b/ts/mobile-starter/README.md
new file mode 100644
index 00000000..34ff9c5f
--- /dev/null
+++ b/ts/mobile-starter/README.md
@@ -0,0 +1,154 @@
+# Mobile App Starter with WorkOS Auth
+
+A full-stack monorepo starter with an **Encore.ts** backend, **Vite/React** web app, and **Expo/React Native** mobile app -- all sharing the same WorkOS-powered authentication system.
+
+## Features
+
+- Email/password authentication with email verification
+- OAuth login (Google, Microsoft)
+- Password reset flow
+- Organization management with role-based access control
+- Member invitations with role assignment
+- Token refresh with automatic scheduling
+- Protected routes on both web and mobile
+
+## Roles & Permissions
+
+| Permission | Admin | Member |
+|---|---|---|
+| View dashboard | Yes | Yes |
+| View/edit profile | Yes | Yes |
+| View members | Yes | Yes |
+| Invite members | Yes | No |
+| Remove members | Yes | No |
+
+## Prerequisites
+
+- **[Encore CLI](https://encore.dev/docs/ts/install)** installed
+- **[Bun](https://bun.sh/)** (package manager)
+- **[WorkOS](https://workos.com/)** account with:
+  - Client ID
+  - API Key
+  - An organization created
+  - Email/password authentication enabled
+  - OAuth providers configured (Google and/or Microsoft)
+
+## Create app
+
+Create a new Encore application from this template:
+
+```bash
+encore app create --example=ts/mobile-starter
+```
+
+## Configure WorkOS Secrets
+
+Set the required secrets for the auth service:
+
+```bash
+encore secret set WorkOSClientId --type dev,local,pr
+# Enter your WorkOS Client ID
+
+encore secret set WorkOSApiKey --type dev,local,pr
+# Enter your WorkOS API Key
+```
+
+## WorkOS Configuration
+
+In your [WorkOS Dashboard](https://dashboard.workos.com/):
+
+1. **Authentication**: Enable "Email + Password" authentication method
+2. **OAuth**: Configure Google and/or Microsoft OAuth providers
+3. **Redirect URIs**: Add the following:
+   - Web: `http://localhost:3001/auth/oauth/callback`
+   - Native: `mobile-starter://auth/callback`
+4. **Organizations**: Create at least one organization
+5. **Roles**: Create `admin` and `member` roles in your organization settings
+
+## Run the Backend
+
+```bash
+encore run
+```
+
+The Encore development dashboard is available at [http://localhost:9400](http://localhost:9400).
+
+## Run the Web App
+
+```bash
+cd web
+bun install
+bun run dev
+```
+
+The web app runs at [http://localhost:3001](http://localhost:3001).
+
+## Run the Native App
+
+```bash
+cd native
+bun install
+bun run dev
+```
+
+This starts the Expo development server. Use the Expo Go app or a simulator to run it.
+
+## Generate API Clients
+
+After modifying backend endpoints, regenerate the typed API clients:
+
+```bash
+# Install task runner (if not already installed)
+# brew install go-task
+
+# Generate for both web and native
+task gen:api
+
+# Or individually
+task gen:api:web
+task gen:api:native
+```
+
+## Project Structure
+
+```
+├── backend/               # Encore.ts backend
+│   └── auth/              # Auth service (WorkOS)
+│       ├── auth.ts        # JWT verification + gateway
+│       ├── permissions.ts # Roles & permissions
+│       ├── sign-in.ts     # Email/password login
+│       ├── sign-up.ts     # Registration
+│       ├── oauth.ts       # OAuth URL + callback
+│       ├── invitations.ts # Invite/list/revoke members
+│       └── ...            # refresh, verify-email, password-reset, session, sign-out
+│
+├── web/                   # Vite + React 19 + TanStack Router
+│   └── src/
+│       ├── features/auth/ # Auth provider, forms, OAuth buttons
+│       ├── features/invitations/ # Invite form + list
+│       ├── routes/        # TanStack file-based routes
+│       └── lib/           # API client, permissions, utilities
+│
+└── native/                # Expo 54 + React Native
+    ├── app/               # Expo Router (tabs: Dashboard, Members, Profile)
+    ├── features/auth/     # SecureStore-based auth provider
+    └── lib/               # API client, permissions, token utils
+```
+
+## Deployment
+
+### Self-hosting
+
+See the [Encore self-hosting docs](https://encore.dev/docs/ts/self-host/build) for how to build and deploy your application.
+
+### Encore Cloud Platform
+
+Deploy your application to a free staging environment on Encore's cloud:
+
+```bash
+git add -A .
+git commit -m "Initial commit"
+git push encore
+```
+
+Then head over to the [Encore Cloud Dashboard](https://app.encore.dev) to monitor your deployment.
diff --git a/ts/mobile-starter/Taskfile.yml b/ts/mobile-starter/Taskfile.yml
new file mode 100644
index 00000000..0daf3e1d
--- /dev/null
+++ b/ts/mobile-starter/Taskfile.yml
@@ -0,0 +1,43 @@
+version: "3"
+
+vars:
+  ENCORE_APP_ID: "{{ENCORE_APP_ID}}"
+
+tasks:
+  dev:
+    desc: Start Encore backend
+    cmd: encore run
+
+  web:
+    desc: Start web dev server
+    dir: web
+    cmd: bun run dev
+
+  native:
+    desc: Start Expo dev server
+    dir: native
+    cmd: bun run dev
+
+  install:
+    desc: Install all dependencies
+    cmd: bun install
+
+  gen:api:web:
+    desc: Generate Encore client for web
+    cmd: encore gen client {{.ENCORE_APP_ID}} --output=web/src/lib/api/client.gen.ts --env=local
+
+  gen:api:native:
+    desc: Generate Encore client for native
+    cmd: encore gen client {{.ENCORE_APP_ID}} --output=native/lib/api/client.gen.ts --env=local
+
+  gen:api:
+    desc: Generate Encore clients for both web and native
+    deps: [gen:api:web, gen:api:native]
+
+  lint:
+    desc: Run linting
+    cmd: bun run lint
+
+  lint:fix:
+    desc: Fix linting issues
+    cmd: bun run lint:fix
diff --git a/ts/mobile-starter/backend/auth/auth.helpers.ts b/ts/mobile-starter/backend/auth/auth.helpers.ts
new file mode 100644
index 00000000..51e3d82e
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/auth.helpers.ts
@@ -0,0 +1,84 @@
+import type { AuthenticationResponse, User } from "@workos-inc/node";
+import { APIError } from "encore.dev/api";
+import { getAuthData } from "~encore/auth";
+import { hasPermission, mapRole, type Permission } from "./permissions";
+
+export interface UserInfo {
+	id: string;
+	email: string;
+	firstName: string | null;
+	lastName: string | null;
+	profilePictureUrl: string | null;
+}
+
+export function toUserInfo(user: User): UserInfo {
+	return {
+		id: user.id,
+		email: user.email,
+		firstName: user.firstName,
+		lastName: user.lastName,
+		profilePictureUrl: user.profilePictureUrl,
+	};
+}
+
+export function toAuthResult(response: AuthenticationResponse) {
+	return {
+		accessToken: response.accessToken,
+		refreshToken: response.refreshToken,
+		user: toUserInfo(response.user),
+	};
+}
+
+interface OauthError extends Error {
+	name: "OauthException";
+	error?: string;
+	rawData?: Record<string, unknown>;
+}
+
+export function isOauthException(error: unknown): error is OauthError {
+	return error instanceof Error && error.name === "OauthException";
+}
+
+export function getPendingToken(error: OauthError): string | undefined {
+	return error.rawData?.pending_authentication_token as string | undefined;
+}
+
+export function handleWorkOSError(
+	error: unknown,
+	fallbackMessage: string,
+): never {
+	if (error instanceof APIError) {
+		throw error;
+	}
+
+	if (error instanceof Error && "status" in error) {
+		const status = (error as Error & { status?: number }).status;
+
+		if (status === 401) {
+			throw APIError.unauthenticated("Invalid email or password");
+		}
+		if (status === 409) {
+			throw APIError.alreadyExists("A user with this email already exists");
+		}
+		if (status === 422) {
+			throw APIError.invalidArgument(error.message);
+		}
+		if (status === 429) {
+			throw APIError.resourceExhausted("Too many requests");
+		}
+	}
+
+	throw APIError.internal(fallbackMessage);
+}
+
+export function requirePermission(permission: Permission): void {
+	const authData = getAuthData();
+	if (!authData) {
+		throw APIError.unauthenticated("Not authenticated");
+	}
+
+	const role = mapRole(authData.role);
+	if (!hasPermission(role, permission)) {
+		throw APIError.permissionDenied(`Missing permission: ${permission}`);
+	}
+}
diff --git a/ts/mobile-starter/backend/auth/auth.ts b/ts/mobile-starter/backend/auth/auth.ts
new file mode 100644
index 00000000..f310b2ce
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/auth.ts
@@ -0,0 +1,56 @@
+import { WorkOS } from "@workos-inc/node";
+import { APIError, Gateway, type Header } from "encore.dev/api";
+import { authHandler } from "encore.dev/auth";
+import { secret } from "encore.dev/config";
+import { createRemoteJWKSet, jwtVerify } from "jose";
+
+const workOSClientId = secret("WorkOSClientId");
+const workOSApiKey = secret("WorkOSApiKey");
+
+let _workos: WorkOS | undefined;
+export const getWorkOS = () => {
+	if (!_workos) {
+		_workos = new WorkOS(workOSApiKey());
+	}
+	return _workos;
+};
+
+const getJWKS = () =>
+	createRemoteJWKSet(
+		new URL(`https://api.workos.com/sso/jwks/${workOSClientId()}`),
+	);
+
+interface AuthParams {
+	authorization: Header<"Authorization">;
+}
+
+export interface AuthData {
+	userID: string;
+	email: string;
+	role: "admin" | "member";
+	organizationId: string;
+}
+
+export const auth = authHandler<AuthParams, AuthData>(async (params) => {
+	const token = params.authorization.replace("Bearer ", "");
+	if (!token) {
+		throw APIError.unauthenticated("missing authorization token");
+	}
+
+	try {
+		const { payload } = await jwtVerify(token, getJWKS());
+
+		return {
+			userID: payload.sub ?? "",
+			email: (payload.email as string) ?? "",
+			role: ((payload.role as string) ?? "member") as "admin" | "member",
+			organizationId: (payload.org_id as string) ?? "",
+		};
+	} catch {
+		throw APIError.unauthenticated("could not verify token");
+	}
+});
+
+export const gateway = new Gateway({
+	authHandler: auth,
+});
diff --git a/ts/mobile-starter/backend/auth/encore.service.ts b/ts/mobile-starter/backend/auth/encore.service.ts
new file mode 100644
index 00000000..4fc6e66b
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/encore.service.ts
@@ -0,0 +1,3 @@
+import { Service } from "encore.dev/service";
+
+export default new Service("auth");
diff --git a/ts/mobile-starter/backend/auth/invitations.ts b/ts/mobile-starter/backend/auth/invitations.ts
new file mode 100644
index 00000000..0d693349
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/invitations.ts
@@ -0,0 +1,119 @@
+import { APIError, api } from "encore.dev/api";
+import { getAuthData } from "~encore/auth";
+import { getWorkOS } from "./auth";
+import { requirePermission } from "./auth.helpers";
+import { P } from "./permissions";
+
+interface SendInvitationRequest {
+	email: string;
+	role: string;
+}
+
+interface SendInvitationResponse {
+	invitationId: string;
+	email: string;
+	status: string;
+}
+
+export const sendInvitation = api(
+	{
+		expose: true,
+		auth: true,
+		method: "POST",
+		path: "/api/auth/invitations",
+	},
+	async (req: SendInvitationRequest): Promise<SendInvitationResponse> => {
+		requirePermission(P.MEMBERS_INVITE);
+		const authData = getAuthData();
+		if (!authData?.organizationId) {
+			throw APIError.permissionDenied("no organization context");
+		}
+
+		const workos = getWorkOS();
+		const invitation = await workos.userManagement.sendInvitation({
+			email: req.email,
+			organizationId: authData.organizationId,
+			roleSlug: req.role,
+			inviterUserId: authData.userID,
+		});
+
+		return {
+			invitationId: invitation.id,
+			email: invitation.email,
+			status: invitation.state,
+		};
+	},
+);
+
+interface InvitationItem {
+	id: string;
+	email: string;
+	status: string;
+	createdAt: string;
+	expiresAt: string;
+}
+
+interface ListInvitationsResponse {
+	invitations: InvitationItem[];
+}
+
+export const listInvitations = api(
+	{
+		expose: true,
+		auth: true,
+		method: "GET",
+		path: "/api/auth/invitations",
+	},
+	async (): Promise<ListInvitationsResponse> => {
+		requirePermission(P.MEMBERS_VIEW);
+		const authData = getAuthData();
+		if (!authData?.organizationId) {
+			throw APIError.permissionDenied("no organization context");
+		}
+
+		const workos = getWorkOS();
+		const result = await workos.userManagement.listInvitations({
+			organizationId: authData.organizationId,
+		});
+
+		return {
+			invitations: result.data.map((inv) => ({
+				id: inv.id,
+				email: inv.email,
+				status: inv.state,
+				createdAt: inv.createdAt,
+				expiresAt: inv.expiresAt,
+			})),
+		};
+	},
+);
+
+interface RevokeInvitationRequest {
+	id: string;
+}
+
+export const revokeInvitation = api(
+	{
+		expose: true,
+		auth: true,
+		method: "DELETE",
+		path: "/api/auth/invitations/:id",
+	},
+	async (req: RevokeInvitationRequest): Promise<void> => {
+		requirePermission(P.MEMBERS_REMOVE);
+		const authData = getAuthData();
+		if (!authData?.organizationId) {
+			throw APIError.permissionDenied("no organization context");
+		}
+
+		const workos = getWorkOS();
+		const invitation = await workos.userManagement.getInvitation(req.id);
+		if (invitation.organizationId !== authData.organizationId) {
+			throw APIError.permissionDenied(
+				"invitation belongs to another organization",
+			);
+		}
+
+		await workos.userManagement.revokeInvitation(req.id);
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/oauth.ts b/ts/mobile-starter/backend/auth/oauth.ts
new file mode 100644
index 00000000..ab45f949
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/oauth.ts
@@ -0,0 +1,91 @@
+import { api } from "encore.dev/api";
+import { secret } from "encore.dev/config";
+import { getWorkOS } from "./auth";
+import { handleWorkOSError, toAuthResult, type UserInfo } from "./auth.helpers";
+import {
+	getOrgName,
+	isOrgSelectionRequired,
+	resolveOrgAuthByUserId,
+} from "./org-auth";
+
+const workOSClientId = secret("WorkOSClientId");
+
+type OAuthProvider = "GoogleOAuth" | "MicrosoftOAuth";
+
+interface OAuthUrlRequest {
+	provider: OAuthProvider;
+	redirectUri: string;
+}
+
+interface OAuthUrlResponse {
+	url: string;
+}
+
+export const getOAuthUrl = api(
+	{
+		expose: true,
+		auth: false,
+		method: "GET",
+		path: "/api/auth/oauth/url",
+	},
+	async (req: OAuthUrlRequest): Promise<OAuthUrlResponse> => {
+		try {
+			const url = await getWorkOS().userManagement.getAuthorizationUrl({
+				provider: req.provider,
+				clientId: workOSClientId(),
+				redirectUri: req.redirectUri,
+			});
+
+			return { url };
+		} catch (error: unknown) {
+			handleWorkOSError(error, "Failed to get OAuth URL");
+		}
+	},
+);
+
+interface OAuthCallbackRequest {
+	code: string;
+}
+
+interface OAuthCallbackResponse {
+	accessToken: string;
+	refreshToken: string;
+	user: UserInfo;
+	organizationName?: string;
+}
+
+export const oauthCallback = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/oauth/callback",
+	},
+	async (req: OAuthCallbackRequest): Promise<OAuthCallbackResponse> => {
+		try {
+			const response = await getWorkOS().userManagement.authenticateWithCode({
+				clientId: workOSClientId(),
+				code: req.code,
+			});
+
+			const organizationName = await getOrgName(response);
+			return { ...toAuthResult(response), organizationName };
+		} catch (error: unknown) {
+			const orgSelection = isOrgSelectionRequired(error);
+			if (orgSelection?.userId) {
+				const orgResult = await resolveOrgAuthByUserId(
+					orgSelection.userId,
+					orgSelection.pendingToken,
+				);
+				if (orgResult) {
+					return {
+						...toAuthResult(orgResult.response),
+						organizationName: orgResult.organizationName,
+					};
+				}
+			}
+
+			handleWorkOSError(error, "Failed to authenticate with OAuth");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/org-auth.ts b/ts/mobile-starter/backend/auth/org-auth.ts
new file mode 100644
index 00000000..ff8713fe
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/org-auth.ts
@@ -0,0 +1,98 @@
+import type { AuthenticationResponse } from "@workos-inc/node";
+import { secret } from "encore.dev/config";
+import log from "encore.dev/log";
+import { getWorkOS } from "./auth";
+import { getPendingToken, isOauthException } from "./auth.helpers";
+
+const workOSClientId = secret("WorkOSClientId");
+
+type OrgAuthResult = {
+	response: AuthenticationResponse;
+	organizationName: string;
+};
+
+async function selectFirstOrg(
+	userId: string,
+	pendingToken: string,
+): Promise<OrgAuthResult | null> {
+	const workos = getWorkOS();
+	const memberships = await workos.userManagement.listOrganizationMemberships({
+		userId,
+		statuses: ["active"],
+	});
+
+	if (memberships.data.length === 0) {
+		log.info("resolveOrgAuth: no active memberships", { userId });
+		return null;
+	}
+
+	if (memberships.data.length > 1) {
+		log.info(
+			"resolveOrgAuth: multiple memberships, deferring to org selection",
+			{ userId, count: memberships.data.length },
+		);
+		return null;
+	}
+
+	const membership = memberships.data[0];
+	log.info("resolveOrgAuth: selecting org", {
+		userId,
+		organizationId: membership.organizationId,
+		role: membership.role?.slug,
+	});
+
+	const response =
+		await workos.userManagement.authenticateWithOrganizationSelection({
+			clientId: workOSClientId(),
+			organizationId: membership.organizationId,
+			pendingAuthenticationToken: pendingToken,
+		});
+	return { response, organizationName: membership.organizationName };
+}
+
+export async function resolveOrgAuth(
+	email: string,
+	pendingToken: string,
+): Promise<OrgAuthResult | null> {
+	const users = await getWorkOS().userManagement.listUsers({ email });
+	const user = users.data[0];
+	if (!user) {
+		log.warn("resolveOrgAuth: user not found by email", { email });
+		return null;
+	}
+	return selectFirstOrg(user.id, pendingToken);
+}
+
+export async function resolveOrgAuthByUserId(
+	userId: string,
+	pendingToken: string,
+): Promise<OrgAuthResult | null> {
+	return selectFirstOrg(userId, pendingToken);
+}
+
+export async function getOrgName(
+	response: AuthenticationResponse,
+): Promise<string | undefined> {
+	if (!response.organizationId) return undefined;
+	try {
+		const org = await getWorkOS().organizations.getOrganization(
+			response.organizationId,
+		);
+		return org.name;
+	} catch {
+		return undefined;
+	}
+}
+
+export function isOrgSelectionRequired(
+	error: unknown,
+): { pendingToken: string; userId?: string } | null {
+	if (!isOauthException(error)) return null;
+	if (error.error !== "organization_selection_required") return null;
+	const token = getPendingToken(error);
+	if (!token) return null;
+	const userId = (error.rawData?.user as Record<string, unknown>)?.id as
+		| string
+		| undefined;
+	return { pendingToken: token, userId };
+}
diff --git a/ts/mobile-starter/backend/auth/password-reset.ts b/ts/mobile-starter/backend/auth/password-reset.ts
new file mode 100644
index 00000000..9ddfeacf
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/password-reset.ts
@@ -0,0 +1,63 @@
+import { api } from "encore.dev/api";
+import { getWorkOS } from "./auth";
+import { handleWorkOSError } from "./auth.helpers";
+
+interface ForgotPasswordRequest {
+	email: string;
+	passwordResetUrl: string;
+}
+
+interface ForgotPasswordResponse {
+	success: true;
+}
+
+export const forgotPassword = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/forgot-password",
+	},
+	async (req: ForgotPasswordRequest): Promise<ForgotPasswordResponse> => {
+		try {
+			await getWorkOS().userManagement.sendPasswordResetEmail({
+				email: req.email,
+				passwordResetUrl: req.passwordResetUrl,
+			});
+		} catch {
+			// Always return success to prevent email enumeration
+		}
+
+		return { success: true };
+	},
+);
+
+interface ResetPasswordRequest {
+	token: string;
+	newPassword: string;
+}
+
+interface ResetPasswordResponse {
+	success: true;
+}
+
+export const resetPassword = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/reset-password",
+	},
+	async (req: ResetPasswordRequest): Promise<ResetPasswordResponse> => {
+		try {
+			await getWorkOS().userManagement.resetPassword({
+				token: req.token,
+				newPassword: req.newPassword,
+			});
+
+			return { success: true };
+		} catch (error: unknown) {
+			handleWorkOSError(error, "Failed to reset password");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/permissions.ts b/ts/mobile-starter/backend/auth/permissions.ts
new file mode 100644
index 00000000..8744a089
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/permissions.ts
@@ -0,0 +1,39 @@
+export const P = {
+	DASHBOARD_VIEW: "dashboard:view",
+	PROFILE_VIEW: "profile:view",
+	PROFILE_EDIT: "profile:edit",
+	MEMBERS_VIEW: "members:view",
+	MEMBERS_INVITE: "members:invite",
+	MEMBERS_REMOVE: "members:remove",
+} as const;
+
+export type Permission = (typeof P)[keyof typeof P];
+
+export type RoleType = "admin" | "member";
+
+const VALID_ROLES = new Set<string>(["admin", "member"]);
+
+export function mapRole(slug: string): RoleType {
+	return VALID_ROLES.has(slug) ? (slug as RoleType) : "member";
+}
+
+export const ROLE_PERMISSIONS: Record<RoleType, Set<Permission>> = {
+	admin: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+		P.MEMBERS_INVITE,
+		P.MEMBERS_REMOVE,
+	]),
+	member: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+	]),
+};
+
+export function hasPermission(role: RoleType, permission: Permission): boolean {
+	return ROLE_PERMISSIONS[role]?.has(permission) ?? false;
+}
diff --git a/ts/mobile-starter/backend/auth/refresh.ts b/ts/mobile-starter/backend/auth/refresh.ts
new file mode 100644
index 00000000..7107cd2c
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/refresh.ts
@@ -0,0 +1,41 @@
+import { api } from "encore.dev/api";
+import { secret } from "encore.dev/config";
+import { getWorkOS } from "./auth";
+import { handleWorkOSError, toAuthResult, type UserInfo } from "./auth.helpers";
+import { getOrgName } from "./org-auth";
+
+const workOSClientId = secret("WorkOSClientId");
+
+interface RefreshRequest {
+	refreshToken: string;
+}
+
+interface RefreshResponse {
+	accessToken: string;
+	refreshToken: string;
+	user: UserInfo;
+	organizationName?: string;
+}
+
+export const refresh = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/refresh",
+	},
+	async (req: RefreshRequest): Promise<RefreshResponse> => {
+		try {
+			const response =
+				await getWorkOS().userManagement.authenticateWithRefreshToken({
+					clientId: workOSClientId(),
+					refreshToken: req.refreshToken,
+				});
+
+			const organizationName = await getOrgName(response);
+			return { ...toAuthResult(response), organizationName };
+		} catch (error: unknown) {
+			handleWorkOSError(error, "Failed to refresh token");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/session.ts b/ts/mobile-starter/backend/auth/session.ts
new file mode 100644
index 00000000..9f41decf
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/session.ts
@@ -0,0 +1,29 @@
+import { api } from "encore.dev/api";
+import { getAuthData } from "~encore/auth";
+import { mapRole, type RoleType } from "./permissions";
+
+interface SessionResponse {
+	userID: string;
+	email: string;
+	role: RoleType;
+	organizationId: string;
+}
+
+export const getSession = api(
+	{
+		expose: true,
+		auth: true,
+		method: "GET",
+		path: "/api/auth/session",
+	},
+	async (): Promise<SessionResponse> => {
+		const authData = getAuthData()!;
+
+		return {
+			userID: authData.userID,
+			email: authData.email,
+			role: mapRole(authData.role),
+			organizationId: authData.organizationId,
+		};
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/sign-in.ts b/ts/mobile-starter/backend/auth/sign-in.ts
new file mode 100644
index 00000000..f913143f
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/sign-in.ts
@@ -0,0 +1,89 @@
+import { api } from "encore.dev/api";
+import { secret } from "encore.dev/config";
+import { getWorkOS } from "./auth";
+import {
+	getPendingToken,
+	handleWorkOSError,
+	isOauthException,
+	toAuthResult,
+	type UserInfo,
+} from "./auth.helpers";
+import { getOrgName, isOrgSelectionRequired, resolveOrgAuth } from "./org-auth";
+
+const workOSClientId = secret("WorkOSClientId");
+
+interface SignInRequest {
+	email: string;
+	password: string;
+}
+
+interface SignInResponse {
+	status: "complete" | "mfa_required" | "verify_email";
+	accessToken?: string;
+	refreshToken?: string;
+	user?: UserInfo;
+	pendingAuthenticationToken?: string;
+	organizationName?: string;
+}
+
+function pendingResponse(
+	status: "mfa_required" | "verify_email",
+	pendingAuthenticationToken?: string,
+): SignInResponse {
+	return { status, pendingAuthenticationToken };
+}
+
+async function authenticateWithPassword(
+	email: string,
+	password: string,
+): Promise<SignInResponse> {
+	try {
+		const response = await getWorkOS().userManagement.authenticateWithPassword({
+			clientId: workOSClientId(),
+			email,
+			password,
+		});
+
+		const organizationName = await getOrgName(response);
+		return { status: "complete", ...toAuthResult(response), organizationName };
+	} catch (error: unknown) {
+		const orgSelection = isOrgSelectionRequired(error);
+		if (orgSelection) {
+			const orgResult = await resolveOrgAuth(email, orgSelection.pendingToken);
+			if (orgResult) {
+				return {
+					status: "complete",
+					...toAuthResult(orgResult.response),
+					organizationName: orgResult.organizationName,
+				};
+			}
+		}
+
+		if (isOauthException(error)) {
+			const token = getPendingToken(error);
+			if (error.error === "mfa_enrollment") {
+				return pendingResponse("mfa_required", token);
+			}
+			if (error.error === "email_verification_required") {
+				return pendingResponse("verify_email", token);
+			}
+		}
+		throw error;
+	}
+}
+
+export const signIn = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/sign-in",
+	},
+	async (req: SignInRequest): Promise<SignInResponse> => {
+		try {
+			return await authenticateWithPassword(req.email, req.password);
+		} catch (error: unknown) {
+			handleWorkOSError(error, "Failed to sign in");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/sign-out.ts b/ts/mobile-starter/backend/auth/sign-out.ts
new file mode 100644
index 00000000..9d19c494
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/sign-out.ts
@@ -0,0 +1,21 @@
+import { api } from "encore.dev/api";
+
+interface SignOutRequest {
+	sessionId?: string;
+}
+
+interface SignOutResponse {
+	success: true;
+}
+
+export const signOut = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/sign-out",
+	},
+	async (_req: SignOutRequest): Promise<SignOutResponse> => {
+		return { success: true };
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/sign-up.ts b/ts/mobile-starter/backend/auth/sign-up.ts
new file mode 100644
index 00000000..a3d2dbe6
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/sign-up.ts
@@ -0,0 +1,142 @@
+import { api } from "encore.dev/api";
+import { secret } from "encore.dev/config";
+import log from "encore.dev/log";
+import { getWorkOS } from "./auth";
+import {
+	getPendingToken,
+	handleWorkOSError,
+	isOauthException,
+	toAuthResult,
+	type UserInfo,
+} from "./auth.helpers";
+import { getOrgName, isOrgSelectionRequired, resolveOrgAuth } from "./org-auth";
+
+const workOSClientId = secret("WorkOSClientId");
+
+interface SignUpRequest {
+	email: string;
+	password: string;
+	firstName: string;
+	lastName: string;
+}
+
+interface SignUpResponse {
+	status: "complete" | "verify_email";
+	accessToken?: string;
+	refreshToken?: string;
+	user?: UserInfo;
+	userId?: string;
+	pendingAuthenticationToken?: string;
+	organizationName?: string;
+}
+
+async function createUser(req: SignUpRequest) {
+	return getWorkOS().userManagement.createUser({
+		email: req.email,
+		password: req.password,
+		firstName: req.firstName,
+		lastName: req.lastName,
+	});
+}
+
+function isEmailVerificationRequired(error: unknown): boolean {
+	if (
+		isOauthException(error) &&
+		error.error === "email_verification_required"
+	) {
+		return true;
+	}
+	if (
+		error instanceof Error &&
+		"status" in error &&
+		(error as Error & { status?: number }).status === 403 &&
+		error.message.includes("verified before authentication")
+	) {
+		return true;
+	}
+	return false;
+}
+
+function extractPendingToken(error: unknown): string | undefined {
+	if (isOauthException(error)) {
+		return getPendingToken(error);
+	}
+	if (error instanceof Error && "rawData" in error) {
+		const rawData = (error as Error & { rawData?: Record<string, unknown> })
+			.rawData;
+		return rawData?.pending_authentication_token as string | undefined;
+	}
+	return undefined;
+}
+
+async function authenticateNewUser(
+	email: string,
+	password: string,
+	userId: string,
+): Promise<SignUpResponse> {
+	try {
+		const response = await getWorkOS().userManagement.authenticateWithPassword({
+			clientId: workOSClientId(),
+			email,
+			password,
+		});
+
+		const organizationName = await getOrgName(response);
+		return { status: "complete", ...toAuthResult(response), organizationName };
+	} catch (error: unknown) {
+		const orgSelection = isOrgSelectionRequired(error);
+		if (orgSelection) {
+			const orgResult = await resolveOrgAuth(email, orgSelection.pendingToken);
+			if (orgResult) {
+				return {
+					status: "complete",
+					...toAuthResult(orgResult.response),
+					organizationName: orgResult.organizationName,
+				};
+			}
+		}
+
+		if (isEmailVerificationRequired(error)) {
+			const pendingToken = extractPendingToken(error);
+			log.info("signUp: email verification required", {
+				userId,
+				hasPendingToken: !!pendingToken,
+			});
+			return {
+				status: "verify_email",
+				userId,
+				pendingAuthenticationToken: pendingToken,
+			};
+		}
+		throw error;
+	}
+}
+
+export const signUp = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/sign-up",
+	},
+	async (req: SignUpRequest): Promise<SignUpResponse> => {
+		try {
+			const user = await createUser(req);
+			return await authenticateNewUser(req.email, req.password, user.id);
+		} catch (error: unknown) {
+			if (
+				error instanceof Error &&
+				"status" in error &&
+				(error as Error & { status?: number }).status === 409
+			) {
+				try {
+					return await authenticateNewUser(req.email, req.password, "existing");
+				} catch (authError: unknown) {
+					handleWorkOSError(authError, "Failed to create account");
+				}
+			}
+
+			handleWorkOSError(error, "Failed to create account");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/auth/verify-email.ts b/ts/mobile-starter/backend/auth/verify-email.ts
new file mode 100644
index 00000000..de332a9e
--- /dev/null
+++ b/ts/mobile-starter/backend/auth/verify-email.ts
@@ -0,0 +1,71 @@
+import { api } from "encore.dev/api";
+import { secret } from "encore.dev/config";
+import { getWorkOS } from "./auth";
+import { handleWorkOSError, toAuthResult, type UserInfo } from "./auth.helpers";
+import {
+	getOrgName,
+	isOrgSelectionRequired,
+	resolveOrgAuthByUserId,
+} from "./org-auth";
+
+const workOSClientId = secret("WorkOSClientId");
+
+interface VerifyEmailRequest {
+	code: string;
+	pendingAuthenticationToken: string;
+}
+
+interface VerifyEmailResponse {
+	accessToken: string;
+	refreshToken: string;
+	user: UserInfo;
+	organizationName?: string;
+}
+
+async function authenticateWithVerificationCode(
+	code: string,
+	pendingAuthenticationToken: string,
+): Promise<VerifyEmailResponse> {
+	const response =
+		await getWorkOS().userManagement.authenticateWithEmailVerification({
+			clientId: workOSClientId(),
+			code,
+			pendingAuthenticationToken,
+		});
+
+	const organizationName = await getOrgName(response);
+	return { ...toAuthResult(response), organizationName };
+}
+
+export const verifyEmail = api(
+	{
+		expose: true,
+		auth: false,
+		method: "POST",
+		path: "/api/auth/verify-email",
+	},
+	async (req: VerifyEmailRequest): Promise<VerifyEmailResponse> => {
+		try {
+			return await authenticateWithVerificationCode(
+				req.code,
+				req.pendingAuthenticationToken,
+			);
+		} catch (error: unknown) {
+			const orgSelection = isOrgSelectionRequired(error);
+			if (orgSelection?.userId) {
+				const orgResult = await resolveOrgAuthByUserId(
+					orgSelection.userId,
+					orgSelection.pendingToken,
+				);
+				if (orgResult) {
+					return {
+						...toAuthResult(orgResult.response),
+						organizationName: orgResult.organizationName,
+					};
+				}
+			}
+
+			handleWorkOSError(error, "Failed to verify email");
+		}
+	},
+);
diff --git a/ts/mobile-starter/backend/package.json b/ts/mobile-starter/backend/package.json
new file mode 100644
index 00000000..f7be09e3
--- /dev/null
+++ b/ts/mobile-starter/backend/package.json
@@ -0,0 +1,11 @@
+{
+	"name": "backend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"dependencies": {
+		"@workos-inc/node": "^7.0.0",
+		"encore.dev": "^1.44.0",
+		"jose": "^6.0.0"
+	}
+}
diff --git a/ts/mobile-starter/biome.json b/ts/mobile-starter/biome.json
new file mode 100644
index 00000000..97061324
--- /dev/null
+++ b/ts/mobile-starter/biome.json
@@ -0,0 +1,19 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"files": {
+		"ignore": ["node_modules", "dist", "encore.gen", ".encore", "*.gen.ts"]
+	}
+}
diff --git a/ts/mobile-starter/encore.app b/ts/mobile-starter/encore.app
new file mode 100644
index 00000000..ac33af5c
--- /dev/null
+++ b/ts/mobile-starter/encore.app
@@ -0,0 +1,4 @@
+{
+    "id": "",
+    "lang": "typescript"
+}
diff --git a/ts/mobile-starter/native/app.json b/ts/mobile-starter/native/app.json
new file mode 100644
index 00000000..184bc68e
--- /dev/null
+++ b/ts/mobile-starter/native/app.json
@@ -0,0 +1,13 @@
+{
+	"expo": {
+		"scheme": "mobile-starter",
+		"userInterfaceStyle": "automatic",
+		"orientation": "portrait",
+		"name": "Mobile Starter",
+		"slug": "mobile-starter",
+		"plugins": ["expo-router", "expo-secure-store"],
+		"experiments": {
+			"typedRoutes": true
+		}
+	}
+}
diff --git a/ts/mobile-starter/native/app/(tabs)/_layout.tsx b/ts/mobile-starter/native/app/(tabs)/_layout.tsx
new file mode 100644
index 00000000..16e11081
--- /dev/null
+++ b/ts/mobile-starter/native/app/(tabs)/_layout.tsx
@@ -0,0 +1,46 @@
+import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { AuthGuard } from "@/features/auth/components/auth-guard";
+
+export default function TabLayout() {
+	return (
+		<AuthGuard>
+			<Tabs
+				screenOptions={{
+					headerStyle: { backgroundColor: "#fff" },
+					headerTintColor: "#111827",
+					tabBarActiveTintColor: "#2563eb",
+					tabBarInactiveTintColor: "#9ca3af",
+				}}
+			>
+				<Tabs.Screen
+					name="index"
+					options={{
+						title: "Dashboard",
+						tabBarIcon: ({ color, size }) => (
+							<Ionicons name="grid-outline" size={size} color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="members"
+					options={{
+						title: "Members",
+						tabBarIcon: ({ color, size }) => (
+							<Ionicons name="people-outline" size={size} color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="profile"
+					options={{
+						title: "Profile",
+						tabBarIcon: ({ color, size }) => (
+							<Ionicons name="person-outline" size={size} color={color} />
+						),
+					}}
+				/>
+			</Tabs>
+		</AuthGuard>
+	);
+}
diff --git a/ts/mobile-starter/native/app/(tabs)/index.tsx b/ts/mobile-starter/native/app/(tabs)/index.tsx
new file mode 100644
index 00000000..89d8219a
--- /dev/null
+++ b/ts/mobile-starter/native/app/(tabs)/index.tsx
@@ -0,0 +1,48 @@
+import { ScrollView, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuth } from "@/features/auth/providers/auth-provider";
+
+export default function DashboardScreen() {
+	const { user, role, organizationName, email } = useAuth();
+
+	const name =
+		`${user?.firstName ?? ""} ${user?.lastName ?? ""}`.trim() ||
+		email ||
+		"User";
+
+	return (
+		<SafeAreaView style={{ flex: 1, backgroundColor: "#f9fafb" }} edges={["bottom"]}>
+			<ScrollView contentContainerStyle={{ padding: 20, gap: 16 }}>
+				<Text style={{ fontSize: 24, fontWeight: "bold" }}>Dashboard</Text>
+				<Text style={{ fontSize: 14, color: "#6b7280" }}>
+					Welcome back, {name}
+				</Text>
+
+				<InfoCard title="Role" value={role} />
+				<InfoCard title="Organization" value={organizationName || "N/A"} />
+				<InfoCard title="Email" value={user?.email || "N/A"} />
+			</ScrollView>
+		</SafeAreaView>
+	);
+}
+
+function InfoCard({ title, value }: { title: string; value: string }) {
+	return (
+		<View
+			style={{
+				backgroundColor: "#fff",
+				borderRadius: 12,
+				padding: 16,
+				borderWidth: 1,
+				borderColor: "#e5e7eb",
+			}}
+		>
+			<Text style={{ fontSize: 12, color: "#6b7280", marginBottom: 4 }}>
+				{title}
+			</Text>
+			<Text style={{ fontSize: 16, fontWeight: "600", textTransform: "capitalize" }}>
+				{value}
+			</Text>
+		</View>
+	);
+}
diff --git a/ts/mobile-starter/native/app/(tabs)/members.tsx b/ts/mobile-starter/native/app/(tabs)/members.tsx
new file mode 100644
index 00000000..9b8e9ce9
--- /dev/null
+++ b/ts/mobile-starter/native/app/(tabs)/members.tsx
@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+	Alert,
+	FlatList,
+	Pressable,
+	Text,
+	TextInput,
+	View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuth } from "@/features/auth/providers/auth-provider";
+import { apiClient } from "@/lib/api/client";
+import { hasPermission, P } from "@/lib/permissions";
+import type { auth } from "@/lib/api/client.gen";
+
+export default function MembersScreen() {
+	const { role } = useAuth();
+	const canInvite = hasPermission(role, P.MEMBERS_INVITE);
+	const canRemove = hasPermission(role, P.MEMBERS_REMOVE);
+
+	const [invitations, setInvitations] = useState<auth.InvitationItem[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [inviteEmail, setInviteEmail] = useState("");
+	const [inviteRole, setInviteRole] = useState<"admin" | "member">("member");
+	const [isSending, setIsSending] = useState(false);
+
+	const loadInvitations = useCallback(async () => {
+		try {
+			const result = await apiClient.auth.listInvitations();
+			setInvitations(result.invitations);
+		} catch {
+			// Error handled silently
+		} finally {
+			setIsLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		loadInvitations();
+	}, [loadInvitations]);
+
+	const handleInvite = async () => {
+		if (!inviteEmail) {
+			Alert.alert("Error", "Please enter an email address");
+			return;
+		}
+
+		setIsSending(true);
+		try {
+			await apiClient.auth.sendInvitation({
+				email: inviteEmail,
+				role: inviteRole,
+			});
+			setInviteEmail("");
+			Alert.alert("Success", `Invitation sent to ${inviteEmail}`);
+			loadInvitations();
+		} catch (err) {
+			Alert.alert(
+				"Error",
+				err instanceof Error ? err.message : "Failed to send invitation",
+			);
+		} finally {
+			setIsSending(false);
+		}
+	};
+
+	const handleRevoke = async (id: string) => {
+		Alert.alert("Revoke Invitation", "Are you sure?", [
+			{ text: "Cancel", style: "cancel" },
+			{
+				text: "Revoke",
+				style: "destructive",
+				onPress: async () => {
+					try {
+						await apiClient.auth.revokeInvitation({ id });
+						loadInvitations();
+					} catch {
+						Alert.alert("Error", "Failed to revoke invitation");
+					}
+				},
+			},
+		]);
+	};
+
+	return (
+		<SafeAreaView style={{ flex: 1, backgroundColor: "#f9fafb" }} edges={["bottom"]}>
+			<View style={{ padding: 20, gap: 16, flex: 1 }}>
+				<Text style={{ fontSize: 24, fontWeight: "bold" }}>Members</Text>
+
+				{canInvite && (
+					<View
+						style={{
+							backgroundColor: "#fff",
+							borderRadius: 12,
+							padding: 16,
+							borderWidth: 1,
+							borderColor: "#e5e7eb",
+							gap: 12,
+						}}
+					>
+						<Text style={{ fontSize: 16, fontWeight: "600" }}>
+							Invite a member
+						</Text>
+						<TextInput
+							placeholder="colleague@example.com"
+							value={inviteEmail}
+							onChangeText={setInviteEmail}
+							autoCapitalize="none"
+							keyboardType="email-address"
+							style={{
+								borderWidth: 1,
+								borderColor: "#e5e7eb",
+								borderRadius: 8,
+								padding: 12,
+								fontSize: 16,
+								backgroundColor: "#f9fafb",
+							}}
+						/>
+						<View style={{ flexDirection: "row", gap: 8 }}>
+							<Pressable
+								onPress={() => setInviteRole("member")}
+								style={{
+									flex: 1,
+									padding: 10,
+									borderRadius: 8,
+									borderWidth: 1,
+									borderColor:
+										inviteRole === "member" ? "#2563eb" : "#e5e7eb",
+									backgroundColor:
+										inviteRole === "member" ? "#eff6ff" : "#fff",
+									alignItems: "center",
+								}}
+							>
+								<Text
+									style={{
+										color:
+											inviteRole === "member" ? "#2563eb" : "#6b7280",
+										fontWeight: "500",
+									}}
+								>
+									Member
+								</Text>
+							</Pressable>
+							<Pressable
+								onPress={() => setInviteRole("admin")}
+								style={{
+									flex: 1,
+									padding: 10,
+									borderRadius: 8,
+									borderWidth: 1,
+									borderColor:
+										inviteRole === "admin" ? "#2563eb" : "#e5e7eb",
+									backgroundColor:
+										inviteRole === "admin" ? "#eff6ff" : "#fff",
+									alignItems: "center",
+								}}
+							>
+								<Text
+									style={{
+										color:
+											inviteRole === "admin" ? "#2563eb" : "#6b7280",
+										fontWeight: "500",
+									}}
+								>
+									Admin
+								</Text>
+							</Pressable>
+						</View>
+						<Pressable
+							onPress={handleInvite}
+							disabled={isSending}
+							style={{
+								backgroundColor: isSending ? "#93c5fd" : "#2563eb",
+								borderRadius: 8,
+								padding: 12,
+								alignItems: "center",
+							}}
+						>
+							<Text style={{ color: "#fff", fontWeight: "600" }}>
+								{isSending ? "Sending..." : "Send Invitation"}
+							</Text>
+						</Pressable>
+					</View>
+				)}
+
+				<Text style={{ fontSize: 16, fontWeight: "600" }}>
+					Pending Invitations
+				</Text>
+
+				{isLoading ? (
+					<Text style={{ color: "#6b7280" }}>Loading...</Text>
+				) : invitations.length === 0 ? (
+					<Text style={{ color: "#6b7280" }}>No pending invitations.</Text>
+				) : (
+					<FlatList
+						data={invitations}
+						keyExtractor={(item) => item.id}
+						renderItem={({ item }) => (
+							<View
+								style={{
+									backgroundColor: "#fff",
+									borderRadius: 8,
+									padding: 14,
+									borderWidth: 1,
+									borderColor: "#e5e7eb",
+									flexDirection: "row",
+									justifyContent: "space-between",
+									alignItems: "center",
+									marginBottom: 8,
+								}}
+							>
+								<View>
+									<Text style={{ fontWeight: "500" }}>{item.email}</Text>
+									<Text style={{ fontSize: 12, color: "#6b7280" }}>
+										{item.status}
+									</Text>
+								</View>
+								{canRemove && (
+									<Pressable onPress={() => handleRevoke(item.id)}>
+										<Text style={{ color: "#ef4444", fontSize: 14 }}>
+											Revoke
+										</Text>
+									</Pressable>
+								)}
+							</View>
+						)}
+					/>
+				)}
+			</View>
+		</SafeAreaView>
+	);
+}
diff --git a/ts/mobile-starter/native/app/(tabs)/profile.tsx b/ts/mobile-starter/native/app/(tabs)/profile.tsx
new file mode 100644
index 00000000..2dc32909
--- /dev/null
+++ b/ts/mobile-starter/native/app/(tabs)/profile.tsx
@@ -0,0 +1,89 @@
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuth } from "@/features/auth/providers/auth-provider";
+
+export default function ProfileScreen() {
+	const { user, role, organizationName, signOut } = useAuth();
+
+	const name =
+		`${user?.firstName ?? ""} ${user?.lastName ?? ""}`.trim() ||
+		user?.email ||
+		"User";
+
+	return (
+		<SafeAreaView style={{ flex: 1, backgroundColor: "#f9fafb" }} edges={["bottom"]}>
+			<ScrollView contentContainerStyle={{ padding: 20, gap: 16 }}>
+				<Text style={{ fontSize: 24, fontWeight: "bold" }}>Profile</Text>
+
+				<View
+					style={{
+						backgroundColor: "#fff",
+						borderRadius: 12,
+						padding: 16,
+						borderWidth: 1,
+						borderColor: "#e5e7eb",
+						gap: 16,
+					}}
+				>
+					<ProfileRow label="Name" value={name} />
+					<ProfileRow label="Email" value={user?.email || "N/A"} />
+					<ProfileRow label="Role" value={role} capitalize />
+					<ProfileRow
+						label="Organization"
+						value={organizationName || "N/A"}
+					/>
+					<ProfileRow
+						label="User ID"
+						value={user?.id || "N/A"}
+						mono
+					/>
+				</View>
+
+				<Pressable
+					onPress={signOut}
+					style={{
+						backgroundColor: "#ef4444",
+						borderRadius: 8,
+						padding: 14,
+						alignItems: "center",
+						marginTop: 16,
+					}}
+				>
+					<Text style={{ color: "#fff", fontWeight: "600", fontSize: 16 }}>
+						Sign Out
+					</Text>
+				</Pressable>
+			</ScrollView>
+		</SafeAreaView>
+	);
+}
+
+function ProfileRow({
+	label,
+	value,
+	capitalize,
+	mono,
+}: {
+	label: string;
+	value: string;
+	capitalize?: boolean;
+	mono?: boolean;
+}) {
+	return (
+		<View>
+			<Text style={{ fontSize: 12, color: "#6b7280", marginBottom: 2 }}>
+				{label}
+			</Text>
+			<Text
+				style={{
+					fontSize: mono ? 12 : 16,
+					fontWeight: "500",
+					textTransform: capitalize ? "capitalize" : "none",
+					fontFamily: mono ? "monospace" : undefined,
+				}}
+			>
+				{value}
+			</Text>
+		</View>
+	);
+}
diff --git a/ts/mobile-starter/native/app/+not-found.tsx b/ts/mobile-starter/native/app/+not-found.tsx
new file mode 100644
index 00000000..7de30582
--- /dev/null
+++ b/ts/mobile-starter/native/app/+not-found.tsx
@@ -0,0 +1,18 @@
+import { Link, Stack } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function NotFoundScreen() {
+	return (
+		<>
+			<Stack.Screen options={{ title: "Not Found" }} />
+			<View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 20 }}>
+				<Text style={{ fontSize: 20, fontWeight: "bold" }}>
+					This screen doesn't exist.
+				</Text>
+				<Link href="/" style={{ marginTop: 16, paddingVertical: 16 }}>
+					<Text style={{ color: "#2563eb" }}>Go to home screen</Text>
+				</Link>
+			</View>
+		</>
+	);
+}
diff --git a/ts/mobile-starter/native/app/_layout.tsx b/ts/mobile-starter/native/app/_layout.tsx
new file mode 100644
index 00000000..7f04dfc4
--- /dev/null
+++ b/ts/mobile-starter/native/app/_layout.tsx
@@ -0,0 +1,19 @@
+import "@/global.css";
+
+import { Stack } from "expo-router";
+import { AuthProvider } from "@/features/auth/providers/auth-provider";
+
+export const unstable_settings = {
+	initialRouteName: "index",
+};
+
+export default function Layout() {
+	return (
+		<AuthProvider>
+			<Stack screenOptions={{ headerShown: false }}>
+				<Stack.Screen name="index" />
+				<Stack.Screen name="(tabs)" />
+			</Stack>
+		</AuthProvider>
+	);
+}
diff --git a/ts/mobile-starter/native/app/index.tsx b/ts/mobile-starter/native/app/index.tsx
new file mode 100644
index 00000000..155b5fef
--- /dev/null
+++ b/ts/mobile-starter/native/app/index.tsx
@@ -0,0 +1,71 @@
+import { router } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+	KeyboardAvoidingView,
+	Platform,
+	ScrollView,
+	Text,
+	View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuth } from "@/features/auth/providers/auth-provider";
+import { LoginForm } from "@/features/auth/components/login-form";
+import { SignUpForm } from "@/features/auth/components/signup-form";
+import { OAuthButtons } from "@/features/auth/components/oauth-buttons";
+
+export default function LandingScreen() {
+	const { isAuthenticated, isLoading } = useAuth();
+	const [mode, setMode] = useState<"login" | "signup">("login");
+
+	useEffect(() => {
+		if (isLoading) return;
+		if (isAuthenticated) {
+			router.replace("/(tabs)");
+		}
+	}, [isAuthenticated, isLoading]);
+
+	if (isLoading) {
+		return (
+			<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+				<Text style={{ color: "#6b7280" }}>Loading...</Text>
+			</View>
+		);
+	}
+
+	const handleSuccess = () => {
+		router.replace("/(tabs)");
+	};
+
+	return (
+		<SafeAreaView style={{ flex: 1, backgroundColor: "#f9fafb" }}>
+			<KeyboardAvoidingView
+				behavior={Platform.OS === "ios" ? "padding" : "height"}
+				style={{ flex: 1 }}
+			>
+				<ScrollView
+					contentContainerStyle={{
+						flexGrow: 1,
+						justifyContent: "center",
+						paddingHorizontal: 24,
+						paddingVertical: 32,
+					}}
+					keyboardShouldPersistTaps="handled"
+				>
+					<OAuthButtons />
+
+					{mode === "login" ? (
+						<LoginForm
+							onSuccess={handleSuccess}
+							onSwitchToSignUp={() => setMode("signup")}
+						/>
+					) : (
+						<SignUpForm
+							onSuccess={handleSuccess}
+							onSwitchToLogin={() => setMode("login")}
+						/>
+					)}
+				</ScrollView>
+			</KeyboardAvoidingView>
+		</SafeAreaView>
+	);
+}
diff --git a/ts/mobile-starter/native/features/auth/components/auth-guard.tsx b/ts/mobile-starter/native/features/auth/components/auth-guard.tsx
new file mode 100644
index 00000000..967f5f82
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/components/auth-guard.tsx
@@ -0,0 +1,33 @@
+import { router } from "expo-router";
+import { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { useAuth } from "../providers/auth-provider";
+
+interface AuthGuardProps {
+	children: React.ReactNode;
+}
+
+export function AuthGuard({ children }: AuthGuardProps) {
+	const { isAuthenticated, isLoading } = useAuth();
+
+	useEffect(() => {
+		if (isLoading) return;
+		if (!isAuthenticated) {
+			router.replace("/");
+		}
+	}, [isAuthenticated, isLoading]);
+
+	if (isLoading) {
+		return (
+			<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+				<ActivityIndicator size="large" color="#2563eb" />
+			</View>
+		);
+	}
+
+	if (!isAuthenticated) {
+		return null;
+	}
+
+	return <>{children}</>;
+}
diff --git a/ts/mobile-starter/native/features/auth/components/login-form.tsx b/ts/mobile-starter/native/features/auth/components/login-form.tsx
new file mode 100644
index 00000000..2a38a867
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/components/login-form.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import {
+	Alert,
+	Pressable,
+	Text,
+	TextInput,
+	View,
+} from "react-native";
+import { useAuth } from "../providers/auth-provider";
+
+interface LoginFormProps {
+	onSuccess?: () => void;
+	onSwitchToSignUp?: () => void;
+}
+
+export function LoginForm({ onSuccess, onSwitchToSignUp }: LoginFormProps) {
+	const { signIn } = useAuth();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async () => {
+		if (!email || !password) {
+			Alert.alert("Error", "Please fill in all fields");
+			return;
+		}
+
+		setIsLoading(true);
+		try {
+			const result = await signIn(email, password);
+			if (result.status === "complete") {
+				onSuccess?.();
+			} else if (result.status === "verify_email") {
+				Alert.alert("Verify Email", "Please verify your email before signing in.");
+			}
+		} catch (err) {
+			Alert.alert(
+				"Sign In Failed",
+				err instanceof Error ? err.message : "Invalid email or password",
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<View style={{ gap: 16 }}>
+			<Text style={{ fontSize: 24, fontWeight: "bold", textAlign: "center" }}>
+				Welcome back
+			</Text>
+			<Text
+				style={{
+					fontSize: 14,
+					color: "#6b7280",
+					textAlign: "center",
+					marginBottom: 8,
+				}}
+			>
+				Sign in to your account
+			</Text>
+
+			<TextInput
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				autoCapitalize="none"
+				keyboardType="email-address"
+				style={{
+					borderWidth: 1,
+					borderColor: "#e5e7eb",
+					borderRadius: 8,
+					padding: 12,
+					fontSize: 16,
+					backgroundColor: "#fff",
+				}}
+			/>
+
+			<TextInput
+				placeholder="Password"
+				value={password}
+				onChangeText={setPassword}
+				secureTextEntry
+				style={{
+					borderWidth: 1,
+					borderColor: "#e5e7eb",
+					borderRadius: 8,
+					padding: 12,
+					fontSize: 16,
+					backgroundColor: "#fff",
+				}}
+			/>
+
+			<Pressable
+				onPress={handleSubmit}
+				disabled={isLoading}
+				style={{
+					backgroundColor: isLoading ? "#93c5fd" : "#2563eb",
+					borderRadius: 8,
+					padding: 14,
+					alignItems: "center",
+				}}
+			>
+				<Text style={{ color: "#fff", fontWeight: "600", fontSize: 16 }}>
+					{isLoading ? "Signing in..." : "Sign In"}
+				</Text>
+			</Pressable>
+
+			<Pressable onPress={onSwitchToSignUp}>
+				<Text
+					style={{ textAlign: "center", fontSize: 14, color: "#2563eb" }}
+				>
+					Don't have an account? Sign up
+				</Text>
+			</Pressable>
+		</View>
+	);
+}
diff --git a/ts/mobile-starter/native/features/auth/components/oauth-buttons.tsx b/ts/mobile-starter/native/features/auth/components/oauth-buttons.tsx
new file mode 100644
index 00000000..4a859156
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/components/oauth-buttons.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import * as WebBrowser from "expo-web-browser";
+import * as Linking from "expo-linking";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "../providers/auth-provider";
+import type { auth } from "@/lib/api/client.gen";
+
+export function OAuthButtons() {
+	const { storeSession } = useAuth();
+	const [loadingProvider, setLoadingProvider] =
+		useState<auth.OAuthProvider | null>(null);
+
+	const handleOAuth = async (provider: auth.OAuthProvider) => {
+		setLoadingProvider(provider);
+		try {
+			const redirectUri = Linking.createURL("auth/callback");
+			const { url } = await apiClient.auth.getOAuthUrl({
+				provider,
+				redirectUri,
+			});
+
+			const result = await WebBrowser.openAuthSessionAsync(url, redirectUri);
+
+			if (result.type === "success" && result.url) {
+				const parsed = Linking.parse(result.url);
+				const code = parsed.queryParams?.code as string | undefined;
+				if (code) {
+					const authResult = await apiClient.auth.oauthCallback({ code });
+					await storeSession(authResult);
+				}
+			}
+		} catch {
+			// User cancelled or error occurred
+		} finally {
+			setLoadingProvider(null);
+		}
+	};
+
+	const buttonStyle = {
+		flexDirection: "row" as const,
+		alignItems: "center" as const,
+		justifyContent: "center" as const,
+		gap: 8,
+		borderWidth: 1,
+		borderColor: "#e5e7eb",
+		borderRadius: 8,
+		padding: 12,
+		backgroundColor: "#fff",
+	};
+
+	return (
+		<View style={{ gap: 12, marginBottom: 16 }}>
+			<Pressable
+				onPress={() => handleOAuth("GoogleOAuth")}
+				disabled={loadingProvider !== null}
+				style={buttonStyle}
+			>
+				<Text style={{ fontSize: 16, fontWeight: "500" }}>
+					{loadingProvider === "GoogleOAuth"
+						? "Redirecting..."
+						: "Continue with Google"}
+				</Text>
+			</Pressable>
+
+			<Pressable
+				onPress={() => handleOAuth("MicrosoftOAuth")}
+				disabled={loadingProvider !== null}
+				style={buttonStyle}
+			>
+				<Text style={{ fontSize: 16, fontWeight: "500" }}>
+					{loadingProvider === "MicrosoftOAuth"
+						? "Redirecting..."
+						: "Continue with Microsoft"}
+				</Text>
+			</Pressable>
+
+			<View
+				style={{
+					flexDirection: "row",
+					alignItems: "center",
+					marginVertical: 8,
+				}}
+			>
+				<View
+					style={{ flex: 1, height: 1, backgroundColor: "#e5e7eb" }}
+				/>
+				<Text style={{ marginHorizontal: 12, color: "#9ca3af", fontSize: 14 }}>
+					or
+				</Text>
+				<View
+					style={{ flex: 1, height: 1, backgroundColor: "#e5e7eb" }}
+				/>
+			</View>
+		</View>
+	);
+}
diff --git a/ts/mobile-starter/native/features/auth/components/signup-form.tsx b/ts/mobile-starter/native/features/auth/components/signup-form.tsx
new file mode 100644
index 00000000..2c820403
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/components/signup-form.tsx
@@ -0,0 +1,136 @@
+import { useState } from "react";
+import {
+	Alert,
+	Pressable,
+	Text,
+	TextInput,
+	View,
+} from "react-native";
+import { useAuth } from "../providers/auth-provider";
+
+interface SignUpFormProps {
+	onSuccess?: () => void;
+	onSwitchToLogin?: () => void;
+}
+
+export function SignUpForm({ onSuccess, onSwitchToLogin }: SignUpFormProps) {
+	const { signUp } = useAuth();
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async () => {
+		if (!firstName || !lastName || !email || !password) {
+			Alert.alert("Error", "Please fill in all fields");
+			return;
+		}
+		if (password.length < 8) {
+			Alert.alert("Error", "Password must be at least 8 characters");
+			return;
+		}
+
+		setIsLoading(true);
+		try {
+			const result = await signUp(email, password, firstName, lastName);
+			if (result.status === "complete") {
+				onSuccess?.();
+			} else if (result.status === "verify_email") {
+				Alert.alert(
+					"Verify Email",
+					"Please check your inbox for a verification email.",
+				);
+			}
+		} catch (err) {
+			Alert.alert(
+				"Sign Up Failed",
+				err instanceof Error ? err.message : "Something went wrong",
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const inputStyle = {
+		borderWidth: 1,
+		borderColor: "#e5e7eb",
+		borderRadius: 8,
+		padding: 12,
+		fontSize: 16,
+		backgroundColor: "#fff",
+	} as const;
+
+	return (
+		<View style={{ gap: 16 }}>
+			<Text style={{ fontSize: 24, fontWeight: "bold", textAlign: "center" }}>
+				Create account
+			</Text>
+			<Text
+				style={{
+					fontSize: 14,
+					color: "#6b7280",
+					textAlign: "center",
+					marginBottom: 8,
+				}}
+			>
+				Get started with your new account
+			</Text>
+
+			<View style={{ flexDirection: "row", gap: 12 }}>
+				<TextInput
+					placeholder="First name"
+					value={firstName}
+					onChangeText={setFirstName}
+					style={{ ...inputStyle, flex: 1 }}
+				/>
+				<TextInput
+					placeholder="Last name"
+					value={lastName}
+					onChangeText={setLastName}
+					style={{ ...inputStyle, flex: 1 }}
+				/>
+			</View>
+
+			<TextInput
+				placeholder="Email"
+				value={email}
+				onChangeText={setEmail}
+				autoCapitalize="none"
+				keyboardType="email-address"
+				style={inputStyle}
+			/>
+
+			<TextInput
+				placeholder="Password (min 8 characters)"
+				value={password}
+				onChangeText={setPassword}
+				secureTextEntry
+				style={inputStyle}
+			/>
+
+			<Pressable
+				onPress={handleSubmit}
+				disabled={isLoading}
+				style={{
+					backgroundColor: isLoading ? "#93c5fd" : "#2563eb",
+					borderRadius: 8,
+					padding: 14,
+					alignItems: "center",
+				}}
+			>
+				<Text style={{ color: "#fff", fontWeight: "600", fontSize: 16 }}>
+					{isLoading ? "Creating account..." : "Create Account"}
+				</Text>
+			</Pressable>
+
+			<Pressable onPress={onSwitchToLogin}>
+				<Text
+					style={{ textAlign: "center", fontSize: 14, color: "#2563eb" }}
+				>
+					Already have an account? Sign in
+				</Text>
+			</Pressable>
+		</View>
+	);
+}
diff --git a/ts/mobile-starter/native/features/auth/providers/auth-provider.tsx b/ts/mobile-starter/native/features/auth/providers/auth-provider.tsx
new file mode 100644
index 00000000..9e457729
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/providers/auth-provider.tsx
@@ -0,0 +1,200 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import * as SecureStore from "expo-secure-store";
+import { apiClient } from "@/lib/api/client";
+import type { auth } from "@/lib/api/client.gen";
+import { decodeJwtPayload, getRefreshDelay } from "@/lib/token-utils";
+import { mapRole, type RoleType } from "@/lib/permissions";
+import type { AuthContextType, AuthState } from "./types";
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+const initialState: AuthState = {
+	isAuthenticated: false,
+	isLoading: true,
+	user: null,
+	accessToken: null,
+	role: "member",
+	organizationId: "",
+	organizationName: "",
+};
+
+function extractRoleAndOrg(token: string): {
+	role: RoleType;
+	organizationId: string;
+} {
+	const payload = decodeJwtPayload(token);
+	if (!payload)
+		return { role: "member", organizationId: "" };
+	return {
+		role: mapRole((payload.role as string) || undefined),
+		organizationId: (payload.org_id as string) ?? "",
+	};
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+	const [state, setState] = useState<AuthState>(initialState);
+	const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+		undefined,
+	);
+
+	const updateAuth = useCallback(
+		async (result: auth.RefreshResponse & { organizationName?: string }) => {
+			await SecureStore.setItemAsync("accessToken", result.accessToken);
+			await SecureStore.setItemAsync("refreshToken", result.refreshToken);
+			if (result.organizationName) {
+				await SecureStore.setItemAsync(
+					"organizationName",
+					result.organizationName,
+				);
+			}
+
+			const { role, organizationId } = extractRoleAndOrg(result.accessToken);
+			const orgName =
+				result.organizationName ??
+				(await SecureStore.getItemAsync("organizationName")) ??
+				organizationId;
+
+			setState({
+				isAuthenticated: true,
+				isLoading: false,
+				user: result.user,
+				accessToken: result.accessToken,
+				role,
+				organizationId,
+				organizationName: orgName,
+			});
+
+			// Schedule refresh
+			if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+			const delay = getRefreshDelay(result.accessToken);
+			refreshTimerRef.current = setTimeout(async () => {
+				try {
+					const refreshToken = await SecureStore.getItemAsync("refreshToken");
+					if (!refreshToken) return;
+					const refreshResult = await apiClient.auth.refresh({ refreshToken });
+					await updateAuth(refreshResult);
+				} catch {
+					await clearAuth();
+				}
+			}, delay);
+		},
+		[],
+	);
+
+	const clearAuth = useCallback(async () => {
+		await SecureStore.deleteItemAsync("accessToken");
+		await SecureStore.deleteItemAsync("refreshToken");
+		await SecureStore.deleteItemAsync("organizationName");
+		if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+		setState({ ...initialState, isLoading: false });
+	}, []);
+
+	// Bootstrap: try to restore session from SecureStore
+	useEffect(() => {
+		const bootstrap = async () => {
+			const refreshToken = await SecureStore.getItemAsync("refreshToken");
+			if (!refreshToken) {
+				setState((prev) => ({ ...prev, isLoading: false }));
+				return;
+			}
+
+			try {
+				const result = await apiClient.auth.refresh({ refreshToken });
+				await updateAuth(result);
+			} catch {
+				await SecureStore.deleteItemAsync("refreshToken");
+				setState((prev) => ({ ...prev, isLoading: false }));
+			}
+		};
+
+		bootstrap();
+
+		return () => {
+			if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+		};
+	}, [updateAuth]);
+
+	const signIn = useCallback(
+		async (email: string, password: string) => {
+			const result = await apiClient.auth.signIn({ email, password });
+			if (
+				result.status === "complete" &&
+				result.accessToken &&
+				result.refreshToken &&
+				result.user
+			) {
+				await updateAuth({
+					accessToken: result.accessToken,
+					refreshToken: result.refreshToken,
+					user: result.user,
+					organizationName: result.organizationName,
+				});
+			}
+			return result;
+		},
+		[updateAuth],
+	);
+
+	const signUp = useCallback(
+		async (
+			email: string,
+			password: string,
+			firstName: string,
+			lastName: string,
+		) => {
+			const result = await apiClient.auth.signUp({
+				email,
+				password,
+				firstName,
+				lastName,
+			});
+			if (
+				result.status === "complete" &&
+				result.accessToken &&
+				result.refreshToken &&
+				result.user
+			) {
+				await updateAuth({
+					accessToken: result.accessToken,
+					refreshToken: result.refreshToken,
+					user: result.user,
+					organizationName: result.organizationName,
+				});
+			}
+			return result;
+		},
+		[updateAuth],
+	);
+
+	const signOut = useCallback(async () => {
+		apiClient.auth.signOut({}).catch(() => {});
+		await clearAuth();
+	}, [clearAuth]);
+
+	const value = useMemo<AuthContextType>(
+		() => ({
+			...state,
+			signIn,
+			signUp,
+			signOut,
+			storeSession: updateAuth,
+		}),
+		[state, signIn, signUp, signOut, updateAuth],
+	);
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextType {
+	const ctx = useContext(AuthContext);
+	if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+	return ctx;
+}
diff --git a/ts/mobile-starter/native/features/auth/providers/types.ts b/ts/mobile-starter/native/features/auth/providers/types.ts
new file mode 100644
index 00000000..25def63a
--- /dev/null
+++ b/ts/mobile-starter/native/features/auth/providers/types.ts
@@ -0,0 +1,24 @@
+import type { auth } from "@/lib/api/client.gen";
+import type { RoleType } from "@/lib/permissions";
+
+export interface AuthState {
+	isAuthenticated: boolean;
+	isLoading: boolean;
+	user: auth.UserInfo | null;
+	accessToken: string | null;
+	role: RoleType;
+	organizationId: string;
+	organizationName: string;
+}
+
+export interface AuthContextType extends AuthState {
+	signIn: (email: string, password: string) => Promise<auth.SignInResponse>;
+	signUp: (
+		email: string,
+		password: string,
+		firstName: string,
+		lastName: string,
+	) => Promise<auth.SignUpResponse>;
+	signOut: () => Promise<void>;
+	storeSession: (result: auth.RefreshResponse) => Promise<void>;
+}
diff --git a/ts/mobile-starter/native/global.css b/ts/mobile-starter/native/global.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/ts/mobile-starter/native/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ts/mobile-starter/native/lib/api/client.gen.ts b/ts/mobile-starter/native/lib/api/client.gen.ts
new file mode 100644
index 00000000..39be322a
--- /dev/null
+++ b/ts/mobile-starter/native/lib/api/client.gen.ts
@@ -0,0 +1,142 @@
+/**
+ * Placeholder API client for React Native.
+ *
+ * This file will be regenerated by Encore after running:
+ *   task gen:api:native
+ *
+ * For now, this provides type stubs so the app compiles.
+ */
+
+export const Local = "http://localhost:4000";
+
+// biome-ignore lint/suspicious/noExplicitAny: placeholder types
+type Any = any;
+
+export namespace auth {
+	export type OAuthProvider = "GoogleOAuth" | "MicrosoftOAuth";
+
+	export interface UserInfo {
+		id: string;
+		email: string;
+		firstName: string | null;
+		lastName: string | null;
+		profilePictureUrl: string | null;
+	}
+
+	export interface SignInResponse {
+		status: "complete" | "mfa_required" | "verify_email";
+		accessToken?: string;
+		refreshToken?: string;
+		user?: UserInfo;
+		pendingAuthenticationToken?: string;
+		organizationName?: string;
+	}
+
+	export interface SignUpResponse {
+		status: "complete" | "verify_email";
+		accessToken?: string;
+		refreshToken?: string;
+		user?: UserInfo;
+		userId?: string;
+		pendingAuthenticationToken?: string;
+		organizationName?: string;
+	}
+
+	export interface RefreshResponse {
+		accessToken: string;
+		refreshToken: string;
+		user: UserInfo;
+		organizationName?: string;
+	}
+
+	export interface SessionResponse {
+		userID: string;
+		email: string;
+		role: "admin" | "member";
+		organizationId: string;
+	}
+
+	export interface InvitationItem {
+		id: string;
+		email: string;
+		status: string;
+		createdAt: string;
+		expiresAt: string;
+	}
+}
+
+interface AuthOptions {
+	auth?: () => Promise<{ authorization: string } | undefined>;
+}
+
+export default class Client {
+	private baseUrl: string;
+	private opts: AuthOptions;
+
+	constructor(baseUrl: string, opts: AuthOptions = {}) {
+		this.baseUrl = baseUrl.replace(/\/$/, "");
+		this.opts = opts;
+	}
+
+	private async fetch(path: string, init?: RequestInit): Promise<Any> {
+		const headers: Record<string, string> = {
+			"Content-Type": "application/json",
+			...(init?.headers as Record<string, string>),
+		};
+		const authResult = await this.opts.auth?.();
+		if (authResult) {
+			headers.Authorization = authResult.authorization;
+		}
+		const resp = await fetch(`${this.baseUrl}${path}`, {
+			...init,
+			headers,
+		});
+		if (!resp.ok) {
+			const body = await resp.json().catch(() => ({}));
+			throw new Error(body.message || `Request failed: ${resp.status}`);
+		}
+		const text = await resp.text();
+		return text ? JSON.parse(text) : {};
+	}
+
+	auth = {
+		signIn: (req: { email: string; password: string }): Promise<auth.SignInResponse> =>
+			this.fetch("/api/auth/sign-in", { method: "POST", body: JSON.stringify(req) }),
+
+		signUp: (req: { email: string; password: string; firstName: string; lastName: string }): Promise<auth.SignUpResponse> =>
+			this.fetch("/api/auth/sign-up", { method: "POST", body: JSON.stringify(req) }),
+
+		signOut: (req: { sessionId?: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/sign-out", { method: "POST", body: JSON.stringify(req) }),
+
+		refresh: (req: { refreshToken: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/refresh", { method: "POST", body: JSON.stringify(req) }),
+
+		getSession: (): Promise<auth.SessionResponse> =>
+			this.fetch("/api/auth/session"),
+
+		verifyEmail: (req: { code: string; pendingAuthenticationToken: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/verify-email", { method: "POST", body: JSON.stringify(req) }),
+
+		forgotPassword: (req: { email: string; passwordResetUrl: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/forgot-password", { method: "POST", body: JSON.stringify(req) }),
+
+		resetPassword: (req: { token: string; newPassword: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/reset-password", { method: "POST", body: JSON.stringify(req) }),
+
+		getOAuthUrl: (req: { provider: auth.OAuthProvider; redirectUri: string }): Promise<{ url: string }> =>
+			this.fetch(`/api/auth/oauth/url?provider=${req.provider}&redirectUri=${encodeURIComponent(req.redirectUri)}`),
+
+		oauthCallback: (req: { code: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/oauth/callback", { method: "POST", body: JSON.stringify(req) }),
+
+		sendInvitation: (req: { email: string; role: string }): Promise<{ invitationId: string; email: string; status: string }> =>
+			this.fetch("/api/auth/invitations", { method: "POST", body: JSON.stringify(req) }),
+
+		listInvitations: (): Promise<{ invitations: auth.InvitationItem[] }> =>
+			this.fetch("/api/auth/invitations"),
+
+		revokeInvitation: (req: { id: string }): Promise<void> =>
+			this.fetch(`/api/auth/invitations/${req.id}`, { method: "DELETE" }),
+	};
+}
diff --git a/ts/mobile-starter/native/lib/api/client.ts b/ts/mobile-starter/native/lib/api/client.ts
new file mode 100644
index 00000000..8ea7b597
--- /dev/null
+++ b/ts/mobile-starter/native/lib/api/client.ts
@@ -0,0 +1,12 @@
+import Client, { Local } from "./client.gen";
+import * as SecureStore from "expo-secure-store";
+
+const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL ?? Local;
+
+export const apiClient = new Client(API_BASE_URL, {
+	auth: async () => {
+		const token = await SecureStore.getItemAsync("accessToken");
+		if (token) return { authorization: `Bearer ${token}` };
+		return undefined;
+	},
+});
diff --git a/ts/mobile-starter/native/lib/permissions.ts b/ts/mobile-starter/native/lib/permissions.ts
new file mode 100644
index 00000000..57984b32
--- /dev/null
+++ b/ts/mobile-starter/native/lib/permissions.ts
@@ -0,0 +1,40 @@
+export const P = {
+	DASHBOARD_VIEW: "dashboard:view",
+	PROFILE_VIEW: "profile:view",
+	PROFILE_EDIT: "profile:edit",
+	MEMBERS_VIEW: "members:view",
+	MEMBERS_INVITE: "members:invite",
+	MEMBERS_REMOVE: "members:remove",
+} as const;
+
+export type Permission = (typeof P)[keyof typeof P];
+
+export type RoleType = "admin" | "member";
+
+export const ROLE_PERMISSIONS: Record<RoleType, Set<Permission>> = {
+	admin: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+		P.MEMBERS_INVITE,
+		P.MEMBERS_REMOVE,
+	]),
+	member: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+	]),
+};
+
+export function hasPermission(role: RoleType, permission: Permission): boolean {
+	return ROLE_PERMISSIONS[role]?.has(permission) ?? false;
+}
+
+const VALID_ROLES = new Set<string>(["admin", "member"]);
+
+export function mapRole(slug?: string): RoleType {
+	if (!slug) return "member";
+	return VALID_ROLES.has(slug) ? (slug as RoleType) : "member";
+}
diff --git a/ts/mobile-starter/native/lib/token-utils.ts b/ts/mobile-starter/native/lib/token-utils.ts
new file mode 100644
index 00000000..df3d36fa
--- /dev/null
+++ b/ts/mobile-starter/native/lib/token-utils.ts
@@ -0,0 +1,34 @@
+export function decodeJwtPayload(
+	token: string,
+): Record<string, unknown> | null {
+	try {
+		const parts = token.split(".");
+		if (parts.length !== 3) return null;
+		const payload = JSON.parse(atob(parts[1]));
+		return payload;
+	} catch {
+		return null;
+	}
+}
+
+export function isTokenExpiringSoon(
+	token: string,
+	bufferSeconds = 60,
+): boolean {
+	const payload = decodeJwtPayload(token);
+	if (!payload?.exp) return true;
+
+	const nowSeconds = Math.floor(Date.now() / 1000);
+	return (payload.exp as number) - nowSeconds <= bufferSeconds;
+}
+
+export function getTokenExpiryMs(token: string): number {
+	const payload = decodeJwtPayload(token);
+	if (!payload?.exp) return 0;
+	return (payload.exp as number) * 1000;
+}
+
+export function getRefreshDelay(accessToken: string): number {
+	const expiryMs = getTokenExpiryMs(accessToken);
+	return Math.max(0, expiryMs - Date.now() - 60_000);
+}
diff --git a/ts/mobile-starter/native/metro.config.cjs b/ts/mobile-starter/native/metro.config.cjs
new file mode 100644
index 00000000..14d5c9ce
--- /dev/null
+++ b/ts/mobile-starter/native/metro.config.cjs
@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });
diff --git a/ts/mobile-starter/native/package.json b/ts/mobile-starter/native/package.json
new file mode 100644
index 00000000..652bb959
--- /dev/null
+++ b/ts/mobile-starter/native/package.json
@@ -0,0 +1,36 @@
+{
+	"name": "native",
+	"version": "1.0.0",
+	"type": "module",
+	"main": "expo-router/entry",
+	"scripts": {
+		"start": "expo start",
+		"dev": "expo start --clear",
+		"android": "expo run:android",
+		"ios": "expo run:ios",
+		"prebuild": "expo prebuild",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@expo/vector-icons": "^15.0.0",
+		"expo": "^54.0.0",
+		"expo-linking": "~8.0.0",
+		"expo-router": "~6.0.0",
+		"expo-secure-store": "~15.0.0",
+		"expo-status-bar": "~3.0.0",
+		"expo-web-browser": "~15.0.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-native": "^0.81.0",
+		"react-native-safe-area-context": "^5.0.0",
+		"react-native-screens": "~4.0.0",
+		"nativewind": "^4.1.0",
+		"tailwindcss": "~4.1.0",
+		"zod": "^3.23.0"
+	},
+	"devDependencies": {
+		"@types/react": "~19.0.0",
+		"typescript": "^5.6.0"
+	},
+	"private": true
+}
diff --git a/ts/mobile-starter/native/tsconfig.json b/ts/mobile-starter/native/tsconfig.json
new file mode 100644
index 00000000..228af569
--- /dev/null
+++ b/ts/mobile-starter/native/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "expo/tsconfig.base",
+	"compilerOptions": {
+		"strict": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
diff --git a/ts/mobile-starter/package.json b/ts/mobile-starter/package.json
new file mode 100644
index 00000000..bd1f0774
--- /dev/null
+++ b/ts/mobile-starter/package.json
@@ -0,0 +1,18 @@
+{
+	"name": "mobile-starter",
+	"private": true,
+	"version": "0.0.1",
+	"license": "MPL-2.0",
+	"type": "module",
+	"workspaces": ["backend", "web", "native"],
+	"scripts": {
+		"check-types": "turbo check-types",
+		"lint": "biome check .",
+		"lint:fix": "biome check --write ."
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.0",
+		"turbo": "^2.3.0",
+		"typescript": "^5.6.0"
+	}
+}
diff --git a/ts/mobile-starter/tsconfig.json b/ts/mobile-starter/tsconfig.json
new file mode 100644
index 00000000..7c240e76
--- /dev/null
+++ b/ts/mobile-starter/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ES2022",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"composite": true,
+		"paths": {
+			"~encore/*": ["./encore.gen/*"]
+		}
+	}
+}
diff --git a/ts/mobile-starter/turbo.json b/ts/mobile-starter/turbo.json
new file mode 100644
index 00000000..c372ebb5
--- /dev/null
+++ b/ts/mobile-starter/turbo.json
@@ -0,0 +1,14 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"tasks": {
+		"dev": {
+			"cache": false,
+			"persistent": true
+		},
+		"build": {
+			"dependsOn": ["^build"],
+			"outputs": ["dist/**"]
+		},
+		"check-types": {}
+	}
+}
diff --git a/ts/mobile-starter/web/index.html b/ts/mobile-starter/web/index.html
new file mode 100644
index 00000000..5a705932
--- /dev/null
+++ b/ts/mobile-starter/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Mobile Starter</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/ts/mobile-starter/web/package.json b/ts/mobile-starter/web/package.json
new file mode 100644
index 00000000..f0c749cd
--- /dev/null
+++ b/ts/mobile-starter/web/package.json
@@ -0,0 +1,36 @@
+{
+	"name": "web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite --port=3001",
+		"build": "vite build",
+		"serve": "vite preview",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@hookform/resolvers": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"@tanstack/react-query": "^5.60.0",
+		"@tanstack/react-router": "^1.100.0",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.470.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-hook-form": "^7.54.0",
+		"tailwind-merge": "^3.0.0",
+		"zod": "^3.23.0"
+	},
+	"devDependencies": {
+		"@tanstack/router-plugin": "^1.100.0",
+		"@types/node": "^22.0.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^4.3.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.6.0",
+		"vite": "^6.0.0"
+	}
+}
diff --git a/ts/mobile-starter/web/src/components/ui/button.tsx b/ts/mobile-starter/web/src/components/ui/button.tsx
new file mode 100644
index 00000000..98e39ebe
--- /dev/null
+++ b/ts/mobile-starter/web/src/components/ui/button.tsx
@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				primary:
+					"rounded-lg bg-primary text-primary-foreground hover:bg-primary-hover",
+				outline:
+					"rounded-lg border border-border bg-transparent text-text hover:bg-surface-muted",
+				destructive:
+					"rounded-lg bg-error text-text-invert hover:bg-error/90",
+				ghost:
+					"rounded-lg bg-transparent text-text hover:bg-surface-muted",
+			},
+			size: {
+				default: "px-6 py-3 text-sm",
+				sm: "px-4 py-2 text-sm",
+				lg: "px-8 py-4 text-base",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "primary",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {}
+
+export function Button({
+	className,
+	variant,
+	size,
+	...props
+}: ButtonProps) {
+	return (
+		<button
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
diff --git a/ts/mobile-starter/web/src/components/ui/card.tsx b/ts/mobile-starter/web/src/components/ui/card.tsx
new file mode 100644
index 00000000..ca32c86b
--- /dev/null
+++ b/ts/mobile-starter/web/src/components/ui/card.tsx
@@ -0,0 +1,40 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			className={cn(
+				"rounded-xl border border-border bg-surface-elevated p-6 shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div className={cn("mb-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			className={cn("font-semibold text-lg text-text", className)}
+			{...props}
+		/>
+	);
+}
+
+export function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			className={cn("text-sm text-text-secondary", className)}
+			{...props}
+		/>
+	);
+}
+
+export function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return <div className={cn("", className)} {...props} />;
+}
diff --git a/ts/mobile-starter/web/src/components/ui/input.tsx b/ts/mobile-starter/web/src/components/ui/input.tsx
new file mode 100644
index 00000000..e49fb147
--- /dev/null
+++ b/ts/mobile-starter/web/src/components/ui/input.tsx
@@ -0,0 +1,17 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export function Input({ className, type = "text", ...props }: InputProps) {
+	return (
+		<input
+			type={type}
+			className={cn(
+				"flex w-full rounded-lg border border-border bg-surface-elevated px-4 py-2.5 text-text transition-colors placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
diff --git a/ts/mobile-starter/web/src/components/ui/label.tsx b/ts/mobile-starter/web/src/components/ui/label.tsx
new file mode 100644
index 00000000..11ba41e8
--- /dev/null
+++ b/ts/mobile-starter/web/src/components/ui/label.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+export function Label({ className, ...props }: LabelProps) {
+	return (
+		<label
+			className={cn(
+				"font-medium text-sm text-text leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/auth/auth-layout/auth-layout.tsx b/ts/mobile-starter/web/src/features/auth/auth-layout/auth-layout.tsx
new file mode 100644
index 00000000..9f92627c
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/auth-layout/auth-layout.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function AuthLayout({ children }: { children: ReactNode }) {
+	return (
+		<div className="flex min-h-screen items-center justify-center bg-surface px-4 py-12">
+			<div className="w-full max-w-md">{children}</div>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/auth/lib/auth-provider.tsx b/ts/mobile-starter/web/src/features/auth/lib/auth-provider.tsx
new file mode 100644
index 00000000..38f82637
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/lib/auth-provider.tsx
@@ -0,0 +1,174 @@
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { apiClient, setAccessToken } from "@/lib/api/client";
+import type { auth } from "@/lib/api/client.gen";
+
+export interface AuthContextValue {
+	user: auth.UserInfo | null;
+	isLoading: boolean;
+	isAuthenticated: boolean;
+	accessToken: string | null;
+	signIn: (email: string, password: string) => Promise<auth.SignInResponse>;
+	signUp: (
+		email: string,
+		password: string,
+		firstName: string,
+		lastName: string,
+	) => Promise<auth.SignUpResponse>;
+	signOut: () => void;
+	getAccessToken: () => string | null;
+	storeSession: (result: auth.RefreshResponse) => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function decodeJwtPayload(token: string): Record<string, unknown> {
+	const base64 = token.split(".")[1];
+	const json = atob(base64.replace(/-/g, "+").replace(/_/g, "/"));
+	return JSON.parse(json);
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+	const [user, setUser] = useState<auth.UserInfo | null>(null);
+	const [token, setToken] = useState<string | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+		undefined,
+	);
+
+	function updateAuth(
+		result: auth.RefreshResponse & { organizationName?: string },
+	) {
+		setUser(result.user);
+		setToken(result.accessToken);
+		setAccessToken(result.accessToken);
+		localStorage.setItem("refreshToken", result.refreshToken);
+		if (result.organizationName) {
+			localStorage.setItem("organizationName", result.organizationName);
+		}
+		scheduleRefresh(result.accessToken, result.refreshToken);
+	}
+
+	function clearAuth() {
+		setUser(null);
+		setToken(null);
+		setAccessToken(null);
+		localStorage.removeItem("refreshToken");
+		localStorage.removeItem("organizationName");
+		if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+	}
+
+	function scheduleRefresh(accessToken: string, refreshToken: string) {
+		if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+		try {
+			const payload = decodeJwtPayload(accessToken);
+			const exp = (payload.exp as number) * 1000;
+			const delay = Math.max(0, exp - Date.now() - 60_000);
+			refreshTimerRef.current = setTimeout(async () => {
+				try {
+					const result = await apiClient.auth.refresh({ refreshToken });
+					updateAuth(result);
+				} catch {
+					clearAuth();
+				}
+			}, delay);
+		} catch {
+			/* invalid token */
+		}
+	}
+
+	useEffect(() => {
+		const stored = localStorage.getItem("refreshToken");
+		if (!stored) {
+			setIsLoading(false);
+			return;
+		}
+		apiClient.auth
+			.refresh({ refreshToken: stored })
+			.then((result) => updateAuth(result))
+			.catch(() => localStorage.removeItem("refreshToken"))
+			.finally(() => setIsLoading(false));
+		return () => {
+			if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+		};
+	}, []);
+
+	function storeIfComplete(result: {
+		status: string;
+		accessToken?: string;
+		refreshToken?: string;
+		user?: auth.UserInfo;
+		organizationName?: string;
+	}) {
+		if (
+			result.status === "complete" &&
+			result.accessToken &&
+			result.refreshToken &&
+			result.user
+		) {
+			updateAuth({
+				accessToken: result.accessToken,
+				refreshToken: result.refreshToken,
+				user: result.user,
+				organizationName: result.organizationName,
+			});
+		}
+	}
+
+	const handleSignIn = async (email: string, password: string) => {
+		const result = await apiClient.auth.signIn({ email, password });
+		storeIfComplete(result);
+		return result;
+	};
+
+	const handleSignUp = async (
+		email: string,
+		password: string,
+		firstName: string,
+		lastName: string,
+	) => {
+		const result = await apiClient.auth.signUp({
+			email,
+			password,
+			firstName,
+			lastName,
+		});
+		storeIfComplete(result);
+		return result;
+	};
+
+	const handleSignOut = () => {
+		apiClient.auth.signOut({}).catch(() => {});
+		clearAuth();
+		window.location.href = "/";
+	};
+
+	const value = useMemo<AuthContextValue>(
+		() => ({
+			user,
+			isLoading,
+			isAuthenticated: !!user,
+			accessToken: token,
+			signIn: handleSignIn,
+			signUp: handleSignUp,
+			signOut: handleSignOut,
+			getAccessToken: () => token,
+			storeSession: updateAuth,
+		}),
+		[user, isLoading, token],
+	);
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+	const ctx = useContext(AuthContext);
+	if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+	return ctx;
+}
diff --git a/ts/mobile-starter/web/src/features/auth/lib/auth-session.ts b/ts/mobile-starter/web/src/features/auth/lib/auth-session.ts
new file mode 100644
index 00000000..b8bfd07e
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/lib/auth-session.ts
@@ -0,0 +1,60 @@
+import { mapRole, type RoleType } from "@/lib/permissions";
+import { useAuth } from "./auth-provider";
+
+export interface Session {
+	userId: string;
+	email: string;
+	name: string;
+	role: RoleType;
+	organizationId: string;
+	organizationName: string;
+	accessToken: string;
+}
+
+function decodeJwtPayload(token: string): Record<string, unknown> {
+	const base64 = token.split(".")[1];
+	const json = atob(base64.replace(/-/g, "+").replace(/_/g, "/"));
+	return JSON.parse(json);
+}
+
+export function useAppSession(): {
+	session: Session | null;
+	isLoaded: boolean;
+} {
+	const { user, isLoading, accessToken } = useAuth();
+	const isLoaded = !isLoading;
+
+	if (!isLoaded || !user) {
+		return { session: null, isLoaded };
+	}
+
+	let role = "";
+	let organizationId = "";
+	if (accessToken) {
+		try {
+			const payload = decodeJwtPayload(accessToken);
+			role = (payload.role as string) ?? "";
+			organizationId = (payload.org_id as string) ?? "";
+		} catch {
+			/* invalid token */
+		}
+	}
+
+	const mappedRole = mapRole(role || undefined);
+	const name =
+		`${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email;
+
+	return {
+		session: {
+			userId: user.id,
+			email: user.email,
+			name,
+			role: mappedRole,
+			organizationId,
+			organizationName:
+				localStorage.getItem("organizationName") || organizationId,
+			accessToken: accessToken ?? "",
+		},
+		isLoaded,
+	};
+}
diff --git a/ts/mobile-starter/web/src/features/auth/lib/route-guard.ts b/ts/mobile-starter/web/src/features/auth/lib/route-guard.ts
new file mode 100644
index 00000000..115ae93b
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/lib/route-guard.ts
@@ -0,0 +1,47 @@
+import { redirect } from "@tanstack/react-router";
+import {
+	hasPermission,
+	mapRole,
+	type Permission,
+	type RoleType,
+} from "@/lib/permissions";
+
+function decodeJwtPayload(token: string): Record<string, unknown> {
+	const base64 = token.split(".")[1];
+	const json = atob(base64.replace(/-/g, "+").replace(/_/g, "/"));
+	return JSON.parse(json);
+}
+
+function getRoleFromContext(context: {
+	auth: { user: unknown; accessToken?: string | null };
+}): RoleType | null {
+	if (!context.auth.user) return null;
+	if (!context.auth.accessToken) return null;
+	try {
+		const payload = decodeJwtPayload(context.auth.accessToken);
+		return mapRole((payload.role as string) || undefined);
+	} catch {
+		return null;
+	}
+}
+
+export function requireRoutePermission(
+	context: {
+		auth: {
+			user: unknown;
+			isLoading: boolean;
+			accessToken?: string | null;
+		};
+	},
+	permission: Permission,
+): void {
+	if (!context.auth.isLoading && !context.auth.user) {
+		throw redirect({ to: "/login" });
+	}
+	const role = getRoleFromContext(
+		context as { auth: { user: unknown; accessToken?: string | null } },
+	);
+	if (!role || !hasPermission(role, permission)) {
+		throw redirect({ to: "/login" });
+	}
+}
diff --git a/ts/mobile-starter/web/src/features/auth/lib/use-permissions.ts b/ts/mobile-starter/web/src/features/auth/lib/use-permissions.ts
new file mode 100644
index 00000000..a26c0734
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/lib/use-permissions.ts
@@ -0,0 +1,10 @@
+import { hasPermission, type Permission } from "@/lib/permissions";
+import { useAppSession } from "./auth-session";
+
+export function usePermissions() {
+	const { session } = useAppSession();
+	return {
+		can: (permission: Permission) =>
+			session ? hasPermission(session.role, permission) : false,
+	};
+}
diff --git a/ts/mobile-starter/web/src/features/auth/login-form/login-form.hooks.ts b/ts/mobile-starter/web/src/features/auth/login-form/login-form.hooks.ts
new file mode 100644
index 00000000..cfbd0b6b
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/login-form/login-form.hooks.ts
@@ -0,0 +1,63 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useAuth } from "@/features/auth/lib/auth-provider";
+import { loginFormSchema } from "./login-form.schema";
+import type { LoginFormData, LoginFormProps } from "./login-form.types";
+
+export function useLoginForm(props?: LoginFormProps) {
+	const { onSuccess } = props ?? {};
+	const { signIn } = useAuth();
+
+	const [showPassword, setShowPassword] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [generalError, setGeneralError] = useState("");
+
+	const form = useForm<LoginFormData>({
+		resolver: zodResolver(loginFormSchema),
+		defaultValues: { email: "", password: "" },
+	});
+
+	const togglePassword = useCallback(() => {
+		setShowPassword((prev) => !prev);
+	}, []);
+
+	const handleSubmit = useCallback(
+		async (data: LoginFormData) => {
+			setIsLoading(true);
+			setGeneralError("");
+
+			try {
+				const result = await signIn(data.email, data.password);
+
+				if (result.status === "complete") {
+					onSuccess?.();
+				} else if (result.status === "verify_email") {
+					setGeneralError(
+						"Please verify your email address before signing in.",
+					);
+				} else if (result.status === "mfa_required") {
+					setGeneralError("Multi-factor authentication is not yet supported.");
+				}
+			} catch (err) {
+				setGeneralError(
+					err instanceof Error
+						? err.message
+						: "Invalid email or password. Please try again.",
+				);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[signIn, onSuccess],
+	);
+
+	return {
+		form,
+		showPassword,
+		togglePassword,
+		isLoading,
+		generalError,
+		handleSubmit: form.handleSubmit(handleSubmit),
+	};
+}
diff --git a/ts/mobile-starter/web/src/features/auth/login-form/login-form.schema.ts b/ts/mobile-starter/web/src/features/auth/login-form/login-form.schema.ts
new file mode 100644
index 00000000..9bf4bd57
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/login-form/login-form.schema.ts
@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const loginFormSchema = z.object({
+	email: z
+		.string()
+		.min(1, "Email address is required")
+		.email("Please enter a valid email address"),
+	password: z
+		.string()
+		.min(1, "Password is required")
+		.min(8, "Password must be at least 8 characters"),
+});
diff --git a/ts/mobile-starter/web/src/features/auth/login-form/login-form.tsx b/ts/mobile-starter/web/src/features/auth/login-form/login-form.tsx
new file mode 100644
index 00000000..ebdc57f9
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/login-form/login-form.tsx
@@ -0,0 +1,112 @@
+import { Link } from "@tanstack/react-router";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { OAuthButtons } from "../oauth-buttons/oauth-buttons";
+import { useLoginForm } from "./login-form.hooks";
+import type { LoginFormProps } from "./login-form.types";
+
+export function LoginForm(props: LoginFormProps) {
+	const {
+		form,
+		showPassword,
+		togglePassword,
+		isLoading,
+		generalError,
+		handleSubmit,
+	} = useLoginForm(props);
+
+	const {
+		register,
+		formState: { errors },
+	} = form;
+
+	return (
+		<div>
+			<div className="mb-6 text-center">
+				<h1 className="text-2xl font-bold text-text">Welcome back</h1>
+				<p className="mt-1 text-sm text-text-secondary">
+					Sign in to your account
+				</p>
+			</div>
+
+			<Card>
+				<OAuthButtons label="sign_in" />
+
+				{generalError && (
+					<div
+						role="alert"
+						className="mb-4 rounded-lg border border-error/30 bg-error-muted p-3 text-sm text-error"
+					>
+						{generalError}
+					</div>
+				)}
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div>
+						<Label htmlFor="email">Email</Label>
+						<Input
+							id="email"
+							type="email"
+							placeholder="you@example.com"
+							{...register("email")}
+							className="mt-1"
+						/>
+						{errors.email && (
+							<p className="mt-1 text-sm text-error">{errors.email.message}</p>
+						)}
+					</div>
+
+					<div>
+						<div className="flex items-center justify-between">
+							<Label htmlFor="password">Password</Label>
+							<Link
+								to="/forgot-password"
+								className="text-sm text-primary hover:underline"
+							>
+								Forgot password?
+							</Link>
+						</div>
+						<div className="relative mt-1">
+							<Input
+								id="password"
+								type={showPassword ? "text" : "password"}
+								placeholder="Enter your password"
+								{...register("password")}
+							/>
+							<button
+								type="button"
+								onClick={togglePassword}
+								className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted"
+							>
+								{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+							</button>
+						</div>
+						{errors.password && (
+							<p className="mt-1 text-sm text-error">
+								{errors.password.message}
+							</p>
+						)}
+					</div>
+
+					<Button
+						type="submit"
+						disabled={isLoading}
+						className="w-full"
+					>
+						{isLoading ? "Signing in..." : "Sign In"}
+					</Button>
+				</form>
+			</Card>
+
+			<p className="mt-4 text-center text-sm text-text-secondary">
+				Don't have an account?{" "}
+				<Link to="/signup" className="text-primary hover:underline">
+					Sign up
+				</Link>
+			</p>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/auth/login-form/login-form.types.ts b/ts/mobile-starter/web/src/features/auth/login-form/login-form.types.ts
new file mode 100644
index 00000000..c2e8a212
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/login-form/login-form.types.ts
@@ -0,0 +1,8 @@
+import type { z } from "zod";
+import type { loginFormSchema } from "./login-form.schema";
+
+export type LoginFormData = z.infer<typeof loginFormSchema>;
+
+export interface LoginFormProps {
+	onSuccess?: () => void;
+}
diff --git a/ts/mobile-starter/web/src/features/auth/oauth-buttons/oauth-buttons.tsx b/ts/mobile-starter/web/src/features/auth/oauth-buttons/oauth-buttons.tsx
new file mode 100644
index 00000000..10740bfd
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/oauth-buttons/oauth-buttons.tsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { apiClient } from "@/lib/api/client";
+import type { auth } from "@/lib/api/client.gen";
+
+function GoogleIcon() {
+	return (
+		<svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
+			<path
+				d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+				fill="#4285F4"
+			/>
+			<path
+				d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+				fill="#34A853"
+			/>
+			<path
+				d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+				fill="#FBBC05"
+			/>
+			<path
+				d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+				fill="#EA4335"
+			/>
+		</svg>
+	);
+}
+
+function MicrosoftIcon() {
+	return (
+		<svg viewBox="0 0 21 21" className="h-5 w-5" aria-hidden="true">
+			<rect x="1" y="1" width="9" height="9" fill="#F25022" />
+			<rect x="1" y="11" width="9" height="9" fill="#00A4EF" />
+			<rect x="11" y="1" width="9" height="9" fill="#7FBA00" />
+			<rect x="11" y="11" width="9" height="9" fill="#FFB900" />
+		</svg>
+	);
+}
+
+interface OAuthButtonsProps {
+	label?: "sign_in" | "sign_up";
+}
+
+export function OAuthButtons({ label = "sign_in" }: OAuthButtonsProps) {
+	const [loadingProvider, setLoadingProvider] =
+		useState<auth.OAuthProvider | null>(null);
+
+	const handleOAuth = async (provider: auth.OAuthProvider) => {
+		setLoadingProvider(provider);
+		try {
+			const redirectUri = `${window.location.origin}/auth/oauth/callback`;
+			const result = await apiClient.auth.getOAuthUrl({
+				provider,
+				redirectUri,
+			});
+			window.location.href = result.url;
+		} catch {
+			setLoadingProvider(null);
+		}
+	};
+
+	const verb = label === "sign_up" ? "Sign up" : "Continue";
+
+	return (
+		<div className="space-y-3 mb-6">
+			<button
+				type="button"
+				disabled={loadingProvider !== null}
+				onClick={() => handleOAuth("GoogleOAuth")}
+				className="flex w-full items-center justify-center gap-3 rounded-lg border border-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text transition-colors hover:bg-surface-muted disabled:cursor-not-allowed disabled:opacity-60"
+			>
+				<GoogleIcon />
+				{loadingProvider === "GoogleOAuth"
+					? "Redirecting..."
+					: `${verb} with Google`}
+			</button>
+
+			<button
+				type="button"
+				disabled={loadingProvider !== null}
+				onClick={() => handleOAuth("MicrosoftOAuth")}
+				className="flex w-full items-center justify-center gap-3 rounded-lg border border-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text transition-colors hover:bg-surface-muted disabled:cursor-not-allowed disabled:opacity-60"
+			>
+				<MicrosoftIcon />
+				{loadingProvider === "MicrosoftOAuth"
+					? "Redirecting..."
+					: `${verb} with Microsoft`}
+			</button>
+
+			<div className="relative my-6">
+				<div className="absolute inset-0 flex items-center">
+					<div className="w-full border-t border-border" />
+				</div>
+				<div className="relative flex justify-center text-sm">
+					<span className="bg-surface-elevated px-4 text-text-secondary">
+						or continue with email
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.hooks.ts b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.hooks.ts
new file mode 100644
index 00000000..13a1282e
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.hooks.ts
@@ -0,0 +1,139 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useAuth } from "@/features/auth/lib/auth-provider";
+import { apiClient } from "@/lib/api/client";
+import { signUpFormSchema } from "./signup-form.schema";
+import type {
+	SignUpFormData,
+	SignUpFormProps,
+	SignUpStep,
+} from "./signup-form.types";
+
+export function useSignUpForm(props?: SignUpFormProps) {
+	const { onSuccess } = props ?? {};
+	const { signUp, storeSession } = useAuth();
+
+	const [step, setStep] = useState<SignUpStep>("form");
+	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [generalError, setGeneralError] = useState("");
+	const [verifyCode, setVerifyCode] = useState("");
+	const [emailAddress, setEmailAddress] = useState("");
+	const [pendingToken, setPendingToken] = useState("");
+
+	const form = useForm<SignUpFormData>({
+		resolver: zodResolver(signUpFormSchema),
+		defaultValues: {
+			firstName: "",
+			lastName: "",
+			email: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const togglePassword = useCallback(() => {
+		setShowPassword((prev) => !prev);
+	}, []);
+
+	const toggleConfirmPassword = useCallback(() => {
+		setShowConfirmPassword((prev) => !prev);
+	}, []);
+
+	const handleSubmit = useCallback(
+		async (data: SignUpFormData) => {
+			setIsLoading(true);
+			setGeneralError("");
+
+			try {
+				const result = await signUp(
+					data.email,
+					data.password,
+					data.firstName,
+					data.lastName,
+				);
+
+				if (result.status === "verify_email") {
+					setEmailAddress(data.email);
+					setPendingToken(result.pendingAuthenticationToken ?? "");
+					setStep("verify");
+				} else if (result.status === "complete") {
+					onSuccess?.();
+				}
+			} catch (err) {
+				setGeneralError(
+					err instanceof Error
+						? err.message
+						: "Something went wrong. Please try again.",
+				);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[signUp, onSuccess],
+	);
+
+	const handleVerify = useCallback(async () => {
+		setIsLoading(true);
+		setGeneralError("");
+
+		try {
+			const result = await apiClient.auth.verifyEmail({
+				code: verifyCode,
+				pendingAuthenticationToken: pendingToken,
+			});
+
+			storeSession(result);
+			onSuccess?.();
+		} catch (err) {
+			setGeneralError(
+				err instanceof Error
+					? err.message
+					: "Invalid verification code. Please try again.",
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [verifyCode, pendingToken, storeSession, onSuccess]);
+
+	const handleResendCode = useCallback(async () => {
+		const data = form.getValues();
+		setIsLoading(true);
+		setGeneralError("");
+
+		try {
+			const result = await signUp(
+				data.email,
+				data.password,
+				data.firstName,
+				data.lastName,
+			);
+			if (result.pendingAuthenticationToken) {
+				setPendingToken(result.pendingAuthenticationToken);
+			}
+		} catch {
+			setGeneralError("Failed to resend code. Please try again.");
+		} finally {
+			setIsLoading(false);
+		}
+	}, [form, signUp]);
+
+	return {
+		form,
+		step,
+		showPassword,
+		togglePassword,
+		showConfirmPassword,
+		toggleConfirmPassword,
+		isLoading,
+		generalError,
+		emailAddress,
+		verifyCode,
+		setVerifyCode,
+		handleSubmit: form.handleSubmit(handleSubmit),
+		handleVerify,
+		handleResendCode,
+	};
+}
diff --git a/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.schema.ts b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.schema.ts
new file mode 100644
index 00000000..b7cf6bbc
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.schema.ts
@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+export const signUpFormSchema = z
+	.object({
+		firstName: z.string().min(1, "First name is required"),
+		lastName: z.string().min(1, "Last name is required"),
+		email: z
+			.string()
+			.min(1, "Email address is required")
+			.email("Please enter a valid email address"),
+		password: z
+			.string()
+			.min(1, "Password is required")
+			.min(8, "Password must be at least 8 characters"),
+		confirmPassword: z.string().min(1, "Please confirm your password"),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Passwords do not match",
+		path: ["confirmPassword"],
+	});
diff --git a/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.tsx b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.tsx
new file mode 100644
index 00000000..cf93dd57
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.tsx
@@ -0,0 +1,226 @@
+import { Link } from "@tanstack/react-router";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { OAuthButtons } from "../oauth-buttons/oauth-buttons";
+import { useSignUpForm } from "./signup-form.hooks";
+import type { SignUpFormProps } from "./signup-form.types";
+
+export function SignUpForm(props: SignUpFormProps) {
+	const {
+		form,
+		step,
+		showPassword,
+		togglePassword,
+		showConfirmPassword,
+		toggleConfirmPassword,
+		isLoading,
+		generalError,
+		emailAddress,
+		verifyCode,
+		setVerifyCode,
+		handleSubmit,
+		handleVerify,
+		handleResendCode,
+	} = useSignUpForm(props);
+
+	const {
+		register,
+		formState: { errors },
+	} = form;
+
+	if (step === "verify") {
+		return (
+			<div>
+				<div className="mb-6 text-center">
+					<h1 className="text-2xl font-bold text-text">Verify your email</h1>
+					<p className="mt-1 text-sm text-text-secondary">
+						We sent a verification code to {emailAddress}
+					</p>
+				</div>
+
+				<Card>
+					{generalError && (
+						<div
+							role="alert"
+							className="mb-4 rounded-lg border border-error/30 bg-error-muted p-3 text-sm text-error"
+						>
+							{generalError}
+						</div>
+					)}
+
+					<div className="space-y-4">
+						<div>
+							<Label htmlFor="code">Verification code</Label>
+							<Input
+								id="code"
+								placeholder="Enter 6-digit code"
+								value={verifyCode}
+								onChange={(e) => setVerifyCode(e.target.value)}
+								className="mt-1"
+							/>
+						</div>
+
+						<Button
+							type="button"
+							onClick={handleVerify}
+							disabled={isLoading || !verifyCode}
+							className="w-full"
+						>
+							{isLoading ? "Verifying..." : "Verify Email"}
+						</Button>
+
+						<button
+							type="button"
+							onClick={handleResendCode}
+							disabled={isLoading}
+							className="w-full text-sm text-primary hover:underline"
+						>
+							Resend code
+						</button>
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div>
+			<div className="mb-6 text-center">
+				<h1 className="text-2xl font-bold text-text">Create your account</h1>
+				<p className="mt-1 text-sm text-text-secondary">
+					Get started with your new account
+				</p>
+			</div>
+
+			<Card>
+				<OAuthButtons label="sign_up" />
+
+				{generalError && (
+					<div
+						role="alert"
+						className="mb-4 rounded-lg border border-error/30 bg-error-muted p-3 text-sm text-error"
+					>
+						{generalError}
+					</div>
+				)}
+
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div className="grid grid-cols-2 gap-4">
+						<div>
+							<Label htmlFor="firstName">First name</Label>
+							<Input
+								id="firstName"
+								placeholder="John"
+								{...register("firstName")}
+								className="mt-1"
+							/>
+							{errors.firstName && (
+								<p className="mt-1 text-sm text-error">
+									{errors.firstName.message}
+								</p>
+							)}
+						</div>
+						<div>
+							<Label htmlFor="lastName">Last name</Label>
+							<Input
+								id="lastName"
+								placeholder="Doe"
+								{...register("lastName")}
+								className="mt-1"
+							/>
+							{errors.lastName && (
+								<p className="mt-1 text-sm text-error">
+									{errors.lastName.message}
+								</p>
+							)}
+						</div>
+					</div>
+
+					<div>
+						<Label htmlFor="email">Email</Label>
+						<Input
+							id="email"
+							type="email"
+							placeholder="you@example.com"
+							{...register("email")}
+							className="mt-1"
+						/>
+						{errors.email && (
+							<p className="mt-1 text-sm text-error">{errors.email.message}</p>
+						)}
+					</div>
+
+					<div>
+						<Label htmlFor="password">Password</Label>
+						<div className="relative mt-1">
+							<Input
+								id="password"
+								type={showPassword ? "text" : "password"}
+								placeholder="At least 8 characters"
+								{...register("password")}
+							/>
+							<button
+								type="button"
+								onClick={togglePassword}
+								className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted"
+							>
+								{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+							</button>
+						</div>
+						{errors.password && (
+							<p className="mt-1 text-sm text-error">
+								{errors.password.message}
+							</p>
+						)}
+					</div>
+
+					<div>
+						<Label htmlFor="confirmPassword">Confirm password</Label>
+						<div className="relative mt-1">
+							<Input
+								id="confirmPassword"
+								type={showConfirmPassword ? "text" : "password"}
+								placeholder="Re-enter your password"
+								{...register("confirmPassword")}
+							/>
+							<button
+								type="button"
+								onClick={toggleConfirmPassword}
+								className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted"
+							>
+								{showConfirmPassword ? (
+									<EyeOff size={18} />
+								) : (
+									<Eye size={18} />
+								)}
+							</button>
+						</div>
+						{errors.confirmPassword && (
+							<p className="mt-1 text-sm text-error">
+								{errors.confirmPassword.message}
+							</p>
+						)}
+					</div>
+
+					<Button
+						type="submit"
+						disabled={isLoading}
+						className="w-full"
+					>
+						{isLoading ? "Creating account..." : "Create Account"}
+					</Button>
+				</form>
+			</Card>
+
+			<p className="mt-4 text-center text-sm text-text-secondary">
+				Already have an account?{" "}
+				<Link to="/login" className="text-primary hover:underline">
+					Sign in
+				</Link>
+			</p>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.types.ts b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.types.ts
new file mode 100644
index 00000000..22f54495
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/auth/signup-form/signup-form.types.ts
@@ -0,0 +1,10 @@
+import type { z } from "zod";
+import type { signUpFormSchema } from "./signup-form.schema";
+
+export type SignUpFormData = z.infer<typeof signUpFormSchema>;
+
+export type SignUpStep = "form" | "verify";
+
+export interface SignUpFormProps {
+	onSuccess?: () => void;
+}
diff --git a/ts/mobile-starter/web/src/features/invitations/invitation-list/invitation-list.tsx b/ts/mobile-starter/web/src/features/invitations/invitation-list/invitation-list.tsx
new file mode 100644
index 00000000..b4363c6b
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/invitations/invitation-list/invitation-list.tsx
@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api/client";
+import { usePermissions } from "@/features/auth/lib/use-permissions";
+import { P } from "@/lib/permissions";
+import { Button } from "@/components/ui/button";
+
+export function InvitationList() {
+	const { can } = usePermissions();
+
+	const { data, isLoading, refetch } = useQuery({
+		queryKey: ["invitations"],
+		queryFn: () => apiClient.auth.listInvitations(),
+	});
+
+	const handleRevoke = async (id: string) => {
+		try {
+			await apiClient.auth.revokeInvitation({ id });
+			refetch();
+		} catch {
+			// Error handled silently
+		}
+	};
+
+	if (isLoading) {
+		return <p className="text-sm text-text-secondary">Loading invitations...</p>;
+	}
+
+	const invitations = data?.invitations ?? [];
+
+	if (invitations.length === 0) {
+		return (
+			<p className="text-sm text-text-secondary">No pending invitations.</p>
+		);
+	}
+
+	return (
+		<div className="space-y-2">
+			<h3 className="font-semibold text-text">Pending Invitations</h3>
+			<div className="divide-y divide-border rounded-lg border border-border">
+				{invitations.map((inv) => (
+					<div
+						key={inv.id}
+						className="flex items-center justify-between px-4 py-3"
+					>
+						<div>
+							<p className="text-sm font-medium text-text">{inv.email}</p>
+							<p className="text-xs text-text-secondary">
+								Status: {inv.status}
+							</p>
+						</div>
+						{can(P.MEMBERS_REMOVE) && (
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={() => handleRevoke(inv.id)}
+								className="text-error hover:text-error hover:bg-error-muted"
+							>
+								Revoke
+							</Button>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.hooks.ts b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.hooks.ts
new file mode 100644
index 00000000..eda0b984
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.hooks.ts
@@ -0,0 +1,51 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import { apiClient } from "@/lib/api/client";
+import { inviteFormSchema, type InviteFormData } from "./invite-form.schema";
+
+export function useInviteForm(onSuccess?: () => void) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [success, setSuccess] = useState("");
+
+	const form = useForm<InviteFormData>({
+		resolver: zodResolver(inviteFormSchema),
+		defaultValues: { email: "", role: "member" },
+	});
+
+	const handleSubmit = useCallback(
+		async (data: InviteFormData) => {
+			setIsLoading(true);
+			setError("");
+			setSuccess("");
+
+			try {
+				await apiClient.auth.sendInvitation({
+					email: data.email,
+					role: data.role,
+				});
+				setSuccess(`Invitation sent to ${data.email}`);
+				form.reset();
+				onSuccess?.();
+			} catch (err) {
+				setError(
+					err instanceof Error
+						? err.message
+						: "Failed to send invitation.",
+				);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[form, onSuccess],
+	);
+
+	return {
+		form,
+		isLoading,
+		error,
+		success,
+		handleSubmit: form.handleSubmit(handleSubmit),
+	};
+}
diff --git a/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.schema.ts b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.schema.ts
new file mode 100644
index 00000000..a8c19cae
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.schema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const inviteFormSchema = z.object({
+	email: z
+		.string()
+		.min(1, "Email address is required")
+		.email("Please enter a valid email address"),
+	role: z.enum(["admin", "member"]),
+});
+
+export type InviteFormData = z.infer<typeof inviteFormSchema>;
diff --git a/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.tsx b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.tsx
new file mode 100644
index 00000000..e8f9016b
--- /dev/null
+++ b/ts/mobile-starter/web/src/features/invitations/invite-form/invite-form.tsx
@@ -0,0 +1,70 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useInviteForm } from "./invite-form.hooks";
+
+interface InviteFormProps {
+	onSuccess?: () => void;
+}
+
+export function InviteForm({ onSuccess }: InviteFormProps) {
+	const { form, isLoading, error, success, handleSubmit } =
+		useInviteForm(onSuccess);
+
+	const {
+		register,
+		formState: { errors },
+	} = form;
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<h3 className="font-semibold text-text">Invite a member</h3>
+
+			{error && (
+				<div className="rounded-lg border border-error/30 bg-error-muted p-3 text-sm text-error">
+					{error}
+				</div>
+			)}
+
+			{success && (
+				<div className="rounded-lg border border-success/30 bg-success-muted p-3 text-sm text-success">
+					{success}
+				</div>
+			)}
+
+			<div className="flex gap-3">
+				<div className="flex-1">
+					<Label htmlFor="invite-email">Email</Label>
+					<Input
+						id="invite-email"
+						type="email"
+						placeholder="colleague@example.com"
+						{...register("email")}
+						className="mt-1"
+					/>
+					{errors.email && (
+						<p className="mt-1 text-sm text-error">{errors.email.message}</p>
+					)}
+				</div>
+
+				<div className="w-32">
+					<Label htmlFor="invite-role">Role</Label>
+					<select
+						id="invite-role"
+						{...register("role")}
+						className="mt-1 flex w-full rounded-lg border border-border bg-surface-elevated px-3 py-2.5 text-sm text-text focus:outline-none focus:ring-2 focus:ring-ring"
+					>
+						<option value="member">Member</option>
+						<option value="admin">Admin</option>
+					</select>
+				</div>
+
+				<div className="flex items-end">
+					<Button type="submit" disabled={isLoading}>
+						{isLoading ? "Sending..." : "Invite"}
+					</Button>
+				</div>
+			</div>
+		</form>
+	);
+}
diff --git a/ts/mobile-starter/web/src/index.css b/ts/mobile-starter/web/src/index.css
new file mode 100644
index 00000000..a95c0d9e
--- /dev/null
+++ b/ts/mobile-starter/web/src/index.css
@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+@theme {
+	--color-primary: #2563eb;
+	--color-primary-hover: #1d4ed8;
+	--color-primary-foreground: #ffffff;
+
+	--color-surface: #f9fafb;
+	--color-surface-elevated: #ffffff;
+	--color-surface-muted: #f3f4f6;
+
+	--color-text: #111827;
+	--color-text-secondary: #6b7280;
+	--color-text-muted: #9ca3af;
+	--color-text-invert: #ffffff;
+
+	--color-border: #e5e7eb;
+	--color-border-muted: #f3f4f6;
+
+	--color-ring: #2563eb;
+
+	--color-success: #10b981;
+	--color-success-muted: #d1fae5;
+	--color-error: #ef4444;
+	--color-error-muted: #fee2e2;
+	--color-warning: #f59e0b;
+	--color-warning-muted: #fef3c7;
+
+	--font-sans: "Inter", system-ui, sans-serif;
+}
+
+body {
+	font-family: var(--font-sans);
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
diff --git a/ts/mobile-starter/web/src/lib/api/client.gen.ts b/ts/mobile-starter/web/src/lib/api/client.gen.ts
new file mode 100644
index 00000000..84527ed1
--- /dev/null
+++ b/ts/mobile-starter/web/src/lib/api/client.gen.ts
@@ -0,0 +1,142 @@
+/**
+ * Placeholder API client.
+ *
+ * This file will be regenerated by Encore after running:
+ *   task gen:api:web
+ *
+ * For now, this provides type stubs so the app compiles.
+ */
+
+export const Local = "http://localhost:4000";
+
+// biome-ignore lint/suspicious/noExplicitAny: placeholder types
+type Any = any;
+
+export namespace auth {
+	export type OAuthProvider = "GoogleOAuth" | "MicrosoftOAuth";
+
+	export interface UserInfo {
+		id: string;
+		email: string;
+		firstName: string | null;
+		lastName: string | null;
+		profilePictureUrl: string | null;
+	}
+
+	export interface SignInResponse {
+		status: "complete" | "mfa_required" | "verify_email";
+		accessToken?: string;
+		refreshToken?: string;
+		user?: UserInfo;
+		pendingAuthenticationToken?: string;
+		organizationName?: string;
+	}
+
+	export interface SignUpResponse {
+		status: "complete" | "verify_email";
+		accessToken?: string;
+		refreshToken?: string;
+		user?: UserInfo;
+		userId?: string;
+		pendingAuthenticationToken?: string;
+		organizationName?: string;
+	}
+
+	export interface RefreshResponse {
+		accessToken: string;
+		refreshToken: string;
+		user: UserInfo;
+		organizationName?: string;
+	}
+
+	export interface SessionResponse {
+		userID: string;
+		email: string;
+		role: "admin" | "member";
+		organizationId: string;
+	}
+
+	export interface InvitationItem {
+		id: string;
+		email: string;
+		status: string;
+		createdAt: string;
+		expiresAt: string;
+	}
+}
+
+interface AuthOptions {
+	auth?: () => { authorization: string } | undefined;
+}
+
+export default class Client {
+	private baseUrl: string;
+	private opts: AuthOptions;
+
+	constructor(baseUrl: string, opts: AuthOptions = {}) {
+		this.baseUrl = baseUrl.replace(/\/$/, "");
+		this.opts = opts;
+	}
+
+	private async fetch(path: string, init?: RequestInit): Promise<Any> {
+		const headers: Record<string, string> = {
+			"Content-Type": "application/json",
+			...(init?.headers as Record<string, string>),
+		};
+		const authResult = this.opts.auth?.();
+		if (authResult) {
+			headers.Authorization = authResult.authorization;
+		}
+		const resp = await fetch(`${this.baseUrl}${path}`, {
+			...init,
+			headers,
+		});
+		if (!resp.ok) {
+			const body = await resp.json().catch(() => ({}));
+			throw new Error(body.message || `Request failed: ${resp.status}`);
+		}
+		const text = await resp.text();
+		return text ? JSON.parse(text) : {};
+	}
+
+	auth = {
+		signIn: (req: { email: string; password: string }): Promise<auth.SignInResponse> =>
+			this.fetch("/api/auth/sign-in", { method: "POST", body: JSON.stringify(req) }),
+
+		signUp: (req: { email: string; password: string; firstName: string; lastName: string }): Promise<auth.SignUpResponse> =>
+			this.fetch("/api/auth/sign-up", { method: "POST", body: JSON.stringify(req) }),
+
+		signOut: (req: { sessionId?: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/sign-out", { method: "POST", body: JSON.stringify(req) }),
+
+		refresh: (req: { refreshToken: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/refresh", { method: "POST", body: JSON.stringify(req) }),
+
+		getSession: (): Promise<auth.SessionResponse> =>
+			this.fetch("/api/auth/session"),
+
+		verifyEmail: (req: { code: string; pendingAuthenticationToken: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/verify-email", { method: "POST", body: JSON.stringify(req) }),
+
+		forgotPassword: (req: { email: string; passwordResetUrl: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/forgot-password", { method: "POST", body: JSON.stringify(req) }),
+
+		resetPassword: (req: { token: string; newPassword: string }): Promise<{ success: true }> =>
+			this.fetch("/api/auth/reset-password", { method: "POST", body: JSON.stringify(req) }),
+
+		getOAuthUrl: (req: { provider: auth.OAuthProvider; redirectUri: string }): Promise<{ url: string }> =>
+			this.fetch(`/api/auth/oauth/url?provider=${req.provider}&redirectUri=${encodeURIComponent(req.redirectUri)}`),
+
+		oauthCallback: (req: { code: string }): Promise<auth.RefreshResponse> =>
+			this.fetch("/api/auth/oauth/callback", { method: "POST", body: JSON.stringify(req) }),
+
+		sendInvitation: (req: { email: string; role: string }): Promise<{ invitationId: string; email: string; status: string }> =>
+			this.fetch("/api/auth/invitations", { method: "POST", body: JSON.stringify(req) }),
+
+		listInvitations: (): Promise<{ invitations: auth.InvitationItem[] }> =>
+			this.fetch("/api/auth/invitations"),
+
+		revokeInvitation: (req: { id: string }): Promise<void> =>
+			this.fetch(`/api/auth/invitations/${req.id}`, { method: "DELETE" }),
+	};
+}
diff --git a/ts/mobile-starter/web/src/lib/api/client.ts b/ts/mobile-starter/web/src/lib/api/client.ts
new file mode 100644
index 00000000..61deff96
--- /dev/null
+++ b/ts/mobile-starter/web/src/lib/api/client.ts
@@ -0,0 +1,16 @@
+import Client, { Local } from "./client.gen";
+
+const baseUrl = import.meta.env.VITE_API_URL || Local;
+
+let accessToken: string | null = null;
+
+export function setAccessToken(token: string | null) {
+	accessToken = token;
+}
+
+export const apiClient = new Client(baseUrl, {
+	auth: () => {
+		if (accessToken) return { authorization: `Bearer ${accessToken}` };
+		return undefined;
+	},
+});
diff --git a/ts/mobile-starter/web/src/lib/permissions.ts b/ts/mobile-starter/web/src/lib/permissions.ts
new file mode 100644
index 00000000..57984b32
--- /dev/null
+++ b/ts/mobile-starter/web/src/lib/permissions.ts
@@ -0,0 +1,40 @@
+export const P = {
+	DASHBOARD_VIEW: "dashboard:view",
+	PROFILE_VIEW: "profile:view",
+	PROFILE_EDIT: "profile:edit",
+	MEMBERS_VIEW: "members:view",
+	MEMBERS_INVITE: "members:invite",
+	MEMBERS_REMOVE: "members:remove",
+} as const;
+
+export type Permission = (typeof P)[keyof typeof P];
+
+export type RoleType = "admin" | "member";
+
+export const ROLE_PERMISSIONS: Record<RoleType, Set<Permission>> = {
+	admin: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+		P.MEMBERS_INVITE,
+		P.MEMBERS_REMOVE,
+	]),
+	member: new Set([
+		P.DASHBOARD_VIEW,
+		P.PROFILE_VIEW,
+		P.PROFILE_EDIT,
+		P.MEMBERS_VIEW,
+	]),
+};
+
+export function hasPermission(role: RoleType, permission: Permission): boolean {
+	return ROLE_PERMISSIONS[role]?.has(permission) ?? false;
+}
+
+const VALID_ROLES = new Set<string>(["admin", "member"]);
+
+export function mapRole(slug?: string): RoleType {
+	if (!slug) return "member";
+	return VALID_ROLES.has(slug) ? (slug as RoleType) : "member";
+}
diff --git a/ts/mobile-starter/web/src/lib/query-client.ts b/ts/mobile-starter/web/src/lib/query-client.ts
new file mode 100644
index 00000000..162409c4
--- /dev/null
+++ b/ts/mobile-starter/web/src/lib/query-client.ts
@@ -0,0 +1,10 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			staleTime: 1000 * 60,
+			retry: 1,
+		},
+	},
+});
diff --git a/ts/mobile-starter/web/src/lib/utils.ts b/ts/mobile-starter/web/src/lib/utils.ts
new file mode 100644
index 00000000..ac680b30
--- /dev/null
+++ b/ts/mobile-starter/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
diff --git a/ts/mobile-starter/web/src/main.tsx b/ts/mobile-starter/web/src/main.tsx
new file mode 100644
index 00000000..7e63c228
--- /dev/null
+++ b/ts/mobile-starter/web/src/main.tsx
@@ -0,0 +1,40 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import ReactDOM from "react-dom/client";
+import { AuthProvider, useAuth } from "@/features/auth/lib/auth-provider";
+import { queryClient } from "@/lib/query-client";
+import { routeTree } from "./routeTree.gen";
+
+const router = createRouter({
+	routeTree,
+	defaultPreload: "intent",
+	context: { auth: {} as ReturnType<typeof useAuth> },
+});
+
+declare module "@tanstack/react-router" {
+	interface Register {
+		router: typeof router;
+	}
+}
+
+function InnerApp() {
+	const auth = useAuth();
+	return <RouterProvider router={router} context={{ auth }} />;
+}
+
+const rootElement = document.getElementById("app");
+
+if (!rootElement) {
+	throw new Error("Root element not found");
+}
+
+if (!rootElement.innerHTML) {
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<InnerApp />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/__root.tsx b/ts/mobile-starter/web/src/routes/__root.tsx
new file mode 100644
index 00000000..9cab0efd
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/__root.tsx
@@ -0,0 +1,13 @@
+import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import type { useAuth } from "@/features/auth/lib/auth-provider";
+import "../index.css";
+
+export type RouterAppContext = { auth: ReturnType<typeof useAuth> };
+
+export const Route = createRootRouteWithContext<RouterAppContext>()({
+	component: RootComponent,
+});
+
+function RootComponent() {
+	return <Outlet />;
+}
diff --git a/ts/mobile-starter/web/src/routes/_app.tsx b/ts/mobile-starter/web/src/routes/_app.tsx
new file mode 100644
index 00000000..2f2adc01
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/_app.tsx
@@ -0,0 +1,69 @@
+import { createFileRoute, Link, Outlet, redirect } from "@tanstack/react-router";
+import { LayoutDashboard, Users, User, LogOut } from "lucide-react";
+import { useAuth } from "@/features/auth/lib/auth-provider";
+import { useAppSession } from "@/features/auth/lib/auth-session";
+
+export const Route = createFileRoute("/_app")({
+	beforeLoad: ({ context }) => {
+		if (!context.auth.isLoading && !context.auth.user) {
+			throw redirect({ to: "/login" });
+		}
+	},
+	component: AppLayout,
+});
+
+function AppLayout() {
+	const { signOut } = useAuth();
+	const { session } = useAppSession();
+
+	return (
+		<div className="min-h-screen bg-surface">
+			<header className="border-b border-border bg-surface-elevated">
+				<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
+					<nav className="flex items-center gap-6">
+						<Link
+							to="/_app/dashboard"
+							className="flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text [&.active]:text-primary"
+						>
+							<LayoutDashboard size={16} />
+							Dashboard
+						</Link>
+						<Link
+							to="/_app/members"
+							className="flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text [&.active]:text-primary"
+						>
+							<Users size={16} />
+							Members
+						</Link>
+						<Link
+							to="/_app/profile"
+							className="flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text [&.active]:text-primary"
+						>
+							<User size={16} />
+							Profile
+						</Link>
+					</nav>
+
+					<div className="flex items-center gap-4">
+						{session && (
+							<span className="text-xs text-text-secondary">
+								{session.name} ({session.role})
+							</span>
+						)}
+						<button
+							onClick={signOut}
+							className="flex items-center gap-1 text-sm text-text-secondary hover:text-text"
+						>
+							<LogOut size={16} />
+							Sign out
+						</button>
+					</div>
+				</div>
+			</header>
+
+			<main className="mx-auto max-w-5xl px-4 py-8">
+				<Outlet />
+			</main>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/_app/dashboard.tsx b/ts/mobile-starter/web/src/routes/_app/dashboard.tsx
new file mode 100644
index 00000000..2987e6ba
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/_app/dashboard.tsx
@@ -0,0 +1,50 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Card, CardTitle, CardDescription } from "@/components/ui/card";
+import { useAppSession } from "@/features/auth/lib/auth-session";
+import { P } from "@/lib/permissions";
+import { requireRoutePermission } from "@/features/auth/lib/route-guard";
+
+export const Route = createFileRoute("/_app/dashboard")({
+	beforeLoad: ({ context }) => {
+		requireRoutePermission(context, P.DASHBOARD_VIEW);
+	},
+	component: Dashboard,
+});
+
+function Dashboard() {
+	const { session } = useAppSession();
+
+	if (!session) return null;
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-2xl font-bold text-text">Dashboard</h1>
+				<p className="text-sm text-text-secondary">
+					Welcome back, {session.name}
+				</p>
+			</div>
+
+			<div className="grid gap-4 md:grid-cols-3">
+				<Card>
+					<CardTitle>Role</CardTitle>
+					<CardDescription>
+						<span className="mt-2 inline-block rounded-full bg-primary/10 px-3 py-1 text-sm font-medium capitalize text-primary">
+							{session.role}
+						</span>
+					</CardDescription>
+				</Card>
+
+				<Card>
+					<CardTitle>Organization</CardTitle>
+					<CardDescription>{session.organizationName}</CardDescription>
+				</Card>
+
+				<Card>
+					<CardTitle>Email</CardTitle>
+					<CardDescription>{session.email}</CardDescription>
+				</Card>
+			</div>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/_app/members.tsx b/ts/mobile-starter/web/src/routes/_app/members.tsx
new file mode 100644
index 00000000..d849bddf
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/_app/members.tsx
@@ -0,0 +1,40 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { P } from "@/lib/permissions";
+import { requireRoutePermission } from "@/features/auth/lib/route-guard";
+import { usePermissions } from "@/features/auth/lib/use-permissions";
+import { InviteForm } from "@/features/invitations/invite-form/invite-form";
+import { InvitationList } from "@/features/invitations/invitation-list/invitation-list";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const Route = createFileRoute("/_app/members")({
+	beforeLoad: ({ context }) => {
+		requireRoutePermission(context, P.MEMBERS_VIEW);
+	},
+	component: Members,
+});
+
+function Members() {
+	const { can } = usePermissions();
+	const queryClient = useQueryClient();
+
+	const handleInviteSuccess = () => {
+		queryClient.invalidateQueries({ queryKey: ["invitations"] });
+	};
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-2xl font-bold text-text">Members</h1>
+				<p className="text-sm text-text-secondary">
+					Manage your organization members
+				</p>
+			</div>
+
+			{can(P.MEMBERS_INVITE) && (
+				<InviteForm onSuccess={handleInviteSuccess} />
+			)}
+
+			<InvitationList />
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/_app/profile.tsx b/ts/mobile-starter/web/src/routes/_app/profile.tsx
new file mode 100644
index 00000000..138a0df9
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/_app/profile.tsx
@@ -0,0 +1,58 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Card, CardTitle, CardDescription } from "@/components/ui/card";
+import { useAppSession } from "@/features/auth/lib/auth-session";
+import { P } from "@/lib/permissions";
+import { requireRoutePermission } from "@/features/auth/lib/route-guard";
+
+export const Route = createFileRoute("/_app/profile")({
+	beforeLoad: ({ context }) => {
+		requireRoutePermission(context, P.PROFILE_VIEW);
+	},
+	component: Profile,
+});
+
+function Profile() {
+	const { session } = useAppSession();
+
+	if (!session) return null;
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-2xl font-bold text-text">Profile</h1>
+				<p className="text-sm text-text-secondary">Your account details</p>
+			</div>
+
+			<Card>
+				<div className="space-y-4">
+					<div>
+						<CardTitle>Name</CardTitle>
+						<CardDescription>{session.name}</CardDescription>
+					</div>
+					<div>
+						<CardTitle>Email</CardTitle>
+						<CardDescription>{session.email}</CardDescription>
+					</div>
+					<div>
+						<CardTitle>Role</CardTitle>
+						<CardDescription>
+							<span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm font-medium capitalize text-primary">
+								{session.role}
+							</span>
+						</CardDescription>
+					</div>
+					<div>
+						<CardTitle>Organization</CardTitle>
+						<CardDescription>{session.organizationName}</CardDescription>
+					</div>
+					<div>
+						<CardTitle>User ID</CardTitle>
+						<CardDescription className="font-mono text-xs">
+							{session.userId}
+						</CardDescription>
+					</div>
+				</div>
+			</Card>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/auth/oauth/callback.tsx b/ts/mobile-starter/web/src/routes/auth/oauth/callback.tsx
new file mode 100644
index 00000000..d610e05e
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/auth/oauth/callback.tsx
@@ -0,0 +1,56 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useAuth } from "@/features/auth/lib/auth-provider";
+import { apiClient } from "@/lib/api/client";
+
+export const Route = createFileRoute("/auth/oauth/callback")({
+	validateSearch: (search: Record<string, unknown>) => ({
+		code: (search.code as string) ?? "",
+	}),
+	component: OAuthCallback,
+});
+
+function OAuthCallback() {
+	const { code } = Route.useSearch();
+	const { storeSession } = useAuth();
+	const navigate = useNavigate();
+	const [error, setError] = useState("");
+
+	useEffect(() => {
+		if (!code) {
+			setError("No authorization code received");
+			return;
+		}
+
+		apiClient.auth
+			.oauthCallback({ code })
+			.then((result) => {
+				storeSession(result);
+				navigate({ to: "/_app/dashboard" });
+			})
+			.catch((err) => {
+				setError(
+					err instanceof Error ? err.message : "OAuth authentication failed",
+				);
+			});
+	}, [code, storeSession, navigate]);
+
+	if (error) {
+		return (
+			<div className="flex min-h-screen items-center justify-center">
+				<div className="text-center">
+					<p className="text-error">{error}</p>
+					<a href="/login" className="mt-2 text-sm text-primary hover:underline">
+						Back to login
+					</a>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex min-h-screen items-center justify-center">
+			<p className="text-text-secondary">Completing sign in...</p>
+		</div>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/forgot-password.tsx b/ts/mobile-starter/web/src/routes/forgot-password.tsx
new file mode 100644
index 00000000..2e96a413
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/forgot-password.tsx
@@ -0,0 +1,86 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import { AuthLayout } from "@/features/auth/auth-layout/auth-layout";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { apiClient } from "@/lib/api/client";
+
+export const Route = createFileRoute("/forgot-password")({
+	component: ForgotPassword,
+});
+
+function ForgotPassword() {
+	const [email, setEmail] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [sent, setSent] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsLoading(true);
+		try {
+			await apiClient.auth.forgotPassword({
+				email,
+				passwordResetUrl: `${window.location.origin}/reset-password`,
+			});
+			setSent(true);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<AuthLayout>
+			<div className="mb-6 text-center">
+				<h1 className="text-2xl font-bold text-text">Reset your password</h1>
+				<p className="mt-1 text-sm text-text-secondary">
+					Enter your email and we'll send you a reset link
+				</p>
+			</div>
+
+			<Card>
+				{sent ? (
+					<div className="text-center">
+						<p className="text-sm text-text-secondary">
+							If an account with that email exists, we sent a password reset
+							link. Check your inbox.
+						</p>
+						<Link
+							to="/login"
+							className="mt-4 inline-block text-sm text-primary hover:underline"
+						>
+							Back to login
+						</Link>
+					</div>
+				) : (
+					<form onSubmit={handleSubmit} className="space-y-4">
+						<div>
+							<Label htmlFor="email">Email</Label>
+							<Input
+								id="email"
+								type="email"
+								placeholder="you@example.com"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								required
+								className="mt-1"
+							/>
+						</div>
+						<Button type="submit" disabled={isLoading} className="w-full">
+							{isLoading ? "Sending..." : "Send Reset Link"}
+						</Button>
+						<div className="text-center">
+							<Link
+								to="/login"
+								className="text-sm text-primary hover:underline"
+							>
+								Back to login
+							</Link>
+						</div>
+					</form>
+				)}
+			</Card>
+		</AuthLayout>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/index.tsx b/ts/mobile-starter/web/src/routes/index.tsx
new file mode 100644
index 00000000..7d8a764e
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+	beforeLoad: ({ context }) => {
+		if (!context.auth.isLoading && context.auth.user) {
+			throw redirect({ to: "/_app/dashboard" });
+		}
+		throw redirect({ to: "/login" });
+	},
+});
diff --git a/ts/mobile-starter/web/src/routes/login.tsx b/ts/mobile-starter/web/src/routes/login.tsx
new file mode 100644
index 00000000..03006715
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/login.tsx
@@ -0,0 +1,22 @@
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { AuthLayout } from "@/features/auth/auth-layout/auth-layout";
+import { LoginForm } from "@/features/auth/login-form/login-form";
+
+export const Route = createFileRoute("/login")({
+	beforeLoad: ({ context }) => {
+		if (!context.auth.isLoading && context.auth.user) {
+			throw redirect({ to: "/_app/dashboard" });
+		}
+	},
+	component: Login,
+});
+
+function Login() {
+	const navigate = useNavigate();
+
+	return (
+		<AuthLayout>
+			<LoginForm onSuccess={() => navigate({ to: "/_app/dashboard" })} />
+		</AuthLayout>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/reset-password.tsx b/ts/mobile-starter/web/src/routes/reset-password.tsx
new file mode 100644
index 00000000..26ad99d5
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/reset-password.tsx
@@ -0,0 +1,112 @@
+import { createFileRoute, Link, useSearch } from "@tanstack/react-router";
+import { useState } from "react";
+import { AuthLayout } from "@/features/auth/auth-layout/auth-layout";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { apiClient } from "@/lib/api/client";
+
+export const Route = createFileRoute("/reset-password")({
+	validateSearch: (search: Record<string, unknown>) => ({
+		token: (search.token as string) ?? "",
+	}),
+	component: ResetPassword,
+});
+
+function ResetPassword() {
+	const { token } = useSearch({ from: "/reset-password" });
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState("");
+	const [success, setSuccess] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError("Passwords do not match");
+			return;
+		}
+		if (newPassword.length < 8) {
+			setError("Password must be at least 8 characters");
+			return;
+		}
+
+		setIsLoading(true);
+		setError("");
+
+		try {
+			await apiClient.auth.resetPassword({ token, newPassword });
+			setSuccess(true);
+		} catch (err) {
+			setError(
+				err instanceof Error ? err.message : "Failed to reset password",
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<AuthLayout>
+			<div className="mb-6 text-center">
+				<h1 className="text-2xl font-bold text-text">Set new password</h1>
+				<p className="mt-1 text-sm text-text-secondary">
+					Enter your new password below
+				</p>
+			</div>
+
+			<Card>
+				{success ? (
+					<div className="text-center">
+						<p className="text-sm text-text-secondary">
+							Your password has been reset successfully.
+						</p>
+						<Link
+							to="/login"
+							className="mt-4 inline-block text-sm text-primary hover:underline"
+						>
+							Sign in with your new password
+						</Link>
+					</div>
+				) : (
+					<form onSubmit={handleSubmit} className="space-y-4">
+						{error && (
+							<div className="rounded-lg border border-error/30 bg-error-muted p-3 text-sm text-error">
+								{error}
+							</div>
+						)}
+						<div>
+							<Label htmlFor="newPassword">New password</Label>
+							<Input
+								id="newPassword"
+								type="password"
+								placeholder="At least 8 characters"
+								value={newPassword}
+								onChange={(e) => setNewPassword(e.target.value)}
+								required
+								className="mt-1"
+							/>
+						</div>
+						<div>
+							<Label htmlFor="confirmPassword">Confirm password</Label>
+							<Input
+								id="confirmPassword"
+								type="password"
+								placeholder="Re-enter your password"
+								value={confirmPassword}
+								onChange={(e) => setConfirmPassword(e.target.value)}
+								required
+								className="mt-1"
+							/>
+						</div>
+						<Button type="submit" disabled={isLoading} className="w-full">
+							{isLoading ? "Resetting..." : "Reset Password"}
+						</Button>
+					</form>
+				)}
+			</Card>
+		</AuthLayout>
+	);
+}
diff --git a/ts/mobile-starter/web/src/routes/signup.tsx b/ts/mobile-starter/web/src/routes/signup.tsx
new file mode 100644
index 00000000..6e15e6d7
--- /dev/null
+++ b/ts/mobile-starter/web/src/routes/signup.tsx
@@ -0,0 +1,22 @@
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { AuthLayout } from "@/features/auth/auth-layout/auth-layout";
+import { SignUpForm } from "@/features/auth/signup-form/signup-form";
+
+export const Route = createFileRoute("/signup")({
+	beforeLoad: ({ context }) => {
+		if (!context.auth.isLoading && context.auth.user) {
+			throw redirect({ to: "/_app/dashboard" });
+		}
+	},
+	component: SignUp,
+});
+
+function SignUp() {
+	const navigate = useNavigate();
+
+	return (
+		<AuthLayout>
+			<SignUpForm onSuccess={() => navigate({ to: "/_app/dashboard" })} />
+		</AuthLayout>
+	);
+}
diff --git a/ts/mobile-starter/web/tsconfig.json b/ts/mobile-starter/web/tsconfig.json
new file mode 100644
index 00000000..71c99a4a
--- /dev/null
+++ b/ts/mobile-starter/web/tsconfig.json
@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"verbatimModuleSyntax": true,
+		"skipLibCheck": true,
+		"types": ["vite/client"],
+		"rootDirs": ["."],
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	}
+}
diff --git a/ts/mobile-starter/web/vite.config.ts b/ts/mobile-starter/web/vite.config.ts
new file mode 100644
index 00000000..71c38e26
--- /dev/null
+++ b/ts/mobile-starter/web/vite.config.ts
@@ -0,0 +1,14 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [tailwindcss(), tanstackRouter({}), react()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
+});