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