What's the right way to use VueFire witn Nuxt SSG?

[fayazara]

This is my page

<template>
  <main class="min-h-screen bg-gray-50">
    <AppNavbar />
    <AppPageLoading v-if="!user" label="Authenticating" subtitle="Please wait..." />
    <NuxtPage v-else />
  </main>
</template>
<script setup>
definePageMeta({
  middleware: ["authenticated"]
});

const { getCountryCode } = useLocalization();

const { data: user } = await useAsyncData("init", async () => {
  try {
    const user = await getCurrentUser();
    if (user) {
      // Set firebase token in state
      const idToken = await user.getIdToken();
      useState("idToken", () => idToken);
      getCountryCode();
      // Get user details
      const { data, error } = await useApi("/user/details");
      if (error.value) throw error;
      if (!data.value.success) throw new Error("User not found");
      useState("userDetails", () => data);
      return data;
    } else {
      console.log("No authenticated user found.");
    }
  } catch (error) {
    console.log(error);
  }
});
</script>

This is my middleware

export default defineNuxtRouteMiddleware(async (to) => {
  if (process.server) return;
  const user = await getCurrentUser() // Vuefire composable
  if (!user) {
    return navigateTo({ path: '/auth/login', query: { redirect: to.fullPath } }, {
      external: true
    })
  }
})

I feel like I am doing this correctly, yet somehow I get this logged in the console

[nuxt] `#imports` should be transformed with real imports. There seems to be something wrong with the imports plugin.
No authenticated user found.
No authenticated user found.

And Once the user is loaded I get can then access the app correctly.

Note: Nothing is breaking, but the error is making me feel I am not doing it correctly.

@posva Any suggestion/insights?

[posva]

Composables should all go before the await. But you also don't need it, you can use useCurrentUser(). You can watch its value with a watcher too.