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/course-app/package.json

@@ -21,7 +21,6 @@
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
-    "mode-watcher": "^0.5.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.5",
@@ -40,6 +39,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "lucide-svelte": "^0.468.0",
+    "mode-watcher": "^1.1.0",
     "posthog-js": "^1.180.1",
     "svelte-inview": "^4.0.4",
     "svelte-motion": "^0.12.2",

apps/course-app/src/lib/components/navigation/navigation.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
 
   const getClass = (active: boolean) => (active ? 'text-foreground' : 'text-foreground/60');
 
   let activeClass = $derived({
-    template: getClass($page.url.href.includes('#templates')),
-    features: getClass($page.url.href.includes('#features'))
+    template: getClass(page.url.href.includes('#templates')),
+    features: getClass(page.url.href.includes('#features'))
   });
 </script>
 
 <header
-  class="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur"
+  class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
   <p class="bg-blue-700 py-1.5 text-center text-sm font-medium text-white">
     brought to you by
@@ -59,7 +59,7 @@
           href="/npm"
           target="_blank"
           rel="noopener noreferrer"
-          class="hover:text-foreground/80 text-foreground/60 flex items-center gap-1 transition-colors"
+          class="flex items-center gap-1 text-foreground/60 transition-colors hover:text-foreground/80"
         >
           NPM <ArrowUpRight class="h-4 w-4" />
         </a>{' '}
@@ -80,7 +80,7 @@
           rel="noopener noreferrer"
         >
           <div
-            class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md px-0 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
+            class="inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md px-0 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
           >
             <svg viewBox="0 0 438.549 438.549" class="h-4 w-4">
               <path
@@ -93,7 +93,7 @@
         </a>{' '}
         <a href="https://twitter.com/classroomio" target="_blank" rel="noreferrer">
           <div
-            class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md px-0 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
+            class="inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-md px-0 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
           >
             <svg
               height="23"

apps/course-app/tsconfig.json

@@ -10,7 +10,8 @@
     "sourceMap": true,
     "strict": true,
     "moduleResolution": "bundler"
-  }
+  },
+  "exclude": ["node_modules", ".svelte-kit", "dist", "build", "**/*.spec.ts", "**/*.test.ts"]
   // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
   // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
   //