roga Posts - Answer Overflow

roga

•Created by roga on 6/11/2024 in #❓・help

Interesting problem with my audit trail...

In an app I built, I'm using the Supabase Nuxt module to get user metadata or email address and I'm using it to create an audit trail when I create an entity in my database.

  const bodyData = await readBody(event);
  const user = await serverSupabaseUser(event);
  const userName = user?.user_metadata.name || user?.email || 'unknown';

  const bodyData = await readBody(event);
  const user = await serverSupabaseUser(event);
  const userName = user?.user_metadata.name || user?.email || 'unknown';

The problem is that sometimes it was returning someone elses information entirely. I observed the bug first-hand and I couldn't really explain what was happening. For some API routes, I was using a useAuth.ts function I created in my server-side utils folder that looked like this.

// server/utils/useAuth.ts
import { serverSupabaseUser } from '#supabase/server';
import type { H3Event, EventHandlerRequest } from 'h3';

export default async function useAuth(event: H3Event<EventHandlerRequest>, handleError: (statusCode: number, statusMessage: string, error?: any) => {}): string {
  const user = await serverSupabaseUser(event);
  if (!user) return handleError(401, 'unauthorized');
  return user.user_metadata?.name || user?.email || 'unknown';
}

// server/utils/useAuth.ts
import { serverSupabaseUser } from '#supabase/server';
import type { H3Event, EventHandlerRequest } from 'h3';

export default async function useAuth(event: H3Event<EventHandlerRequest>, handleError: (statusCode: number, statusMessage: string, error?: any) => {}): string {
  const user = await serverSupabaseUser(event);
  if (!user) return handleError(401, 'unauthorized');
  return user.user_metadata?.name || user?.email || 'unknown';
}

I'm deploying to Vercel and I was curious if the util was somehow being reused by different users, capturing the wrong user details and retaining it. I don't understand how, but I'm very perplexed as to how the wrong user information is consistently inserting itself into my audit trail... Any ideas?

1 replies

NNuxt

•Created by roga on 4/25/2024 in #❓・help

Pop-up Components

If I wanted to build a reusable component that acts as a modal and overlays anything going on beneath it, how would I do it? Specifically, how do I ensure everything "beneath" it has the proper z index, relevant to my modal component? And what is it called when you develop a specific use case component and make it available for others to add to their projects? Is this a plugin? I've only ever built my own projects. Never worked on something that someone else might some day use. Any advice would be super helpful. Thank you in advance - you're awesome.

2 replies

NNuxt

•Created by roga on 4/3/2023 in #❓・help

What is the `type` in H3's `send()` method?

3 replies

NNuxt

•Created by roga on 3/31/2023 in #❓・help

NuxtLinks just stop working

I'm wondering if anyone has had the problem where you get one and only one click out of your nuxt links and then everything just stops working. If so, how did you fix this? I've restarted the server several times but the router just seems to quit with absolutely no error logging in the client or on the server. Help?!

13 replies

NNuxt

•Created by roga on 3/23/2023 in #❓・help

Nuxt & Supabase Auth

I've set up working authentication in my Nuxt 3 app. I have an authGuard middleware that I've set up which is super basic:

export default defineNuxtRouteMiddleware((to, _from) => {
  const user = useSupabaseUser();
  if (!user.value) return navigateTo('/login');
});

export default defineNuxtRouteMiddleware((to, _from) => {
  const user = useSupabaseUser();
  if (!user.value) return navigateTo('/login');
});

The thing is, I'm redirecting from '/login' to '/dashboard' but if I auth guard the dashboard, it immediately sends the user back to '/login' because the very first instant when the script runs, there is still no user registered. How can I make sure that I wait until the Supabase does it's thing, registers that there is a suer, before checking for a user and redirecting if none is found?

7 replies

NNuxt

•Created by roga on 3/21/2023 in #❓・help

How do I export TypeScript Types for use elsewhere in Nuxt

I'd like to be able to auto-import types I declare somewhere (anywhere) and use them anywhere in my Nuxt app. Kind of like I do with components. Is there a way to throw them into a types folder and import them with ~/types? Or better yet, have them auto import? I'm still new to TypeScript. It wasn't something I was taught in school. Just picking up what I can as I go, so if I'm ignoring something super basic that I should know about typescript in Nuxt, that's probably why.

5 replies

NNuxt

•Created by roga on 3/17/2023 in #❓・help

tRPC with `nuxt-trpc` - How do you set up tests?

1 replies

NNuxt

•Created by roga on 12/10/2022 in #❓・help

`color-mode` not initializing the theme to dark.

The value of color-mode is clearly "dark" on load. My light/dark toggler can tell that the theme is dark. However, the dark theme is not being applied to the page no matter what I do. Thoughts?

<!-- App.vue -->
<script setup lang="ts">
const colorMode = useColorMode();
colorMode.value = "dark";
</script>

<template>
  <div class="w-[100vw] h-[100vh]" :class="colorMode">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- App.vue -->
<script setup lang="ts">
const colorMode = useColorMode();
colorMode.value = "dark";
</script>

<template>
  <div class="w-[100vw] h-[100vh]" :class="colorMode">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  title: 'EzEval | Simple Project Evaluation Tools For Window Cleaners',
  modules: [
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    'nuxt-icon'
  ],
  runtimeConfig: {
    // apiSecret: '123',
    public: {
      apiBase: '/api'
    }
  },
  colorMode: {
    preference: 'dark', // default value of $colorMode.preference
    fallback: 'dark', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '-mode',
    storageKey: 'nuxt-color-mode'
  }
});

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  title: 'EzEval | Simple Project Evaluation Tools For Window Cleaners',
  modules: [
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    'nuxt-icon'
  ],
  runtimeConfig: {
    // apiSecret: '123',
    public: {
      apiBase: '/api'
    }
  },
  colorMode: {
    preference: 'dark', // default value of $colorMode.preference
    fallback: 'dark', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '-mode',
    storageKey: 'nuxt-color-mode'
  }
});

3 replies

Gaming

Programming