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

add google sign in

Browse source
This commit is contained in:
yauwailam 2025-02-08 15:13:04 +08:00
parent 491b1abb04
commit 10b5abbfdc
1 changed files with 74 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
Web/Login.html
View file

@ -6,7 +6,7 @@ Description: login
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-sale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
@ -15,95 +15,107 @@ Description: login
<form>
<div>
<label for="email">Email</label>
<input
type="text"
id="email"
/>
<input type="text" id="email" />
</div>
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
/>
<input type="password" id="password" />
</div>
<div
id="errorMessage"
></div>
<div id="errorMessage" class="hidden text-red-500">
An error occurred.
</div>
<div id="userStatus" class="hidden text-green-500"></div>
<div>
<button
type="button"
id="loginButton">
Login
<button type="button" id="loginButton">Login</button>
</div>
<div>
<button type="button" id="googleSignInButton">
Sign in with Google
</button>
</div>
<div>
<a
href="SignUp.html"
>
Sign Up
</a>
<a href="SignUp.html">Sign Up</a>
</div>
</form>
</div>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
import { firebaseConfig } from "./firebase-config.js";
// Initialize Firebase
import {
//determine which services you want to use
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
GoogleAuthProvider,
signInWithPopup,
signOut,
} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
const app = initializeApp(firebaseConfig);
//Working with Auth
const auth = getAuth();
document.getElementById("loginButton").onclick = login;
document.getElementById("googleSignInButton").onclick = signInWithGoogle;
const userStatusDiv = document.getElementById("userStatus");
const errorMessageDiv = document.getElementById("errorMessage");
// Sign out any existing user on page load to prevent auto sign-in
signOut(auth);
// Handle Auth State Change Event
onAuthStateChanged(auth, (user) => {
if (user) {
console(`Login successful`);
userStatusDiv.innerHTML = `Signed in as: <strong>${
user.displayName || user.email
}</strong>`;
userStatusDiv.classList.remove("hidden");
} else {
userStatusDiv.innerHTML = "";
userStatusDiv.classList.add("hidden");
}
});
function login() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const errorMessageDiv = document.getElementById("errorMessage");
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
.then(() => {
errorMessageDiv.classList.add("hidden");
})
.catch((error) => {
const errorCode = error.code;
let message = "An error occurred. Please try again.";
if (
errorCode === "auth/wrong-password" ||
errorCode === "auth/user-not-found"
) {
} else {
errorMessageDiv.textContent = "Wrong Email/Password!";
message = "Wrong Email/Password!";
}
errorMessageDiv.innerHTML = `<strong>${message}</strong>`;
errorMessageDiv.classList.remove("hidden");
});
}
// if you are testing in live server please add that server domain to the authorized domain if not the pop up will not show up
function signInWithGoogle() {
const provider = new GoogleAuthProvider();
provider.setCustomParameters({
prompt: "select_account", // Forces account selection every time
});
signInWithPopup(auth, provider)
.then(() => {
errorMessageDiv.classList.add("hidden");
})
.catch(() => {
errorMessageDiv.innerHTML = `<strong>Google Sign-In failed. Please try again.</strong>`;
errorMessageDiv.classList.remove("hidden");
});
}
</script>
</body>
</html>