Replies: 1 comment 1 reply
-
|
You could try _hyperscript. <body _="on htmx:configRequest set detail.headers.authorization to getAuthToken()">
...
</body> |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
There's an |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello All:
Objective:
Implement a 100% HTMX solution for an authentication for a website that uses Basic Auth header (on the server side) but the request on the client side should take the UserID, Password and create a Basic Auth Header to send.
Detailed Walk-Thru:
Details on "Basic Auth Header" spec can be found here.
At a high level, User visits the website and is presented with a Login Page. This page contains a UserID and Password input. Along with a hidden "Errors" DIV that can be toggled from the HTMX response when the authentication fails.
When the user clicks on "Submit", we have the
tag with the following signature:<form ... hx-post="/auth" hx-trigger="submit" hx-target="#Errors"> ... <div id="Errors"></div>If authentication, fails (on the server side), I can return something like:
<span class="text-danger" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 10000)">Invalid <b>email address</b>, <b>password</b> or <b>both</b>.</span>This displays the errors nicely and then hides it after the 10sec timeout is reached.
Similarly, I can return something that pushes the generated token to a global var which is returned by the "getAuthToken(){...}" function:
document.body.addEventListener('htmx:configRequest', function(evt) { evt.detail.headers['Authentication-Token'] = getAuthToken(); // add a new header into the request });Now, is there a way to combine the UserID and Password into the following format purely from a HTMX point of view?
Set-Header: "Authorization: Basic btoa(UserID+":"Password)";
I am trying to see if it can be done without introducing another JavaScript function into the mix (or a Alpine.js solution).
Looking to see if there is any best practices or examples out there to achieve this end goal.
Thank you for taking the time to read through the problem-space.
Looking forward to your recommendations. Thank you for your time.
Beta Was this translation helpful? Give feedback.
All reactions