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
-
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