HugoRCD
HugoRCD
PostsComments
NNuxt
Created by HugoRCD on 11/8/2024 in #❓・help
Docker & Redis support
Of course, the env variable is set in the .env file.
6 replies
NNuxt
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
No description
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