Nuxt•17mo ago

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',
  };
});

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',
  };
});

lpOP•8/9/24, 1:48 PM

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/
      },
    });

lpOP•8/9/24, 1:55 PM

I only do so if we are running this on the server

lpOP•8/9/24, 1:58 PM

      headers: import.meta.server
        ? {
            cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`,
          }
        : {},

      headers: import.meta.server
        ? {
            cookie: `accessToken=${accessToken.value}; refreshToken=${refreshToken.value}`,
          }
        : {},

lpOP•8/9/24, 2:30 PM

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

Http Only Cookie Access in SSR

Similar Threads

Similar Threads

Similar Threads