How to implement Wordpress Application Password Authentication in Javascript async fetch?

Question

I'm trying to setup a website using Wordpress as Headless CMS, using the built-in REST API. Using NuxtJS to fetch the data. Now I want to restrict API access so I enabled/created Wordpress Application Password Authentication.

However, I can not seem to find detailed information on how the URL should be assembled with authentication parameters to fetch data from API endpoint.

Credentials have to be added to the URL that's being fetched?

async asyncData ({ $config: { apiUrl, apiUser, apiPassword } }) {
    try {
        const products = await (await fetch(`${apiUrl}/producten`)).json()

        return {
            products
        }
    }
    catch (error) {
        console.log(error)
    }
},

apiUrl, apiUser, apiPassword are currently in nuxtjs.config.js, under publicRuntimeConfig. But 1) they should come in privateRuntimeConfig?

And 2) getting following as return (which is the correct response from the WP Rest API, because I need to pass auth-credentials somewhere, somehow...)

{ "code": "rest_not_logged_in", "message": "You are not currently logged in.", "data": { "status": 401 } }

Answer 1

Solved by adding options to fetch;

const fetchHeaderOptions = {
  cache: 'no-cache',
  method: 'GET',
  credentials: 'omit', //To instead ensure browsers don't include credentials in the request
  mode: 'no-cors',
  headers: {
    'Authorization': 'Basic ' + encode(`${apiUser}` + ":" + `${apiPassword}`),
    'Content-Type': 'application/json; charset=UTF-8; application/x-www-form-urlencoded',
  },
}

const products = await (await fetch(`${apiUrl}/products`, fetchHeaderOptions)).json()