Hide token on server side with NITRO and NUXT3 for security purpose

Question

I am using fetch to call backend API, th eprobelm is the backend security is a token, for security purpose we can not expose this token on public configuration.

I wanted to know if it is possible to put the token on server side params and then when we call fetch params is not visible in chrome debug and use only on NITRO following this text

Nitro allows 'direct' calling of routes via the globally-available $fetch helper. This will make an API call to the server if run on the browser, but will directly call the relevant function if run on the server, saving an additional API call. $fetch API is using my fetch, with key features including:

This is my code

    let recipientWebDTO = {};
    recipientWebDTO.email = this.form.email;
    recipientWebDTO.subscriptions = [{
        "mailingListUnid": useRuntimeConfig().UNID
    }];

    const { status } = await $fetch
        .raw(useRuntimeConfig().public.REST_API, {
            method: "POST",
            body: recipientWebDTO,
            headers: {
                "Content-Type": "application/json",
                Authorization: useRuntimeConfig().TOKEN,
            },
        })
        .then((response) => ({
            status: response.status,
        }))
        .catch((error) => ({
            status: error?.response?.status || 500,
        }));

And my config file

export default defineNuxtConfig({
    runtimeConfig: {
        UNID: '58',
        COMPANY_UNID: '3',
        TOKEN: '78f77',
        public: {
            REST_API: process.env.REST_API || 'http://localhost:8080/rest/mailinglist/register/v1'
        },
    },
    css: ["@/assets/_main.scss"],
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/_colors.scss" as *;'
                }
            }
        }
    }
})

I want UNID, COMPANY_UNID, TOKEN to be visible only on server side, here it is just undefined, have I to create a middleware to handle it ? If yes, how I can use the same project to make it work ?

Do you wish to call your API on the client or just only on the server? — Duannx, Oct 27 '22 at 02:04
in fact i made client application , and i want to call my java backend but hide the token cause of security so i know i have to use like middleware, but maybe with nitro an direct api call something is possible ? — cyril, Oct 27 '22 at 05:07
There is no way to hide the token on the client side because a simple reason. If your API needs a token for authentication, the token needs to exist in the request and everyone can access it to be able to make API call. You should answer the question that if your API is for public use and doesn't require the user to log in, why do you need the authentication at all? If your API requires the user to log in, you don't need to hide anything because the login process is already protecting it. — Duannx, Oct 27 '22 at 06:52
thank you very much i finally manage to make it work with server api offered by nuxt3 and nitro,do you know something about nuxtjs3, because your answer seems to say no ^^ @Duannx i will share the answer after you will see, first it is a public fronted with mail subscription (working only with a token) — cyril, Oct 27 '22 at 08:58

score 0 · Answer 1 · answered Oct 27 '22 at 13:14

To manage to do it i added a server part as it is explained here:

Server api nuxtjs3 documentation

I created a directory server/api then my ts file with my proxy call where i use my token. Then in my vue i call my api. it means on browser the server file is invisible, and parameters and token nt accessibles.

in my vue:

const { status } = await $fetch.raw( '/api/newsletter', { method: "POST", body: this.form.email } )

in my server file:

export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig();
const subscriber = await readBody(event);
console.log("url used for rest call" + runtimeConfig.REST_API);
let recipientWebDTO = {
    email: subscriber,
    subscriptions: [{
        "mailingListUnid": runtimeConfig.UNID
    }]
};
const status = await $fetch.raw(runtimeConfig.REST_API, {
    method: "POST",
    body: recipientWebDTO,
    headers: {
        Authorization: runtimeConfig.TOKEN,
    },
}).then((response) => ({
    status: response.status,
}))
    .catch((error) => ({
        status: error?.response?.status || 500,
    }));
return status;

})

The only complexity i have is i wanted to get a specific status but i always have the api call status, is 200 i wanted to simply forward the result but in NUXTJS is in WIP.

Hide token on server side with NITRO and NUXT3 for security purpose

1 Answers1