simple auth on web
This commit is contained in:
yauwailam
parent
671e00943e
commit
bd14859c75
3 changed files with 204 additions and 0 deletions
109
Web/Login.html
Normal file
109
Web/Login.html
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
<!--
|
||||||
|
Author: Wai Lam
|
||||||
|
Date: 7/2/25
|
||||||
|
Description: login
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-sale=1.0" />
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Login</h1>
|
||||||
|
<div>
|
||||||
|
<form >
|
||||||
|
<div >
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Handle Auth State Change Event
|
||||||
|
onAuthStateChanged(auth, (user) => {
|
||||||
|
if (user) {
|
||||||
|
console(`Login successful`);
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
const errorCode = error.code;
|
||||||
|
|
||||||
|
if (
|
||||||
|
errorCode === "auth/wrong-password" ||
|
||||||
|
errorCode === "auth/user-not-found"
|
||||||
|
) {
|
||||||
|
} else {
|
||||||
|
errorMessageDiv.textContent = "Wrong Email/Password!";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
86
Web/SignUp.html
Normal file
86
Web/SignUp.html
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-sale=1.0" />
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h1>Sign Up</h1>
|
||||||
|
<div>
|
||||||
|
<form id="frmCreateUser">
|
||||||
|
<div>
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="signupemail"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="signuppassword"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="SignUpButton"
|
||||||
|
>
|
||||||
|
Sign Up
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</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";
|
||||||
|
|
||||||
|
import {
|
||||||
|
//determine which services you want to use
|
||||||
|
getAuth,
|
||||||
|
createUserWithEmailAndPassword,
|
||||||
|
signInWithEmailAndPassword,
|
||||||
|
onAuthStateChanged,
|
||||||
|
signOut,
|
||||||
|
} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
|
||||||
|
|
||||||
|
const app = initializeApp(firebaseConfig);
|
||||||
|
//Working with Auth
|
||||||
|
const auth = getAuth();
|
||||||
|
|
||||||
|
// Form submit listener
|
||||||
|
const frmCreateUser = document.getElementById("frmCreateUser");
|
||||||
|
frmCreateUser.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Retrieve input values
|
||||||
|
const email = document.getElementById("signupemail").value.trim();
|
||||||
|
const password = document.getElementById("signuppassword").value.trim();
|
||||||
|
|
||||||
|
// Create a new user in Firebase Authentication
|
||||||
|
createUserWithEmailAndPassword(auth, email, password)
|
||||||
|
.then((userCredential) => {
|
||||||
|
console.log("User successfully created:", userCredential.user);
|
||||||
|
// Redirect to login page after successful registration
|
||||||
|
window.location.href = "Login.html";
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
const errorCode = error.code;
|
||||||
|
const errorMessage = error.message;
|
||||||
|
console.error(`Error creating user: ${errorCode} - ${errorMessage}`);
|
||||||
|
alert(`Error: ${errorMessage}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
Web/firebase-config.js
Normal file
9
Web/firebase-config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const firebaseConfig = {
|
||||||
|
apiKey: "AIzaSyARm-eSymd2Q3AyxJXiAiiUzsXGmc6T72I",
|
||||||
|
authDomain: "echoesbehindcloseddoors.firebaseapp.com",
|
||||||
|
databaseURL: "https://echoesbehindcloseddoors-default-rtdb.asia-southeast1.firebasedatabase.app",
|
||||||
|
projectId: "echoesbehindcloseddoors",
|
||||||
|
storageBucket: "echoesbehindcloseddoors.firebasestorage.app",
|
||||||
|
messagingSenderId: "905742343227",
|
||||||
|
appId: "1:905742343227:web:19d04f77371ef1952c901e"
|
||||||
|
};
|
||||||
Loading…
Add table
Reference in a new issue