N
Nuxtβ€’12mo ago
HugoRCD

Error 500: A composable that requires access to the Nuxt instance

I have this error in my composable that I absolutely don't cromprend given that most of the code is copied and pasted from one of my other projects, if you have any idea what the problem is thank you πŸ™
No description
7 Replies
HugoRCD
HugoRCDOPβ€’12mo ago
composables/useUser.ts:
import type { publicUser } from "~/types/User";
import { Role } from "~/types/User";

export const useCurrentUser = () => {
  return useState<publicUser | null>("user", () => null);
};

export const isLoggedIn = computed(() => {
  return !!useCurrentUser().value;
});

export const isAdmin = computed(() => {
  return useCurrentUser().value?.role === Role.Admin;
});

export async function useUser(): Promise<publicUser | null> {
  const authCookie = useCookie("authToken");
  const user = useCurrentUser().value;

  if (authCookie && !user) {
    const cookieHeaders = useRequestHeaders(["cookie"]);
    const { data } = await useFetch<publicUser>("/api/auth/currentUser", {
      method: "GET",
      headers: cookieHeaders as HeadersInit,
    });
    if (!data.value) return null;
    useCurrentUser().value = data.value;
  }
  return user;
}
composables/useUser.ts:
import type { publicUser } from "~/types/User";
import { Role } from "~/types/User";

export const useCurrentUser = () => {
  return useState<publicUser | null>("user", () => null);
};

export const isLoggedIn = computed(() => {
  return !!useCurrentUser().value;
});

export const isAdmin = computed(() => {
  return useCurrentUser().value?.role === Role.Admin;
});

export async function useUser(): Promise<publicUser | null> {
  const authCookie = useCookie("authToken");
  const user = useCurrentUser().value;

  if (authCookie && !user) {
    const cookieHeaders = useRequestHeaders(["cookie"]);
    const { data } = await useFetch<publicUser>("/api/auth/currentUser", {
      method: "GET",
      headers: cookieHeaders as HeadersInit,
    });
    if (!data.value) return null;
    useCurrentUser().value = data.value;
  }
  return user;
}
app.vue:
<script setup lang="ts">
const { title, link } = useAppConfig();
useHead({
  title: title,
  link: link,
});

await useUser();
</script>

<template>
  <Html>
    <Body class="relative bg-primary text-primary">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
      <Toasts />
    </Body>
  </Html>
</template>
app.vue:
<script setup lang="ts">
const { title, link } = useAppConfig();
useHead({
  title: title,
  link: link,
});

await useUser();
</script>

<template>
  <Html>
    <Body class="relative bg-primary text-primary">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
      <Toasts />
    </Body>
  </Html>
</template>
If you need more information, don't hesitate to send me a message!
Unknown User
Unknown Userβ€’12mo ago
Message Not Public
Sign In & Join Server To View
HugoRCD
HugoRCDOPβ€’12mo ago
thank you for the reply it helps indeed I no longer have the 500 only a few hydration errors however I don't understand why it doesn't work on this app and very well on the other one
No description
Unknown User
Unknown Userβ€’12mo ago
Message Not Public
Sign In & Join Server To View
HugoRCD
HugoRCDOPβ€’12mo ago
I don't even know if this is the best way to keep my user connected to the app at refresh actually πŸ€”
Unknown User
Unknown Userβ€’12mo ago
Message Not Public
Sign In & Join Server To View
HugoRCD
HugoRCDOPβ€’12mo ago
Yes, I do have middleware for that. I've been using this system for a long time for my authentications, but I never really asked myself if it was the best way to do it! 
middleware/auth.ts:
export default defineNuxtRouteMiddleware(async () => {
  const user = await useUser();
  if (!user) {
    toast.error("You need to be logged in to access this page.");
    return "/login";
  }
});
middleware/auth.ts:
export default defineNuxtRouteMiddleware(async () => {
  const user = await useUser();
  if (!user) {
    toast.error("You need to be logged in to access this page.");
    return "/login";
  }
});

Did you find this page helpful?