feat: migrate auth from supabase to better auth (#596)

* feat: add README for @cio/db package and remove existingAccounts.json

* load session, load profile and organization, add create profile hook

* chore: cache session request

The trick was passing all the cookies to the backend. Previously I was only passing the better-auth.session_token and not better-auth.session_data. Read about the difference here https://www.better-auth.com/docs/concepts/cookies#custom-cookies

* feat: login, logout, onboarding, verify email, reset password.

* feat: complete change email and email verification

* feat: standardise how we make rpc calls and create org endpoints

* fix ui errors

* fix: handle potential undefined customerId and standardize avatar URL property

* refactor: standardize custom domain handling and update telegram chat ID references

* chore: add tailwind prefix to @cio/ui

this fixed the media query issues because  @cio/ui classes were overriding this dashboard tailwind build

* chore: clean up org sidebar

* chore: persist mode state

* feat: implement order breadcrumbs

* chore: upgrade to better auth 1.4

* chore: address common auth flow bugs and setup app for others to setup locally.

apps/dashboard/src/lib/utils/services/api/base.svelte.ts

@@ -0,0 +1,141 @@
+import { getErrMsg } from './utils';
+import type { InferResponseType } from '@cio/api/rpc-types';
+import { ApiError, type ZodValidationError, type ZodValidatorMesssage } from './types';
+import { mapZodErrorsToTranslations } from '$lib/utils/validation/validation';
+import { ZodError } from 'zod/v4';
+
+// Extract the data type from a success response
+type ExtractData<T> = Extract<InferResponseType<T>, { success: true }>;
+type ExtractError<T> = Extract<InferResponseType<T>, { success: false }>;
+
+interface ExecuteOptions<TrpcType> {
+  requestFn: () => Promise<Response>;
+  errorMessage?: string;
+  onSuccess?: (data: ExtractData<TrpcType>) => Promise<void> | void;
+  onError?: (error: ExtractError<TrpcType> | string) => Promise<void> | void;
+  logContext?: string;
+}
+
+/**
+ * Base API class that provides shared state management and request handling
+ * for all API classes in the application.
+ */
+export class BaseApi {
+  isLoading = $state(false);
+  error = $state<string | null>(null);
+
+  /**
+   * Execute an API request with automatic loading and error state management
+   * Type is automatically inferred from the RPC call (e.g., classroomio.organization.plan.$post)
+   * @param options Configuration for the request
+   * @returns The data from the response, or the default return value on error
+   */
+  protected async execute<TrpcType>(options: ExecuteOptions<TrpcType>): Promise<ExtractData<TrpcType> | undefined> {
+    const { requestFn, onSuccess, logContext = 'API request' } = options;
+
+    this.isLoading = true;
+    this.error = null;
+
+    try {
+      const response = await requestFn();
+      const result = (await response.json()) as unknown;
+
+      if (typeof result === 'object' && result !== null && 'success' in result) {
+        const apiResult = result as { success: boolean; data?: unknown; error?: string; message?: string };
+
+        if (apiResult.success === false) {
+          console.log('apiResult false', apiResult);
+          options.onError?.(apiResult as ExtractError<TrpcType>);
+
+          return;
+        }
+
+        const typedResult = apiResult as ExtractData<TrpcType>;
+
+        this.resetErrors();
+
+        if (onSuccess) {
+          await onSuccess(typedResult);
+        }
+
+        return typedResult;
+      }
+    } catch (error) {
+      console.error(`Error in ${logContext}:`, error);
+      this.error = getErrMsg(error, `Error ${logContext}:`);
+
+      const errorResult = this.getServerError<ExtractError<TrpcType>>(error);
+      options.onError?.(errorResult);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  getServerError<T>(error: unknown): T | string {
+    if (error instanceof ApiError) {
+      console.log('instance of ApiError', error);
+      try {
+        const json = JSON.parse(error.message) as T;
+        return json;
+      } catch (e) {
+        console.log('error parsing json', e);
+        return error.message;
+      }
+    }
+
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    if (typeof error === 'string') {
+      return error;
+    }
+
+    return `${error}`;
+  }
+
+  resetErrors() {
+    this.error = null;
+  }
+
+  /**
+   * Reset the API state
+   */
+  reset() {
+    this.isLoading = false;
+    this.error = null;
+  }
+}
+
+/**
+ * Extended base API class that supports errors object (Record<string, string>)
+ * for form validation scenarios
+ */
+export class BaseApiWithErrors extends BaseApi {
+  errors = $state<Record<string, string>>({});
+  success = $state(false);
+
+  handleValidationError(result: { success: false; error: string; code: string; field?: string }): Promise<void> | void {
+    const zodValidationError = result.error as unknown as ZodValidationError;
+    if (zodValidationError.name === 'ZodError') {
+      const issues = JSON.parse(zodValidationError.message) as ZodValidatorMesssage;
+
+      this.errors = mapZodErrorsToTranslations(new ZodError(issues));
+
+      return;
+    }
+  }
+
+  override resetErrors() {
+    this.errors = {};
+  }
+
+  /**
+   * Reset the API state including errors and success
+   */
+  override reset() {
+    super.reset();
+    this.errors = {};
+    this.success = false;
+  }
+}

apps/dashboard/src/lib/utils/services/api/index.ts

@@ -3,7 +3,6 @@ import { type ApiClientConfig, ApiError, type RequestConfig } from './types';
 import { DEFAULT_CONFIG } from './constants';
 import { delay } from './utils';
 import { env } from '$env/dynamic/public';
-import { getAccessToken } from '$lib/utils/functions/supabase';
 import { hcWithType } from '@cio/api/rpc-types';
 
 class ApiClient {
@@ -14,13 +13,7 @@ class ApiClient {
   }
 
   private async makeRequest(input: RequestInfo | URL, requestConfig: RequestConfig = {}): Promise<Response> {
-    console.log('makeRequest', input, requestConfig);
-    const {
-      timeout = this.config.timeout,
-      retries = this.config.retries,
-      skipAuth = false,
-      ...fetchConfig
-    } = requestConfig;
+    const { timeout = this.config.timeout, retries = this.config.retries, ...fetchConfig } = requestConfig;
 
     const url = typeof input === 'string' ? input : input.toString();
     const fullUrl = url.startsWith('http') ? url : `${this.config.baseURL}${url}`;
@@ -48,19 +41,6 @@ class ApiClient {
       }
     }
 
-    // Add authentication if not skipped
-    if (!skipAuth) {
-      try {
-        const token = await getAccessToken();
-        if (token) {
-          headers.set('Authorization', `Bearer ${token}`);
-        }
-      } catch (error) {
-        console.warn('Failed to get access token:', error);
-        // Continue without auth if token retrieval fails
-      }
-    }
-
     // Create abort controller for timeout
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeout);
@@ -94,16 +74,11 @@ class ApiClient {
 
         if (response.status >= 400 && response.status < 500) {
           const errorText = await response.text().catch(() => 'Unknown error');
-          throw new ApiError(`Client error: ${errorText}`, response.status, response.statusText, response);
+          throw new ApiError(errorText, response.status, response.statusText, response);
         }
 
         if (response.status >= 500) {
-          const error = new ApiError(
-            `Server error: ${response.statusText}`,
-            response.status,
-            response.statusText,
-            response
-          );
+          const error = new ApiError(response.statusText, response.status, response.statusText, response);
 
           if (attempt === retries) {
             throw error;
@@ -165,6 +140,9 @@ export const apiClient = new ApiClient();
 export const classroomio = hcWithType(env.PUBLIC_SERVER_URL, {
   fetch: async (input: RequestInfo | URL, requestInit?: RequestInit) => {
     return apiClient.request(input, requestInit);
+  },
+  init: {
+    credentials: 'include' // Required for sending cookies cross-origin
   }
 });
 
@@ -188,3 +166,6 @@ export {
 } from './utils';
 
 export type { InferResponseType, InferRequestType } from '@cio/api/rpc-types';
+
+// Export base API classes
+export { BaseApi, BaseApiWithErrors } from './base.svelte';

apps/dashboard/src/lib/utils/services/api/types.ts

@@ -1,4 +1,5 @@
-// Types for better type safety
+import type { ZodError } from 'zod';
+
 export interface ApiClientConfig {
   baseURL?: string;
   timeout?: number;
@@ -10,6 +11,13 @@ export interface ApiClientConfig {
   onResponse?: (response: Response) => Promise<void> | void;
 }
 
+export type ZodValidationError = {
+  message: string; // stringified error.issues from zod
+  name: 'ZodError';
+};
+
+export type ZodValidatorMesssage = ZodError['issues'];
+
 export interface RequestConfig extends RequestInit {
   timeout?: number;
   retries?: number;

apps/dashboard/src/lib/utils/services/api/utils.ts

@@ -3,6 +3,23 @@ import { ApiError } from './types';
 // Utility function for exponential backoff
 export const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
+export const getErrMsg = (error: unknown, fallback = 'Something went wrong'): string => {
+  if (error instanceof ApiError) {
+    return error.message;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  if (error instanceof Object && 'message' in error) {
+    return error.message as string;
+  }
+
+  return fallback;
+};
+
 // Helper function to handle JSON responses
 export const handleJsonResponse = async <T = any>(response: Response): Promise<T> => {
   if (!response.ok) {