fix: add auth0 login

content/callback.md

@@ -2,4 +2,6 @@
 title: "Callback"
 url: "/callback"
 layout: "callback"
----
+---
+
+Please wait while we log you in...

layouts/partials/head.html

@@ -23,4 +23,5 @@
 {{ else }}
 {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />
-{{ end }}
+{{ end }}
+<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>

layouts/partials/nav.html

@@ -26,8 +26,8 @@
             class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
             <!-- <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href="/about/">About</a> -->
             <!-- <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href="/prose/">Prose</a> -->
-            <!-- <button id="login" style="display: block;">Login</button>
-            <button id="logout" style="display: none;">Logout</button> -->
+            <button id="login" onclick="login()">Login</button>
+            <button id="logout" onclick="logout()" style="display: none;">Logout</button>
             <button id="theme-toggle" type="button"
                 class="p-2 text-sm text-gray-500 rounded-lg md: dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:ml-2 max-w-5 xs:hidden">
                 <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"

static/js/app.js

@@ -1,60 +1,9 @@
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
+    await handleAuthentication();
 
-    console.log("Script started"); // Add this line at the beginning of your script
-
-    auth0.createAuth0Client({
-        domain: "dev-g4e7bfpbacem6e8d.au.auth0.com",
-        clientId: "PaFcTx3jOQffBEMJaD6d3xnmgSmzmTzq",
-        authorizationParams: {
-            redirect_uri: `${window.location.origin}/callback/`
-        }
-    }).then(async (auth0Client) => {
-        const loginButton = document.getElementById("login");
-        const logoutButton = document.getElementById("logout");
-
-        loginButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            auth0Client.loginWithRedirect();
-        });
-
-        logoutButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            auth0Client.logout({ returnTo: window.location.origin });
-        });
-
-        if (location.search.includes("state=") &&
-            (location.search.includes("code=") ||
-                location.search.includes("error="))) {
-            await auth0Client.handleRedirectCallback();
-            window.history.replaceState({}, document.title, "/");
-        }
-
-        const isAuthenticated = await auth0Client.isAuthenticated();
-        console.log("isAuthenticated:", isAuthenticated); // Log the value of isAuthenticated
-
-        const userProfile = await auth0Client.getUser();
-
-        if (isAuthenticated) {
-            console.log("Updating button display for authenticated user"); // Log when updating button display for authenticated users
-            loginButton.style.display = "none";
-            logoutButton.style.display = "block";
-        } else {
-            console.log("Updating button display for unauthenticated user"); // Log when updating button display for unauthenticated users
-            loginButton.style.display = "block";
-            logoutButton.style.display = "none";
-        }
-
-        // Assumes an element with id "profile" in the DOM
-        const profileElement = document.getElementById("profile");
-
-        /* if (isAuthenticated) {
-            profileElement.style.display = "block";
-            profileElement.innerHTML = `
-                  <p>${userProfile.name}</p>
-                  <img src="${userProfile.picture}" />
-                `;
-        } else {
-            profileElement.style.display = "none";
-        } */
-    });
-});
+    if (await isAuthenticated()) {
+        const user = await getUser();
+        console.log(user);
+        // Display user information
+    }
+});

static/js/auth.js

@@ -0,0 +1,28 @@
+const auth0Client = auth0.createAuth0Client({
+    domain: "dev-g4e7bfpbacem6e8d.au.auth0.com",
+    clientId: "PaFcTx3jOQffBEMJaD6d3xnmgSmzmTzq",
+    redirect_uri: window.location.origin + "/callback",
+});
+
+async function login() {
+    await auth0Client.loginWithRedirect();
+}
+
+async function logout() {
+    await auth0Client.logout();
+}
+
+async function handleAuthentication() {
+    if (window.location.pathname === "/callback" && window.location.search.includes("code=")) {
+        await auth0Client.handleRedirectCallback();
+        window.history.replaceState({}, document.title, "/");
+    }
+}
+
+async function isAuthenticated() {
+    return await auth0Client.isAuthenticated();
+}
+
+async function getUser() {
+    return await auth0Client.getUser();
+}