hackal Posts - Answer Overflow

hackal

•Created by hackal on 9/19/2024 in #❓・help

Automatic typing of plugins

I have copied 1:1 this https://nuxt.com/docs/guide/recipes/custom-usefetch and I noticed that useNuxtApp().$api is not typed and doing cmd+click will send me to node_modules/nuxt/dist/app/nuxt.d.ts -> interface _NuxtApp. How/where can I check the auto generated types for plugins? I want to see if the issue is with my language server or the type generation.

1 replies

NNuxt

•Created by hackal on 7/30/2024 in #❓・help

Hard time with getting cookies from server to browser

Hi, I have my own REST api with my own JWT+refresh token authentication. I have decided to have a proxy via nuxt server to my API and now i'm trying to implement the refresh token logic for auth. I have implemented simple proxy that also handles the refresh logic but I am having hard time saving the new credentials back to cookies from server to browser where they are stored originally. Am I missing something? Thanks for help. Simple example: app.vue

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

server/api/[...route].ts

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

2 replies

NNuxt

•Created by hackal on 4/25/2023 in #❓・help

Issue with Total Blocking Time in performance metrics in pagespeed

Hi, I'm trying to improve the score on pagespeed but I'm consistently getting Total Blocking Time with 10s+ (50s+ on mobile). https://pagespeed.web.dev/analysis/https-acreom-com/mgnzvfu4vc?form_factor=desktop Only thing it says it that I should minimize main thread work (which took 34seconds). The site is 99% static, with little bit of js for some interactivity. Thanks in advance for any help/suggestions. Hosted with netlify, nuxt version 3.4.2

3 replies

Gaming

Programming