Nuxt•5mo ago

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

1 Reply

hackalOP•5mo ago

Alternatively what is the best way to handle rolling your own custom API+auth with nuxt?

Gaming

Programming

Hard time with getting cookies from server to browser