lav
lav
Explore posts from servers
NNuxtRRailwayTTCTheo's Typesafe Cult
PostsComments
NNuxt
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
RRailway
Created by lav on 11/1/2023 in #✋｜help
Railway hobby plan
Hello, I just got hobby's plan. I was wondering if the 5$ took would be taken every months or it is just taken because I started the plan? Also, is there a way to put a limit of 5$ so I never go higher than 5$ and stay in the hobby plan if anything goes bad?
19 replies
TTCTheo's Typesafe Cult
Created by lav on 5/8/2023 in #questions
What are the down side of using docker?
I was wondering the down side of using docker, I've never heard theo opinion on docker. I would love to hear y'all opinions on it. I am brand new to docker.
12 replies
RRailway
Created by lav on 2/12/2023 in #✋｜help
Starter Plan, Question
Hello guys, I just started using Railway and I have the starter plan which is 500 hours. Will my hours go down even if I do not interact with my database? If so, how can I turn off my database so when I do not use it, it doesn't take hours? Thank you!
10 replies