feat: logout route and login dialog

auth-notes.org

@@ -5,7 +5,12 @@ https://pocketbase.io/docs/go-overview/
 ** DONE start pocketbase
 ** DONE add middlewares for cookie session
 ** TODO add index page, that will have either "current user" or 'login' link
-** TODO 'login' link should open dialog with oauth providers
+*** TODO let's add some content that only opens up when person is authed
+*** TODO also, how do i logout?
+separate route that deleted the cookie i guess.
+since auth is a jwt which would expire on its own
+and htmx get thingy, and reload i guess?
+** DONE 'login' link should open dialog with oauth providers
 so, i want a window with available oauth providers,
 to trigger the js code from example
 https://pocketbase.io/docs/authentication/
@@ -14,6 +19,9 @@ https://pocketbase.io/docs/authentication/
 let's get configured providers in the go code,
 add as slice of strings, and in template create buttons for each of those
 with js code from the example
+*** DONE in template range over enabled providers to create buttons for each
+*** DONE make dialog show on click of some element
+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
 on successful auth?
 ** TODO add one more page that checks auth
@@ -24,3 +32,5 @@ on successful auth?
 ** TODO add docker image from nix
 *** TODO add cli for port and host
 ** TODO add readme and comments
+** TODO configure tls / ssl / https on franzk deployment
+can it be configured on render.com?

middleware/auth.go

@@ -18,7 +18,6 @@ const AuthCookieName = "Auth"
 func AddCookieSessionMiddleware(app *pocketbase.PocketBase) {
 	app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
 		e.Router.Use(loadAuthContextFromCookie(app))
-
 		return nil
 	})
 
@@ -50,7 +49,7 @@ func AddCookieSessionMiddleware(app *pocketbase.PocketBase) {
 		})
         return nil
     })
-
+	app.OnBeforeServe().Add(getLogoutRoute(app))
 }
 
 func loadAuthContextFromCookie(app core.App) echo.MiddlewareFunc {
@@ -109,3 +108,20 @@ func loadAuthContextFromCookie(app core.App) echo.MiddlewareFunc {
 		}
 	}
 }
+
+// render and return login page with configured oauth providers
+func getLogoutRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error {
+	return func (e *core.ServeEvent) error {
+		e.Router.GET("/logout", func(c echo.Context) error {
+			c.SetCookie(&http.Cookie{
+				Name: AuthCookieName,
+				Value: "",
+				Path: "/",
+				MaxAge: -1,
+			})
+			return c.JSON(http.StatusOK, map[string]string{"message": "session cookie removed"})
+		})
+		return nil
+	}
+}
+

pages/pageRoutes.go

@@ -18,7 +18,6 @@ var templatesFS embed.FS
 
 func AddPageRoutes(app *pocketbase.PocketBase) {
 	app.OnBeforeServe().Add(getIndexPageRoute(app))
-	app.OnBeforeServe().Add(getAuthPageRoute(app))
 }
 
 // render and return index page
@@ -75,22 +74,3 @@ func getIndexPageRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error
 		return nil
 	}
 }
-
-// render and return login page with configured oauth providers
-func getAuthPageRoute(app *pocketbase.PocketBase)  func(*core.ServeEvent) error {
-	return func (e *core.ServeEvent) error {
-		e.Router.GET("/login", func(c echo.Context) error {
-
-			templateName := "templates/login.gohtml"
-			tmpl := template.Must(template.ParseFS(templatesFS, templateName))
-			var instantiatedTemplate bytes.Buffer
-			if err := tmpl.Execute(&instantiatedTemplate, nil); err != nil {
-				return c.JSON(http.StatusInternalServerError, map[string]string{"message": "error parsing template"})
-			}
-
-			return c.HTML(http.StatusOK, instantiatedTemplate.String())
-		})
-		return nil
-	}
-}
-

pages/templates/index.gohtml

@@ -53,9 +53,31 @@
 >
     <![endif]-->
     <p>{{ .Username }}</p>
-    <dialog open>
+    <button id="openAuth">Authenticate</button>
+    <dialog id="authDialog">
+      <button id="closeAuth">[X]</button>
       <p>Greetings, one and all!</p>
-      <button onClick="callOauth('github')">OK!</button>
+      {{ range .EnabledOauthProviders }}
+      <button onClick="callOauth('{{ . }}')">Login with {{ . }}</button>
+      {{ else }}
+      <p>Please configure at least one oauth provider</p>
+      {{ end }}
     </dialog>
+    <script defer type="text/javascript">
+      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();
+      });
+    </script>
   </body>
 </html>