How to implement Faust.js Basic Http Authentication

Question

I'm implementing Headless Wordpress using Faust.js and ran into a problem. The current Wordpress backend requires basic http authentication, protected by base64-encoded credentials, before being able to access the backend site contents and I'm running the frontend with Faust.js. On a local environment, there is no need to implement adding the credentials to the header but on production (because the http authentication exists), I can't retrieve the post content as well as other assets such as images, etc. from the Wordpress backend.

I was doing some research into how to add the http authentication but so far I've only found limited examples of how to implement basic authentication to do this. One is with typescript (https://github.com/wpengine/faustjs/issues/845) but since I currently have the project on js code, it seems I would need to convert a lot of the files into typescript (maybe including the packages included in node_modules which I don't want to break if I did the conversion). I want to find a way to add this http basic authentication as part of the request header on my Faust.js frontend project without converting to js.

On the example, I've tried implementing this with the ts example, while using js code, but I'm getting all sorts of errors, when building it. Here's the code:

import { IncomingMessage } from 'http';
import { getClient, logQueries } from '@faustjs/next';

import {
   generatedSchema,
   scalarsEnumsHash,
   GeneratedSchema,
   SchemaObjectTypes,
   SchemaObjectTypesNames,
} from './schema.generated';

export const client = getClient({
   GeneratedSchema,
   SchemaObjectTypesNames,
   SchemaObjectTypes,
   schema: generatedSchema,
   scalarsEnumsHash,
   applyRequestContext: async (url, init) => {
        const newInit = {
            ...init,
            headers: {
                ...init.headers,
                authorization: 'Basic YmxhbmtkZXhzaXRzdGc6OTMzODVlNjY=',
            },
        };

        return { url, init: newInit };
    },
});

export function serverClient(req) {
   return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({
     schema: generatedSchema,
     scalarsEnumsHash,
     context: req,
   });
}

if (process.env.NODE_ENV === 'development') {
  logQueries(client);
}

export * from './schema.generated';

The errors I'm getting when building it are among the following:

1:1 Error: There should be at least one empty line between import groups import/order
8:3 Error: GeneratedSchema not found in './schema.generated' import/named
9:3 Error: SchemaObjectTypes not found in './schema.generated' import/named
10:3 Error: SchemaObjectTypesNames not found in './schema.generated' import/named

How to implement Faust.js Basic Http Authentication

0 Answers0