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)