patchamamma Comments - Answer Overflow

patchamamma

•Created by patchamamma on 10/11/2024 in #❓・help

Dynamic Subdomain Support in Nuxt3

@Alex I'm not planning to pre-render my project, but I did try it, and it works, as long as I’m not using dynamic data based on the subdomain. For example, if I try to return a 404 error when a vendor cannot be found, like this:

const {data, error} = await useFetch(`http://localhost:4000/vendor/${subdomain.value}`)
if (!data.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page not found' });
}

const {data, error} = await useFetch(`http://localhost:4000/vendor/${subdomain.value}`)
if (!data.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page not found' });
}

this will of course result in an error during the npx nuxi generate process.

4 replies

NNuxt

•Created by patchamamma on 10/11/2024 in #❓・help

Dynamic Subdomain Support in Nuxt3

I've fixed this problem by changing the (replace) path param name, example: .../:platformUrl should be .../:platformUrl()

path: i.path === "/platform/:platformUrl()" ? i.path.replace("/platform/:platformUrl()", "/") : i.path.replace("/platform/:platformUrl()/", "/"),

path: i.path === "/platform/:platformUrl()" ? i.path.replace("/platform/:platformUrl()", "/") : i.path.replace("/platform/:platformUrl()/", "/"),

4 replies

NNuxt

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

Nuxt Plugin using `useCookie` composable error.

Well of course I can fix this with just returning the authToken when calling the refreshTokenAction function. But I am just curious how the flow is working now in Nuxt, this is an aspect I'm having difficulty wrapping my head around.

7 replies

NNuxt

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

Nuxt Plugin using `useCookie` composable error.

Thanks a lot, I did manage to fix the composable problem (example below). Now I need to find out why the authToken.value is empty after a refreshCookie() 😂 probably again a SSR or browser thing, since the refreshToken is for the browser.

    export default defineNuxtPlugin((nuxtApp) => {

    const config = useRuntimeConfig()
    const store= useAuthStore()
    const authToken = useCookie('authToken');

    const $authFetch = $fetch.create({
        baseURL: config.public.apiBaseURL,
        onRequest: async function ({request, options, error}) {
            let userSession = authToken.value;

            if(!userSession?.token || (!userSession?.expiration || new Date(userSession.expiration) <= new Date())) {
                console.log("RETRIEVE A NEW TOKEN PLEASE:")
                const refreshed = await store.refreshTokenAction();
                if(!refreshed) throw new Error('Token refresh failed. Aborting request.');
            }
            // Retrieve again, I could use refreshCookie()
            refreshCookie('authToken');
            console.log('auth token from (refreshed) cookie:', authToken.value);

    export default defineNuxtPlugin((nuxtApp) => {

    const config = useRuntimeConfig()
    const store= useAuthStore()
    const authToken = useCookie('authToken');

    const $authFetch = $fetch.create({
        baseURL: config.public.apiBaseURL,
        onRequest: async function ({request, options, error}) {
            let userSession = authToken.value;

            if(!userSession?.token || (!userSession?.expiration || new Date(userSession.expiration) <= new Date())) {
                console.log("RETRIEVE A NEW TOKEN PLEASE:")
                const refreshed = await store.refreshTokenAction();
                if(!refreshed) throw new Error('Token refresh failed. Aborting request.');
            }
            // Retrieve again, I could use refreshCookie()
            refreshCookie('authToken');
            console.log('auth token from (refreshed) cookie:', authToken.value);

7 replies

NNuxt

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

Nuxt Plugin using `useCookie` composable error.

Some context: I am using a jwt auth endpoint on a custom nodeJS server, so I am not using the nuxt auth package or SSR functionality (server folder). When setting the ssr to false in the nuxt.config.ts this works perfectly fine. But of course I don't want to lose out on SSR in some pages/components.

7 replies

NNuxt

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

Nuxt Plugin using `useCookie` composable error.

Thanks for having a look. Sadly putting the useCookie to the top level like this did not fix the problem:

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const store = useAuthStore()

    // Function to ensure we have a valid token
    const ensureValidToken = async () => {
        const authTokenCookie = useCookie('authToken')
        let userSession = authTokenCookie.value

        if (!userSession?.token || (!userSession?.expiration || new Date(userSession.expiration) <= new Date())) {
            console.log("RETRIEVE A NEW TOKEN PLEASE:")
            const refreshed = await store.refreshTokenAction()
            if (!refreshed) {
                throw new Error('Token refresh failed.')
            }
            // Get the updated cookie value after refresh
            userSession = useCookie('authToken').value
        }

        return userSession.token
    }

    const $authFetch = $fetch.create({
        baseURL: config.public.apiBaseURL,
        async onRequest({ request, options }) {
            const token = await ensureValidToken()
            options.headers = {
                ...options.headers,
                Authorization: `Bearer ${token}`
            }
        },
        onRequestE.................

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const store = useAuthStore()

    // Function to ensure we have a valid token
    const ensureValidToken = async () => {
        const authTokenCookie = useCookie('authToken')
        let userSession = authTokenCookie.value

        if (!userSession?.token || (!userSession?.expiration || new Date(userSession.expiration) <= new Date())) {
            console.log("RETRIEVE A NEW TOKEN PLEASE:")
            const refreshed = await store.refreshTokenAction()
            if (!refreshed) {
                throw new Error('Token refresh failed.')
            }
            // Get the updated cookie value after refresh
            userSession = useCookie('authToken').value
        }

        return userSession.token
    }

    const $authFetch = $fetch.create({
        baseURL: config.public.apiBaseURL,
        async onRequest({ request, options }) {
            const token = await ensureValidToken()
            options.headers = {
                ...options.headers,
                Authorization: `Bearer ${token}`
            }
        },
        onRequestE.................

7 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

If somebody knows how I can stop this from silently failing without a try & catch please let me know 😁 I also tried the onRequestError or onResponseError.

9 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

thanks for the example, I've managed to fix my problem. I was retrieving a value that did not exist, so the useAuthFetch silently failed 😭

9 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

My useAuthFetch is just composable which sets a JWT token as the auth bearer token.

9 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

Thanks for reading my question, I also don't see a XHR request being made, except the data is not obtained. I am fetching (/vendor/me) something from my node.js server.

9 replies

Gaming

Programming