401 Unauthorized when I query the same url more then once without a page request

[FWORDIE]

I am trying to do call for data from my CMS with the same Token in two different places, a component(Header) and a NuxtPage(Body). One page load, both useAsyncData calls work and the page works as expected. However, if I change the NuxtPage with a NuxtLink, and hence need to fetch new data for that page, I get a '401 Unauthorized' Error from my CMS (datoCMS). I am using the refreshnuxtdata to do that data refresh and it seems like that function is not sending the token?

This seems like the most relevant code but let me know if you need more information

const { data } = await useAsyncData("allworkGet", () => GqlLaunches());
const refresh = () => refreshNuxtData('allworkGet')

---

Things I tried

Didn't Work, even though GQL_TOKEN is in .env

function refreshFunc(){
    const config = useRuntimeConfig();
    console.log('URL:',config.GQL_HOST);
    // logs the URL
    console.log('URL:',config.GQL_TOKEN);
    // logs undefined
    useGqlToken(config.GQL_TOKEN);
    refreshNuxtData('allworkGet');
}

const refresh = () => refreshFunc()

Did work but seems to be a bad solution to have to add my token by hand

function refreshFunc(){

    useGqlToken('my_tokens_string');
    refreshNuxtData('allworkGet');
}

[FWORDIE]

also, sorry for the second issue in 2 days. Thanks for fixing the first one so fast

[Diizzayy]

This behavior may have to be revised but currently, to prevent secret tokens from leaking to clients, any tokens added via runtimeConfig or environment variables are only present on serverside. More information here

also, sorry for the second issue in 2 days. Thanks for fixing the first one so fast

No problem at all, looking forward to your continued feedback on the module.

[FWORDIE]

Ok, and sorry for being dumb, quick question. How come the first time it requests the data it is server side and the refresh request is client side, even though they are both in my <script setup>?

[Diizzayy]

Ok, and sorry for being dumb, quick question

No need to apologize.

In web apps which feature server side rendering, the first load along with it's requests happen on the server, where as subsequent reloads after the initial load happen within the browser.

[FWORDIE]

Thanks, v useful.

One more... Is there any way for me to get those subsequent requests sent from the server?

[Diizzayy]

There may be merit in allowing the token to live authentication token to live client, though I'd developers would need to be made aware of the possible risk of exposing their secret tokens.

so perhaps I can implement a retainToken: true flag to the configuration that allows the token to be passed along for those use cases.

[Diizzayy]

One more... Is there any way for me to get those subsequent requests sent from the server?

@FWORDIE perhaps using an api route to proxy the requests to the secure API.

The api route would have access to the auth token, hence the response can be made there then passed back to the client

[FWORDIE]

@FWORDIE The solution would be to use an api route to proxy the requests to the secure API.

Thanks v much, ill go investigate

[Diizzayy]

@FWORDIE I actually wouldn't recommend it, and you also won't be able to utilize the Gql functions generated by this module in api routes.

You can reach out to me on discord @Diizzayy#1964, and perhaps I can better understand your use case