Intro To MongoDB Realm with VueJS Ionic Framework And ViteJS, Refactoring Application State with Composition API

// realm-state.ts
import * as Realm from "realm-web";
import { computed, ref } from "vue";

const user = ref<any>(null);

// get app instance
const app = Realm.getApp("application-vue-1-afmqh");
user.value = app?.currentUser;

export const useAppState = () => {
  const isLoggedIn = computed(() => user.value !== null);

  /**
   *
   */
  const login = async (email: string, password: string) => {
    const credentials = Realm.Credentials.emailPassword(email, password);
    await app.logIn(credentials);

    // Refresh a user's custom data to make sure we have the
    // latest version
    await app?.currentUser?.refreshCustomData();

    //assign logged in user
    user.value = app?.currentUser;

    return true;
  };

  /**
   *
   * @returns
   */
  const logout = async () => {
    await app.currentUser?.logOut();
    //assign logged in user
    user.value = null;
    return true;
  };

  const createAccount = async ({
    email,
    password,
    first,
    last,
  }: {
    email: string;
    password: string;
    first: string;
    last: string;
  }) => {
    // Create user
    await app.emailPasswordAuth.registerUser(email, password);

    // Authenticate the user
    await app.logIn(Realm.Credentials.emailPassword(email, password));

    // save profile information
    const mongodb = app?.currentUser?.mongoClient("mongodb-atlas");
    const collection = mongodb?.db("vue-db1").collection("profile");

    const resp = await collection?.insertOne({
      userID: app?.currentUser?.id,
      first,
      last,
    });

    // Refresh a user's custom data to make sure we have the latest version
    await app?.currentUser?.refreshCustomData();

    //assign logged in user
    user.value = app?.currentUser;

    return app.currentUser;
  };

  return {
    isLoggedIn,
    user,
    // functions
    login,
    logout,
    createAccount,
  };
};