lav Posts - Answer Overflow

lav

Explore posts from servers

•Created by lav on 8/9/2024 in #❓・help

Http Only Cookie Access in SSR

Hello, I was wondering if it is possible to access http only cookie because I need to verify if my user is logged in and when ssr it says undefined:

export default defineEventHandler((event) => {
  const accessToken = getCookie(event, 'accessToken');
  const refreshToken = getCookie(event, 'refreshToken');

  if (!accessToken || !refreshToken) {
    console.log(accessToken, refreshToken); // goes here on ssr
    return {
      status: 'fail',
      message: 'Not signed in',
    };
  }

  try {
    const { userId } = verifyAccessToken(refreshToken);
    return { status: 'success', data: { userId } };
  } catch (error) {
    // Invalid access token
  }

  console.log('testing2');
  try {
    const { userId } = verifyRefreshToken(refreshToken);

    console.log('id', userId);

    setTokenCookie(event, accessToken, refreshToken);
    console.log('testing3');
    return { status: 'success', data: { userId } };
  } catch (error) {
    // Invalid refresh token
  }

  return {
    status: 'fail',
    message: 'Not signed in',
  };
});

export default defineEventHandler((event) => {
  const accessToken = getCookie(event, 'accessToken');
  const refreshToken = getCookie(event, 'refreshToken');

  if (!accessToken || !refreshToken) {
    console.log(accessToken, refreshToken); // goes here on ssr
    return {
      status: 'fail',
      message: 'Not signed in',
    };
  }

  try {
    const { userId } = verifyAccessToken(refreshToken);
    return { status: 'success', data: { userId } };
  } catch (error) {
    // Invalid access token
  }

  console.log('testing2');
  try {
    const { userId } = verifyRefreshToken(refreshToken);

    console.log('id', userId);

    setTokenCookie(event, accessToken, refreshToken);
    console.log('testing3');
    return { status: 'success', data: { userId } };
  } catch (error) {
    // Invalid refresh token
  }

  return {
    status: 'fail',
    message: 'Not signed in',
  };
});

5 replies

NNuxt

•Created by lav on 8/2/2024 in #❓・help

Client-Side Middleware

Hello, I was wondering if it is possible to have a middleware runs only client-side and redirect if something is not set for example in local storage, etc.

export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;

  if (to.path === '/test') {
    return navigateTo('/');
  }
});

export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;

  if (to.path === '/test') {
    return navigateTo('/');
  }
});

Right now I am doing this test and I return if it is server let's say I have to access local storage, but I still see the test page beign render and after it redirects is there a way to fix this? Thanks!

1 replies

NNuxt

•Created by lav on 8/1/2024 in #❓・help

Middleare for Auth

Hello, I was wondering what is the best way to verify if user is logged in before showing route, I am doing a basic test right now via localStorage variable in real life I would have my state in local storage or global store saying i am logged in with an http cookie.

export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;

  console.log(localStorage.getItem('loggedIn'));

  if (localStorage.getItem('loggedIn') !== 'true') {
    return navigateTo('/sign-in');
  }
});

export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;

  console.log(localStorage.getItem('loggedIn'));

  if (localStorage.getItem('loggedIn') !== 'true') {
    return navigateTo('/sign-in');
  }
});

Is there a way so the user is not even able to see the other page before the redirect?

21 replies

NNuxt

•Created by lav on 7/26/2024 in #❓・help

[useAsyncData] Component is already mounted, please use $fetch instead. See

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

Why do I have component already mounted? I want to use useAsyncData, to get the status to see if it is pending or success to render a loading state, how can I? I've use useAsyncData in my composables that I directly call in my setup, do I have to make my own loading and use $fetch directly since useAsyncData needs to be call in the setup? Thanks!

3 replies

NNuxt

•Created by lav on 7/26/2024 in #❓・help

Shadcn Library

Is there any library build on top of shadcn that works with vue? https://awesome-shadcn-ui.vercel.app/ I use shadcn-vue but I've seen beautiful stuff from aceternity UI for example with nice background effect and stuff, lemme know if you know this for vue. ty

1 replies

NNuxt

•Created by lav on 7/15/2024 in #❓・help

UseState with a state coming from a db

Hello, I've issue with reactive state for useState, I fetch players from a DB and place them into the global state, but the components getting the global state are not updating to get the version that is coming from client side rendering when i load the page from another page.

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

export function useRetrievePlayers() {
  const { data } = useFetch('/api/baseball/retrieve-players');

  const players = computed(() => {
    console.log('data', data.value);
    if (!data.value) {
      return [];
    }

    return data.value.players;
  });

  return players;
}

This is my composables that I use in parent:

const players = useRetrievePlayers();
  useState('players', () => players);

const players = useRetrievePlayers();
  useState('players', () => players);

I've tried using my useState in my computed prop it didnt work either. I retrieve it like so in child:

 const { value: players } = useState('players');

 const { value: players } = useState('players');

I am pretty new to vue/nuxt sorry. I do not know if this is a good way to use the global store either Each component are children of each other so I could've done prop drilling or injection. I think it would be a better fit ig, but I wanna know if what I want to do is possible

10 replies

NNuxt

•Created by lav on 7/12/2024 in #❓・help

State not changing when using a composables

Hello, my component was not updating when I changed player id using a composables when I placed this directly in component it was working but as composables it wasn't: import { ref, computed } from 'vue'; import { throws } from '~/data/baseball'; export function usePlayerData(players, playerId) { const selectedPlayer = computed(() => { if (playerId === null) { return null; } return players.find((player) => player.id == playerId); }); const selectedThrows = computed(() => { if (selectedPlayer.value === null) { return null; } return throws.filter((shot) => shot.player_id === selectedPlayer.value.id); }); return { selectedPlayer, selectedThrows }; } So this is now my composables and in my component: const props = defineProps({ playerId: { required: true, }, }); const { value: players } = useState('players'); const { selectedPlayer, selectedThrows } = usePlayerData( players, props.playerId ); This was not working anyone knows why? This works tho: Composables: import { ref, computed } from 'vue'; import { throws } from '~/data/baseball'; export function usePlayerData(players, playerId) { const selectedPlayer = computed(() => { if (playerId.value === null) { return null; } return players.find((player) => player.id == playerId.value); }); const selectedThrows = computed(() => { if (selectedPlayer.value === null) { return null; } return throws.filter((shot) => shot.player_id === selectedPlayer.value.id); }); return { selectedPlayer, selectedThrows }; } Component: const props = defineProps({ playerId: { required: true, }, }); const reactivePlayerId = ref(props.playerId); watch( () => props.playerId, (newPlayerId) => { reactivePlayerId.value = newPlayerId; } ); const { selectedPlayer, selectedThrows } = usePlayerData( players, reactivePlayerId ); I used a watch for my ref

13 replies

NNuxt

•Created by lav on 6/8/2024 in #❓・help

Repository patern backend & disadvantage backend in another directory

Hello, I was wondering if it is possible to inject a class instance in my backend. I would like to make the repository pattern and basically inject my class like we do in the frontend but in the backend. I could not figure out so if if anyone know, please tell me. Also, is there a disadvantage of moving the backend to another project using express or something at the place of using server directory?

7 replies

Gaming

Programming