How to implement Faust.js Basic Http Authentication

[midnitedev101]

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 (#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 do I implement this feature properly?

[theodesp]

Hey @midnitedev101. I'm wondering if you did run npm run generate as it looks like the errors are related to missing generated types from the GQty client?

[midnitedev101]

Hi @theodesp, thanks for the tip. Running the command npm run generate shows the following:

@faustjs/[email protected] generate
gqty generate

Using "http://localhost:10004/graphql" to generate schema...
[Error: connect ECONNREFUSED ::1:10004] {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 10004
}

[theodesp]

Hey @midnitedev101 this error means that your GraphQL endpoint is not accessible. Did you enable WPGraphQL introspection?

https://www.wpgraphql.com/docs/security#introspection-disabled-by-default

[midnitedev101]

I checked the docs and I currently have WPGraphQL introspection enabled on the site. GraphQL Debug Mode was checked initially which makes it force-enabled according to the settings. I've also tried enabling it by itself, restarting the site and running the command again but I'm still getting the same results. If it helps any further, I'm using an OS X device v13.1.

[theodesp]

@midnitedev101 it looks like GQty tries to connect to http://localhost:10004/graphql and fails. It might be an unusual case. Maybe try the following:

Check if http://localhost:10004/graphql is accessible. For example in my site:

❯ curl http://mysite.local/graphql\?query=%7B__typename%7D

{"data":{"__typename":"RootQuery"},"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}],"tracing":{"version":1,"startTime":1674122654.4035621,"endTime":1674122654.442137,"duration":38574,"execution":{"resolvers":[]}}}}%

[midnitedev101]

Using http://localhost:10004/graphql?query=%7B__typename%7D url on web browser shows me these results as well as the curl command:

{"data":{"__typename":"RootQuery"},"extensions":{"debug":[],"queryAnalyzer":{"keys":"<key_value_scrubbed> graphql:Query","keysLength":78,"keysCount":2,"skippedKeys":"","skippedKeysSize":0,"skippedKeysCount":0,"skippedTypes":[]}}}%

[theodesp]

Hey @midnitedev101 it may be worth it reaching out to GQty project maintainers is there is something wrong here outside the scope of Faust.js.

gqty-dev/gqty#1446

[midnitedev101]

Thanks @theodesp for opening that discussion. I appreciate the help and I'll track it on that end as well.

[midnitedev101]

I tried out a solution by modifying the index.js file in the client folder without the generate command (https://stackoverflow.com/questions/75115469/how-to-implement-faust-js-basic-http-authentication/75116175#75116175). I updated the production code and so far the text, title and links within the posts page and on the home page are showing. The images are still missing though and the search form auto-complete gives an error after putting in text like below:

Access to fetch at 'https://<backend_url>/graphql' from origin 'https://<frontend_url>.js.wpenginepowered.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I did look into what is a limitation for CORS and it seems it doesn't play well with basic http authentication. Since current backend production environment requires this, then I'll just have to live with the fact that there are some assets that I won't be able to reliably integrate them on the front-end.

[monahmad]

// auth.js
import { createStore } from 'faust';

const auth = createStore({
state: {
user: null,
token: null,
},
actions: {
login({ commit }, { username, password }) {
// Implement your authentication logic here
// This is where you make an HTTP request to your server
// and obtain the user's data and token
// For simplicity, let's assume your server responds with user and token
const user = { username, role: 'user' };
const token = 'your_token_here';
commit('setUser', { user, token });
},
logout({ commit }) {
commit('setUser', { user: null, token: null });
},
},
mutations: {
setUser(state, { user, token }) {
state.user = user;
state.token = token;
},
},
});

export default auth;