efim
/
go-ssr-pocketbase-oauth-attempt-github-mirror
mirror of https://github.com/efim/go-ssr-pocketbase-oauth-attempt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: page reload on auth event

This commit is contained in:
efim 2023-10-06 12:25:37 +00:00
parent bb418101dd
commit 2676b87d5b
3 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
auth-notes.org
View File

@ -22,9 +22,36 @@ with js code from the example
*** DONE in template range over enabled providers to create buttons for each *** DONE in template range over enabled providers to create buttons for each
*** DONE make dialog show on click of some element *** DONE make dialog show on click of some element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
** TODO i guess i would also like to send htmx event for reloading the page ** DONE i guess i would also like to send htmx event for reloading the page
on successful auth? on successful auth?
now, why would logout work, and login not work?
eh, let's go back on body doing the hx-get on event?
maybe this is because of open dialog
*** wait, maybe then returning from other auth middlewares will work
no.
for some reason
#+begin_src go
e.HttpContext.Response().Header().Add("HX-Trigger", "auth-change-event")
#+end_src
this header when returned with response to request triggered by js, doesn't result in event being triggered,
ok, i guess
*** so yeah, uglier that i wanted
wanted to have hx-get="/" hx-trigger="auth-change-event"
and send these events from all auth middleware methods
https://htmx.org/docs/#response-headers
but on auth success, even though header is present in the response, no event is triggered
( checked with event listener in console )
so, yup. coupling between js code of oauth, middlewares and body tag. this seems like too much.
but it somewhat works
** TODO add one more page that checks auth ** TODO add one more page that checks auth
and let's use existing middleware from framework documentation
** TODO add tailwind styling ** TODO add tailwind styling
** TODO package static into single binary ** TODO package static into single binary
** TODO write nix build ** TODO write nix build

1
middleware/auth.go
View File

@ -119,6 +119,7 @@ func getLogoutRoute(app *pocketbase.PocketBase) func(*core.ServeEvent) error {
Path: "/", Path: "/",
MaxAge: -1, MaxAge: -1,
}) })
c.Response().Header().Add("HX-Trigger", "auth-change-event")
return c.JSON(http.StatusOK, map[string]string{"message": "session cookie removed"}) return c.JSON(http.StatusOK, map[string]string{"message": "session cookie removed"})
}) })
return nil return nil

62
pages/templates/index.gohtml
View File

@ -13,10 +13,7 @@
defer defer
src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js" src="https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@master/dist/pocketbase.umd.js"
></script> ></script>
<script <script defer src="/static/static/public/htmx.min.js"></script>
defer
src="/static/static/public/htmx.min.js"
></script>
<script defer type="text/javascript"> <script defer type="text/javascript">
async function callOauth(providerName) { async function callOauth(providerName) {
const pb = new PocketBase("http://127.0.0.1:8090"); const pb = new PocketBase("http://127.0.0.1:8090");
@ -38,29 +35,13 @@
// "logout" the last authenticated model // "logout" the last authenticated model
pb.authStore.clear(); pb.authStore.clear();
document.body.dispatchEvent(new Event("auth-change-event"))
} }
</script> </script>
<script defer type="text/javascript">
function initAuthDialog() {
const dialog = document.querySelector("#authDialog");
const showButton = document.querySelector("#openAuth");
const closeButton = document.querySelector("#closeAuth");
console.log("setting up script for buttons");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
}
document.addEventListener("DOMContentLoaded", initAuthDialog);
</script>
</head> </head>
<body> <body
hx-get="/" hx-trigger="auth-change-event"
>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -87,9 +68,40 @@
<p>Please configure at least one oauth provider</p> <p>Please configure at least one oauth provider</p>
{{ end }} {{ end }}
</dialog> </dialog>
<script defer type="text/javascript">
function initAuthDialog() {
const dialog = document.querySelector("#authDialog");
const showButton = document.querySelector("#openAuth");
// const closeButton = document.querySelector("#closeAuth");
// Select all buttons that are direct children of the dialog
var buttons = authDialog.querySelectorAll("button");
if (!dialog || !showButton) {
console.log("some auth elements are not present");
return;
}
console.log("setting up script for buttons");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
buttons.forEach(function (button) {
button.addEventListener("click", function () {
authDialog.close();
});
});
}
initAuthDialog();
// "DOMContentLoaded" doesn't work with htmx replacing body
// maybe i could use htmx related event, but ok to just do asap, i guess
// also - i bet hyperscript would work here
// document.addEventListener("DOMContentLoaded", initAuthDialog);
</script>
{{ else }} {{ else }}
<p>{{ .Username }}</p> <p>{{ .Username }}</p>
<a href="/logout">Logout</a> <button hx-get="/logout">Logout</button>
{{ end }} {{ end }}
</nav> </nav>
<main> <main>