web: SSO WORKS
This commit is contained in:
parent
503e7387e3
commit
e705ab6c54
4 changed files with 139 additions and 24 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue