mark/wirm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

web: SSO WORKS

Browse source
This commit is contained in:
Mark Joshwel 2025-02-13 16:08:29 +08:00
parent 503e7387e3
commit e705ab6c54
4 changed files with 139 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
Web/public/auth.html
View file

@ -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
class="uk-input"
placeholder="name@example.com"
type="text"
/>
<button class="uk-btn uk-btn-primary w-full" href="#check-your-email" data-uk-toggle>
<input id="auth-field-email" class="uk-input" placeholder="name@example.com" type="text" />
<a
id="auth-button-magic"
class="uk-btn uk-btn-primary w-full"
href="#check-your-email"
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>
We've sent you an 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!
<p id="auth-modal-result-body">
Waiting for a response from the server...
</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>

6
Web/public/index.html
View file

@ -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"
href="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/css/core.min.css"
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>
<style>
/* latin-ext */
@font-face {

107
Web/public/js/ebcd-auth.js
View file

@ -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}`;
});
});

17
Web/public/js/ebcd-common-firebase.js
View file

@ -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);