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

136
Web/Login.html
View file

@ -6,104 +6,116 @@ Description: login
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <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> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body> <body>
<h1>Login</h1> <h1>Login</h1>
<div>
<form>
<div> <div>
<form > <label for="email">Email</label>
<div > <input type="text" id="email" />
<label for="email" >Email</label>
<input
type="text"
id="email"
/>
</div>
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
/>
</div>
<div
id="errorMessage"
></div>
<div>
<button
type="button"
id="loginButton">
Login
</button>
</div>
<div>
<a
href="SignUp.html"
>
Sign Up
</a>
</div>
</form>
</div> </div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</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>
</div>
<div>
<button type="button" id="googleSignInButton">
Sign in with Google
</button>
</div>
<div>
<a href="SignUp.html">Sign Up</a>
</div>
</form>
</div>
<script type="module"> <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";
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js"; import { firebaseConfig } from "./firebase-config.js";
// TODO: Add SDKs for Firebase products that you want to use import {
// 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, getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword, signInWithEmailAndPassword,
onAuthStateChanged, onAuthStateChanged,
GoogleAuthProvider,
signInWithPopup,
signOut, signOut,
} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js"; } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
const app = initializeApp(firebaseConfig); const app = initializeApp(firebaseConfig);
//Working with Auth
const auth = getAuth(); const auth = getAuth();
document.getElementById("loginButton").onclick = login; 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) => { onAuthStateChanged(auth, (user) => {
if (user) { if (user) {
console(`Login successful`); userStatusDiv.innerHTML = `Signed in as: <strong>${
user.displayName || user.email
}</strong>`;
userStatusDiv.classList.remove("hidden");
} else { } else {
userStatusDiv.innerHTML = "";
userStatusDiv.classList.add("hidden");
} }
}); });
function login() { function login() {
const email = document.getElementById("email").value; const email = document.getElementById("email").value;
const password = document.getElementById("password").value; const password = document.getElementById("password").value;
const errorMessageDiv = document.getElementById("errorMessage");
signInWithEmailAndPassword(auth, email, password) signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => { .then(() => {
const user = userCredential.user; errorMessageDiv.classList.add("hidden");
}) })
.catch((error) => { .catch((error) => {
const errorCode = error.code; const errorCode = error.code;
let message = "An error occurred. Please try again.";
if ( if (
errorCode === "auth/wrong-password" || errorCode === "auth/wrong-password" ||
errorCode === "auth/user-not-found" errorCode === "auth/user-not-found"
) { ) {
} else { message = "Wrong Email/Password!";
errorMessageDiv.textContent = "Wrong Email/Password!";
} }
errorMessageDiv.innerHTML = `<strong>${message}</strong>`;
errorMessageDiv.classList.remove("hidden");
}); });
} }
</script> // 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> </body>
</html> </html>