feat: Add ability to set auth header in admin api request

[sdmcraft]

Test URLs:

• Before: https://main--helix-labs-website--adobe.aem.live/tools/admin-edit/index.html
• After: https://headers-support--helix-labs-website--sdmcraft.aem.live/tools/admin-edit/index.html

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/tools/admin-edit/index.html
🖥️	/tools/admin-edit/index.html

[sdmcraft]

@davidnuescheler , @fkakatie , I am using the admin-edit tool for managing configs of few Helix5 sites I am working on. It works great but one thing I miss is the inability to pass auth token header. Proposing this PR to add support for the same. Can you please review?

[fkakatie]

are these part of the form submission? shouldn't they be inside the form, not after it (and the submit button)?

[sdmcraft]

They are part of the form submission and get appended to the headers. There are 2 forms on this page - admin form and the body form, and since the headers get sent on submission on either of them, associating them with one particular form did not seem correct so I kept them out of both.

[sdmcraft]

@fkakatie , I don't have merge rights in the repo. Could you please help in getting this merged?

[davidnuescheler]

the auth token should be added via sidekick, so i don't think that this is the right way of doing this... i think currently it is probably hard to discover, but you should be able to just log into a sidekick (on .page or .live of the corresponding project) and auth will be set automatically for you.

[sdmcraft]

the auth token should be added via sidekick, so i don't think that this is the right way of doing this... i think currently it is probably hard to discover, but you should be able to just log into a sidekick (on .page or .live of the corresponding project) and auth will be set automatically for you.

Thanks @davidnuescheler . I am trying to figure out how to get the access token available from the sidekick login. Meanwhile if you have some guidance on how to do that, please let me know.

[dylandepass]

@sdmcraft As David alluded to, the Sidekick will handle this for you. So there is no need to directly access the token so long as you are logged into the sidekick on same org you are trying to make admin request to.

[sdmcraft]

so long as you are logged into the sidekick on same org you are trying to make admin request to.

@dylandepass likely I am missing something obvious here.
Let's say I am on https://main--helix-labs-website--adobe.aem.live/tools/admin-edit/index.html and want to invoke api for OrgA. I open up the sidekick and login. In the login flow, I am not presented with the option anywhere to login to OrgA, it just takes me through the login flow. So how do I ensure that I am logged in to orgA via the sidekick while I am on the page https://main--helix-labs-website--adobe.aem.live/tools/admin-edit/index.html

Ok, so looks like here's the flow that works:

1. Open up the site's aem.page or aem.live url in a new tab.
2. Open up the sidekick in it and login.
3. Or instead of Steps 1 & 2 above, directly login to the org via https://admin.hlx.page/login/org/site/main .
4. This is to ensure that you are logged in the same org for which you'd be invoking the admin api.
5. Now admin api requests made from the admin tool to the same org in which you logged in the previous steps, get the auth header.

[sdmcraft]

i think currently it is probably hard to discover, but you should be able to just log into a sidekick (on .page or .live of the corresponding project) and auth will be set automatically for you.

For better discoverability of the flow to add auth header, I can add a "Login" button on the page somewhere. When clicked, the user is prompted to login via https://admin.hlx.page/login/org/site/main . Post this admin api requests from the admin tool would automatically get the auth header added (and not be required to be explicitly added as originally proposed in this PR). @davidnuescheler do you think this would be useful?

[amol-anand]

i think currently it is probably hard to discover, but you should be able to just log into a sidekick (on .page or .live of the corresponding project) and auth will be set automatically for you.

yes, we have an error message in the log viewer that links them to their project asking them to sign into the sidekick.

For better discoverability of the flow to add auth header, I can add a "Login" button on the page somewhere. When clicked, the user is prompted to login via https://admin.hlx.page/login/org/site/main .

Just logging in to admin.hlx.page might not be enough, logging into the sidekick is what would work.

[sdmcraft]

yes, we have an error message in the log viewer that links them to their project asking them to sign into the sidekick.

@amol-anand , where can I see the log viewer? Currently, the tool only reports as below