Auth - how to configure basic auth on all my calls

Hi everyone,
Iā€™m having a hard time trying to send authorization headers on every single fetch to my wordpress site (currently I only have to send basic auth). Iā€™m aware that thereā€™s at least two entries on this board that ask almost the same thing (see my list at the end).

Mandatory info (after running npx frontity info)

Binaries:

  • Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
  • npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

npmPackages:

  • @frontity/core: 1.11.1 => 1.11.1
  • @frontity/html2react: 1.6.2 => 1.6.2
  • @frontity/mars-theme: ./packages/mars-theme => 1.5.0
  • @frontity/tiny-router: 1.4.1 => 1.4.1
  • @frontity/wp-source: 1.11.2 => 1.11.2
  • frontity: 1.14.3 => 1.14.3

TL;DR version to reproduce my point:

1.- clone my repo from here (itā€™s same thing you get from running npx frontity create my-project but with an altered frontity.settining.js)
2.- go into the brand new folder and do a npm install
3.- go to node_modules/@frontity/wp-source/src/libraries/api.ts, on line 110, after this code const headers = auth ? { Authorization: auth } : {}; just add a console.log(ā€™==== HEADERS ====ā€™); console.log(headers); save the file. Yes Iā€™m super aware this is a really bad practice but please indulge me.
4.- run the project with npm run dev, after the browser opens, just hit refresh and watch the console.
5.- Skip the ā€œlong explanationā€ section and go directly to ā€œAlmost finishedā€

Long explanation version:

After reading a bunch of entries here (list at the bottom of this post), navigating the code and still scratching my head, I decided to create a project from scratch and add a bunch of auth entries on the frontity.settings.js file like so:

// File: https://github.com/sebastianpennino/-wp-frontity-poc-2/blob/main/frontity.settings.js
const settings = {
    "name": "wp-frontity-poc-2",
    "state": {
        "frontity": {
            "url": "https://test.frontity.org",
            "title": "Test Frontity Blog",
            "description": "WordPress installation for Frontity development",
            "options": {
                "auth": "test-auth-00-A",
                "headers": {
                    "auth": "test-auth-00-B",
                    "Authorization": "test-auth-00-C",
                },
            },
            "headers": {
                "auth": "test-auth-00-D",
                "Authorization": "test-auth-00-E",
            },
        },
        "options": {
            "auth": "test-auth-04",
        },
        "headers": {
            "Authorization": "test-auth-06",
        },
    },
    "packages": [
        {
            "name": "@frontity/mars-theme",
            "state": {
                 // ... this part is irrelevant leaving out the code here
            }
        },
        {
            "name": "@frontity/wp-source",
            "state": {
                "source": {
                    "url": "https://test.frontity.org",
                    "auth": "test-auth-01-A",
                    "headers": {
                        "auth": "test-auth-01-B",
                        "Authorization": "test-auth-01-C",
                    },
                },
                "wpSource": {
                    "auth": "test-auth-01-D",
                    "headers": {
                        "auth": "test-auth-01-E",
                        "Authorization": "test-auth-01-F",
                    },
                },
                "headers": {
                    "auth": "test-auth-01-G",
                    "Authorization": "test-auth-01-H",
                },
            }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
    ]
};

export default settings;

After not getting any authorization header on the receiving end I decided to actually check what was going on at code level, so I went to my node_modules/@frontity/wp-source/src/libraries/api.ts, line 110, after this code const headers = auth ? { Authorization: auth } : {}; just added two console logs
console.log(ā€™==== HEADERS ====ā€™);
console.log(headers);

Almost finished

After running the project with npm run dev, this is what I get
image

So in a nutshell, can someone explain to me whatā€™s the correct way to add authorization headers? Iā€™m missing something or barking the wrong tree trying to see headers on that specific line? (I just need to add the same headers on every single fetch).

I tried to make this as short as possible. I realize that maybe I missed the solution somewhere but I really need a person to tell me what Iā€™m doing wrong. Thanks in advance

As promised the list of things that I read prior to creating this post:

Edit: formatting and grammar.

Hi @sebastian

Welcome to the Frontity community. Great to see that youā€™re using Frontity for a project.

Sorry youā€™ve experienced problems with this. Weā€™re still working on our documentation for auth headers, but it should be ready soon.

Try adding the auth headers to the settings for the wp-source package like this:

const state = {
  source: {
    auth: "Basic YWFhOmJiYg",
  },
};

If you need more info then check out our draft docs in this PR.

Hi @mburridge, thanks for the quick response.

Sadly for me, even after removing all the others entries and just adding the auth property to the state.source of @frontity/wp-source package on my frontity.settings.js (see pic below)

image

it didnā€™t work (if you check my previous message, it was already there, look for ā€œtest-auth-01-Aā€).
Also after checking your PR, tried using an .env file with FRONTITY_SOURCE_AUTH="Basic 12345" and didnā€™t work either.

If I have time this week I will check the source code to see what is going on inside, after an initial quick investigation I see the ā€˜authā€™ with the proper value, on the fetch, init and afterSSR methods of actions.ts (node_modules\@frontity\wp-source\src\actions.ts) but when It gets to the get method of the api.ts (node_modules\@frontity\wp-source\src\libraries\api.ts) is already missing (undefined), maybe it needs to be defined on the init first?. Anyways as I said before, If I have time this week I will investigate further.

TL;DR version:
It didnā€™t work, but thanks anyway. Later this week will keep investigating.

I canā€™t find where the info gets dropped (from actions.ts ā€”> to api.ts) and I donā€™t have much time to keep investigating, so hereā€™s my proposed solution to the issue (Iā€™m aware Iā€™m not actually fixing the issue just using a workaround)

Basically I save the value on init:

And retrieve it as a default like so:

If someone wants to use this code on his/her project I used it locally by replacing @frontity/wp-source with my patched version, like so (picture: my package.json):

Hope this helps people stuck with the auth property.

Hi @sebastian

Thanks for this solution. If you thing that this fixes a bug or is a generic solution that other users will find useful then please raise an issue or PR in the frontity/frontity repo. Ideally package developers shouldnā€™t be hacking the core files.

@mburridge, well In my case I needed the auth on the first call and on all subsequent calls and this is definitely ā€œfixingā€ the issue for me (in a hacky way), but I donā€™t know for sure if this is an issue that any other developer experimented, thereā€™s a bunch of threads in this community regarding auth, and no one seems to be complaining about this issue (thatā€™s why I wanted confirmation).

As I said in my previous comment I still donā€™t know how the data doesnā€™t get from actions.ts ā€”> to api.ts, I will investigate further if I have the time and if I can find the problem (and understand it so I can defend my idea) I will definitely create a PR / issue on the repo itself.

Thanks again
(Edits: grammar, grammar, typo)