HugoRCD Comments - Answer Overflow

HugoRCD

•Created by HugoRCD on 3/4/2024 in #❓・help

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

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";
  }
});

11 replies

NNuxt

•Created by HugoRCD on 3/4/2024 in #❓・help

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

I don't even know if this is the best way to keep my user connected to the app at refresh actually 🤔

11 replies

NNuxt

•Created by HugoRCD on 3/4/2024 in #❓・help

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

11 replies

NNuxt

•Created by HugoRCD on 3/4/2024 in #❓・help

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

If you need more information, don't hesitate to send me a message!

11 replies

NNuxt

•Created by HugoRCD on 3/4/2024 in #❓・help

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

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>

11 replies

NNuxt

•Created by HugoRCD on 3/4/2024 in #❓・help

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

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;
}

11 replies

Gaming

Programming