Nuxt•5mo ago

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 🙏

7 Replies

HugoRCD•5mo 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•5mo ago

Message Not Public

HugoRCD•5mo 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

Unknown User•5mo ago

Message Not Public

HugoRCD•5mo 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•5mo ago

Message Not Public

HugoRCD•5mo 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";
  }
});

Gaming

Programming

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