Using VUE.js, pinia and supabase. How can I get the info of the user currently logged in

This is a novice question.

//auth.js (pinia store)

import { defineStore } from 'pinia'
import supabase from '../supabase'
import {ref, watch} from 'vue'

export const useAuthStore = defineStore('user', () =>{
  const user = ref(null)
  const error = ref(null)

  const fetchUser = async () => {
     user.value = await supabase.auth.user();

  }
  const signUp = async (email, password, username) => {
    const { error } = await supabase.auth.signUp({
      email,
      password,
    },
    {
      data: { username: username}
    }
    )
    if (error) {
      error.value = error.message;
    }
  }
  const signIn = async (email, password) => {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    if (error) {
      error.value = error.message;
    } else {
      user.value = data;
    }
  }
  const signOut = async () => {
    await supabase.auth.signOut();
    user.value = null;
  }

As you can see I have added an username parameter to the signUp function. The problems are:

• I’m not sure the username is being uploaded to supabase because whenever i want to retrieve the user info I get a weird object.
• I just want to be able to add inputs to the “Sign up” form, saving this info in supabase, and being able to retrieve this info from the “user” store.

I have tried to make a “getUsername” function which would be ideal:

const getUsername = async () => {
    if (!user.value) {
      // Return null if the user is not logged in
      return null;
    }
    const { data, error } = await supabase
      .from("users")
      .select("username")
      .eq("email", user.value.email)
      .single();
    if (error) {
      // Return null if there was an error fetching the username
      return null;
    } else {
      // Return the username
      return data.username;
    }
  }

And trying to render the information in a component:

<template>
  <main>
      <h1 v-if="!authStore.user">Welcome to My App!</h1>
      <p v-if="!authStore.user">Please, sign in or sign up to continue.</p>
      <h1 v-if="authStore.user">Greetings! {{ username }}</h1>
  </main>
</template>
<script setup>
  import {useAuthStore} from '../stores/auth

  const authStore = useAuthStore();
  const username = authStore.fetchUser; // Here I am testing

</script>