web: SSO WORKS

Web/public/auth.html

@@ -30,12 +30,13 @@
 
     <!-- ui stuff -->
     <!-- temporary ui bundling fix (https://github.com/oven-sh/bun/issues/17243) -->
-    <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
     <link
       rel="stylesheet"
       href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
     />
     <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
+    <script type="module" src="/js/ebcd-auth.js"></script>
     <style>
       /* latin-ext */
       @font-face {
@@ -113,14 +114,15 @@
           </p>
         </div>
         <div class="!space-y-2">
-          <input
+          <input id="auth-field-email" class="uk-input" placeholder="name@example.com" type="text" />
-            class="uk-input"
+          <a
-            placeholder="name@example.com"
+            id="auth-button-magic"
-            type="text"
+            class="uk-btn uk-btn-primary w-full"
-          />
+            href="#check-your-email"
-          <button class="uk-btn uk-btn-primary w-full" href="#check-your-email" data-uk-toggle>
+            data-uk-toggle
+          >
             Send a Magic Link
-          </button>
+          </a>
         </div>
         <div class="relative">
           <div class="absolute inset-0 flex items-center">
@@ -132,7 +134,7 @@
             >
           </div>
         </div>
-        <button class="uk-btn uk-btn-default w-full">
+        <button id="auth-button-sso-google" class="uk-btn uk-btn-default w-full">
           <svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
             <path
               fill="currentColor"
@@ -158,7 +160,7 @@
       </div>
     </main>
 
-    <div id="check-your-email" class="uk-flex-top" data-uk-modal>
+    <div id="check-your-email" class="uk-flex-top uk-modal" data-uk-modal>
       <div class="uk-modal-dialog uk-margin-auto-vertical">
         <button
           class="uk-modal-close absolute right-4 top-4"
@@ -166,13 +168,11 @@
           data-uk-close
         ></button>
         <div class="uk-modal-header">
-          <h2 class="uk-modal-title">You've Got Mail!</h2>
+          <h2 id="auth-modal-result-header" class="uk-modal-title">Hmm...</h2>
         </div>
         <div class="uk-modal-body">
-          <p>
+          <p id="auth-modal-result-body">
-            We've sent you an email with a magical link to authenticate with us.
+            Waiting for a response from the server...
-            If you're a new user, you'll make an account. If you're an existing
-            user, you'll be logged in. Check your inbox!
           </p>
         </div>
         <div class="uk-modal-footer uk-text-right">
@@ -180,6 +180,5 @@
         </div>
       </div>
     </div>
-    <script type="module" src="/js/ebcd-auth.js"></script>
   </body>
-</html> 
+</html>

Web/public/index.html

@@ -30,12 +30,12 @@
 
     <!-- ui stuff -->
     <!-- temporary ui bundling fix (https://github.com/oven-sh/bun/issues/17243) -->
-    <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
     <link
-      rel="stylesheet"
+    rel="stylesheet"
-      href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
+    href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
     />
     <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script type="module" src="/js/ebcd-common-franken-ui.js"></script>
     <style>
       /* latin-ext */
       @font-face {

Web/public/js/ebcd-auth.js

@@ -1,4 +1,9 @@
-import { auth } from "./ebcd-common-firebase.js";
+import {
+  auth,
+  authProviderGoogle,
+  authWithMagicLink,
+  authWithGooglePopup,
+} from "./ebcd-common-firebase.js";
 
 console.log("ebcd-auth loaded <3");
 
@@ -7,3 +12,103 @@ auth.onAuthStateChanged((user) => {
     window.location = "/profile.html";
   }
 });
+
+const actionCodeSettings = {
+  url: `${window.location.origin}/profile.html`,
+  handleCodeInApp: true,
+  iOS: {
+    bundleId: "co.wirm.ebcd",
+  },
+  android: {
+    packageName: "co.wirm.ebcd",
+    installApp: true,
+    minimumVersion: "12",
+  },
+  dynamicLinkDomain: "echoesbehindcloseddoors.page.link",
+};
+
+// input.. id="auth-field-email"
+// a...... id="auth-button-magic"
+// a...... id="auth-button-sso-google"
+// h2..... id="auth-modal-result-header"
+// p...... id="auth-modal-result-body"
+
+// handle magic link auth
+const buttonSendLink = document.getElementById("auth-button-magic");
+buttonSendLink.addEventListener("click", async (event) => {
+  console.log("ebcd-auth: clicked magic");
+
+  const modalResultHeader = document.getElementById("auth-modal-result-header");
+  const modalResultBody = document.getElementById("auth-modal-result-body");
+  const fieldEmail = document.getElementById("auth-field-email");
+  // try get email from fieldEmail.value
+  const email = fieldEmail ? fieldEmail.value.trim() : null;
+
+  // if email is blank
+  if (!email) {
+    modalResultHeader.innerText = "Error!";
+    modalResultBody.innerText = "Please enter an email address.";
+    return;
+  }
+
+  // if email is not valid
+  if (!email.includes("@")) {
+    modalResultHeader.innerText = "Error!";
+    modalResultBody.innerText = "Please enter a valid email address.";
+    return;
+  }
+
+  console.log("ebcd-auth/auth-button-magic: sent!");
+  authWithMagicLink(auth, email, actionCodeSettings)
+    .then(() => {
+      console.log("ebcd-auth/auth-button-magic: success!");
+      // The link was successfully sent. Inform the user.
+      modalResultHeader.innerText = "You've Got Mail!";
+      modalResultBody.innerText = `We've sent you an email to ${email} with a magical link to authenticate with us. If you're a new user, you'll make an account. If you're an existing user, you'll be logged in. Check your inbox!`;
+
+      // Save the email locally so you don't need to ask the user for it again
+      // if they open the link on the same device.
+      window.localStorage.setItem("emailForSignIn", email);
+    })
+    .catch((error) => {
+      console.log(
+        "ebcd-auth/auth-button-magic: error...",
+        error.code,
+        error.message
+      );
+      modalResultHeader.innerText = "Error!";
+      modalResultBody.innerHTML = `We've encountered an error. Tell the booth runner about this!<br>${error.message}`;
+    });
+});
+
+// handle sso auth
+// <button id="button-sso-google">
+const buttonSSOGoogle = document.getElementById("auth-button-sso-google");
+buttonSSOGoogle.addEventListener("click", async (event) => {
+  console.log("ebcd-auth: clicked sso");
+
+  const provider = new authProviderGoogle();
+  const modalResultHeader = document.getElementById("auth-modal-result-header");
+  const modalResultBody = document.getElementById("auth-modal-result-body");
+
+  console.log("ebcd-auth/auth-button-sso-google: sent!");
+  provider.setCustomParameters({
+    prompt: "select_account", // forces account selection every time
+  });
+
+  authWithGooglePopup(auth, provider)
+    .then(() => {
+      // redirect to profile page
+      window.location = "/profile.html";
+    })
+    .catch((error) => {
+      // show error
+      console.log(
+        "ebcd-auth/auth-button-sso-google: error...",
+        error.code,
+        error.message
+      );
+      modalResultHeader.innerText = "Error!";
+      modalResultBody.innerHTML = `We've encountered an error. Tell the booth runner about this!<br>${error.message}`;
+    });
+});

Web/public/js/ebcd-common-firebase.js

@@ -1,17 +1,28 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
 import { getDatabase } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-database.js";
-import { getAuth } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
+import {
+  getAuth,
+  sendSignInLinkToEmail,
+  GoogleAuthProvider,
+  signInWithPopup,
+  signOut as _signOut,
+} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
 
 const firebaseConfig = {
   apiKey: "AIzaSyARm-eSymd2Q3AyxJXiAiiUzsXGmc6T72I",
   authDomain: "echoesbehindcloseddoors.firebaseapp.com",
-  databaseURL: "https://echoesbehindcloseddoors-default-rtdb.asia-southeast1.firebasedatabase.app",
+  databaseURL:
+    "https://echoesbehindcloseddoors-default-rtdb.asia-southeast1.firebasedatabase.app",
   projectId: "echoesbehindcloseddoors",
   storageBucket: "echoesbehindcloseddoors.firebasestorage.app",
   messagingSenderId: "905742343227",
-  appId: "1:905742343227:web:19d04f77371ef1952c901e"
+  appId: "1:905742343227:web:19d04f77371ef1952c901e",
 };
 
 export const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
+export const signOut = _signOut;
+export const authWithMagicLink = sendSignInLinkToEmail;
+export const authWithGooglePopup = signInWithPopup;
+export const authProviderGoogle = GoogleAuthProvider;
 export const database = getDatabase(app);