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
also if I try to put client only here 
if (import.meta.client) return;

  const { isLoggedIn, checkAccessToken } = useAuth();

  if (to.path === '/' || to.path === '/sign-in') {
    if (to.path === '/sign-in' && isLoggedIn.value) {
      return navigateTo('/dashboard');
    }
    return;
  }
if (import.meta.client) return;

  const { isLoggedIn, checkAccessToken } = useAuth();

  if (to.path === '/' || to.path === '/sign-in') {
    if (to.path === '/sign-in' && isLoggedIn.value) {
      return navigateTo('/dashboard');
    }
    return;
  }
And I call my backend in which I set new cookie via setCookie they won't be set, does anyone know why? 
 const cookieAccessToken = getCookie(event, 'accessToken');
  const cookieRefreshToken = getCookie(event, 'refreshToken');
  const config = useRuntimeConfig();

  setCookie(event, 'accessToken', '', {
    httpOnly: true,
    sameSite: 'lax',
    path: '/',
    secure: config.env === 'production',
    maxAge: 60 * 60 * 24 * 30,
    domain: config.domain || '',
  });
 const cookieAccessToken = getCookie(event, 'accessToken');
  const cookieRefreshToken = getCookie(event, 'refreshToken');
  const config = useRuntimeConfig();

  setCookie(event, 'accessToken', '', {
    httpOnly: true,
    sameSite: 'lax',
    path: '/',
    secure: config.env === 'production',
    maxAge: 60 * 60 * 24 * 30,
    domain: config.domain || '',
  });
Basic example, this won't be set if this call to this endpoint is done ssr
5 replies
NNuxt
Created by lav on 8/9/2024 in #❓・help
Http Only Cookie Access in SSR
      headers: import.meta.server
        ? {
            cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`,
          }
        : {},
      headers: import.meta.server
        ? {
            cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`,
          }
        : {},
5 replies
NNuxt
Created by lav on 8/9/2024 in #❓・help
Http Only Cookie Access in SSR
I only do so if we are running this on the server
5 replies
NNuxt
Created by lav on 8/9/2024 in #❓・help
Http Only Cookie Access in SSR
should I pass in my frontend middleware where. Icall this endpoint pass cookie via headers? I use http only cookie: 
  const accessToken = useCookie('accessToken');
  const refreshToken = useCookie('refreshToken');
  console.log('middleware', accessToken.value, refreshToken.value);
  async function checkAccessToken() {
    const data = await $fetch('/api/auth/verify-token', {
      credentials: 'include',
      headers: {
        cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`, // should I do that to fix it/
      },
    });
  const accessToken = useCookie('accessToken');
  const refreshToken = useCookie('refreshToken');
  console.log('middleware', accessToken.value, refreshToken.value);
  async function checkAccessToken() {
    const data = await $fetch('/api/auth/verify-token', {
      credentials: 'include',
      headers: {
        cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`, // should I do that to fix it/
      },
    });
5 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
Since it is stack blitz I can't change the url in the search but I think via csr, before the redirect we will be able to see the page we want to access for a quick sec no?
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
@oneeach any idea?
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
w/ ssr it works perfect, but I have no clue for client side redirect, that would be my question now since it can happen in the future i have this to do 
export default defineNuxtRouteMiddleware((to, from) => {
  const isLoggedIn = useState('isLoggedIn');

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

  if (to.path === '/sign-in' && isLoggedIn.value) {
    return navigateTo('/dashboard');
  } else if (to.path === '/sign-in' && !isLoggedIn.value) {
    return;
  }

  if (!isLoggedIn.value) {
    return navigateTo('/sign-in');
  }
});
export default defineNuxtRouteMiddleware((to, from) => {
  const isLoggedIn = useState('isLoggedIn');

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

  if (to.path === '/sign-in' && isLoggedIn.value) {
    return navigateTo('/dashboard');
  } else if (to.path === '/sign-in' && !isLoggedIn.value) {
    return;
  }

  if (!isLoggedIn.value) {
    return navigateTo('/sign-in');
  }
});
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
Should I handle the login state in the global store at the place so I can use the middleware server side? If so, is there also a way client side for redirect without having console error?
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
I still see the page dashboard and have the error on console above
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
https://stackblitz.com/edit/github-rwecso?file=middleware%2Fauth.js,pages%2Ftest.vue
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
but I see the dashboard on page load before the redirect
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
Because the server does not render the same as client, that's normal bcs I am looking in local storage if he is logged in
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
I removed it from global and now I have hydration error: 
runtime-core.esm-bun…er.js?v=3826bf5e:47 [Vue warn]: Hydration node mismatch:
- rendered on server: 
 (text) 
- expected on client: div 
  at <SignIn onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/sign-in" vnode= 
{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}
 route= 
{fullPath: '/sign-in', hash: '', query: {…}, name: 'sign-in', path: '/sign-in', …}
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>
runtime-core.esm-bun….js?v=3826bf5e:3730 Hydration completed but contains mismatches.
runtime-core.esm-bun…er.js?v=3826bf5e:47 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>
runtime-dom.esm-bundler.js?v=3826bf5e:15 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (
runtime-core.esm-bun…er.js?v=3826bf5e:47 [Vue warn]: Hydration node mismatch:
- rendered on server: 
 (text) 
- expected on client: div 
  at <SignIn onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/sign-in" vnode= 
{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}
 route= 
{fullPath: '/sign-in', hash: '', query: {…}, name: 'sign-in', path: '/sign-in', …}
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>
runtime-core.esm-bun….js?v=3826bf5e:3730 Hydration completed but contains mismatches.
runtime-core.esm-bun…er.js?v=3826bf5e:47 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>
runtime-dom.esm-bundler.js?v=3826bf5e:15 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
if I put this 
export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;
  console.log('here');

  // if (!localStorage.getItem('loggedIn')) {
  //   console.log('here');
  //   navigateTo('/');
  // }
  return navigateTo('/sign-in');
});
export default defineNuxtRouteMiddleware((to, from) => {
  if (import.meta.server) return;
  console.log('here');

  // if (!localStorage.getItem('loggedIn')) {
  //   console.log('here');
  //   navigateTo('/');
  // }
  return navigateTo('/sign-in');
});
With global I have infinite redirect
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
throwing an exception because the user went on a route not auth is pretty bad imo, cuz it crash the flow
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
@oneeach
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
export default defineNuxtRouteMiddleware((to, from) => {
  if (from.path === '/' || from.path === '/sign-in') return;

  if (import.meta.server) return;

  if (!localStorage.getItem('loggedIn')) {
    navigateTo('/sign-in');
    throw createError({ statusCode: 403, statusMessage: 'Unauthorized' });
  }
});
export default defineNuxtRouteMiddleware((to, from) => {
  if (from.path === '/' || from.path === '/sign-in') return;

  if (import.meta.server) return;

  if (!localStorage.getItem('loggedIn')) {
    navigateTo('/sign-in');
    throw createError({ statusCode: 403, statusMessage: 'Unauthorized' });
  }
});
I did this at the place @oneeach
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
If you go with the global method, you would then need to specify which routes are accessible to users not logged in with something like this: definePageMeta({ auth: false, }) This does not work, I do not see it in the doc
21 replies
NNuxt
Created by lav on 8/1/2024 in #❓・help
Middleare for Auth
@oneeach So this is the way, I need to disable server side check since this is for local storage too. Is it normal that I can see the page a bit render before the navigate back to login> Thanks!
21 replies
NNuxt
Created by lav on 7/26/2024 in #❓・help
[useAsyncData] Component is already mounted, please use $fetch instead. See
thanks @Cake
3 replies