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/routes/forgot/+page.svelte

@@ -1,55 +1,25 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { getSupabase } from '$lib/utils/functions/supabase';
-  import { forgotValidation } from '$lib/utils/functions/validator';
   import { ROUTE } from '$lib/utils/constants/routes';
-  import { FORGOT_PASSWORD_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import EmailSentIcon from '$lib/components/Icons/EmailSentIcon.svelte';
+  import { forgotApi } from '$lib/features/auth/api/forgot.svelte';
+  import type { TForgotPasswordForm } from '$lib/features/auth/utils/types';
 
-  let supabase = getSupabase();
-  let fields = $state(Object.assign({}, FORGOT_PASSWORD_FIELDS));
-  let submitError = $state();
-  let loading = $state(false);
-  let success = $state(false);
-  let errors = $state({});
-
-  async function handleSubmit() {
-    errors = forgotValidation(fields);
-    console.log('errors', errors);
-
-    if (Object.keys(errors).length) {
-      return;
-    }
-
-    try {
-      loading = true;
-      const { data, error } = await supabase.auth.resetPasswordForEmail(fields.email, {
-        redirectTo: `${window.location.origin}/reset`
-      });
-      console.log('data', data);
-      if (error) throw error;
-
-      success = true;
-    } catch (error) {
-      submitError = error.error_description || error.message;
-    } finally {
-      loading = false;
-    }
-  }
+  let fields: TForgotPasswordForm = $state({ email: '' });
 </script>
 
 <svelte:head>
-  <title>Reset Password - ClassroomIO</title>
+  <title>Forgot Password - ClassroomIO</title>
 </svelte:head>
 
-<AuthUI {supabase} {handleSubmit} showOnlyContent={true} showLogo={!success}>
-  {#if success}
+<AuthUI handleSubmit={() => forgotApi.submit(fields)} showOnlyContent={true} showLogo={!forgotApi.success}>
+  {#if forgotApi.success}
     <div class="mt-4 flex w-full flex-col items-center justify-center">
-      <EmailSentIcon size={16} />
+      <EmailSentIcon />
       <h3 class="my-3 text-xl font-semibold dark:text-white">Email Sent!</h3>
       <p class="text-md mb-6 text-center dark:text-white">
         We have sent a confirmation email to <span class="text-primary-700">{fields.email}</span>. Kindly check your
@@ -72,12 +42,9 @@
         placeholder="[email protected]"
         className="mb-6"
         inputClassName="w-full"
-        isDisabled={loading}
-        errorMessage={errors.email}
+        isDisabled={forgotApi.isLoading}
+        errorMessage={forgotApi.errors.email}
       />
-      {#if submitError}
-        <p class="text-sm text-red-500">{submitError}</p>
-      {/if}
     </div>
 
     <div class="my-4 flex w-full flex-col items-center justify-end">
@@ -85,8 +52,7 @@
         label="Reset Password"
         type="submit"
         className="sm:w-full w-full mb-4"
-        isDisabled={loading}
-        isLoading={loading}
+        isLoading={forgotApi.isLoading}
       />
       <PrimaryButton
         label="Cancel"