I am trying to set up the authentication system for my website. So far, it has two pages, one being the login page that the user is greeted with when they load onto the website, and the second is the home page. This is for a private company internal website, so there will be no sign-up page. There will be other pages that go along with the home page in the future. When the user logs in, they should be forwarded to the home page by default, where they will eventually be able to navigate to other pages. If the user is not logged in, they will be forwarded back to the login page. When I login, I am immediately redirected by to login page, which means the auth state is not persisting. I read in the docs that the default login-persistence should cover what I'm trying to do. I tried explicitly defining it using both the methods they showed as an example on the docs but it didn't work. Note: I'm using VSCode for Mac, and am running this using LiveServer extension. Login html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="module" src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js"></script>
</head>
<body>
<div id="login-container">
<form id="login-form">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="button" id="login-button">Login</button>
</div>
</form>
</div>
<script type="module" src="script.js"></script>
</body>
</html>
Login JS:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import { getAuth , signInWithEmailAndPassword, onAuthStateChanged, signOut, setPersistence, browserSessionPersistence, inMemoryPersistence } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";
const firebaseApp = initializeApp({
apiKey: "...",
authDomain: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
})
const auth = getAuth(firebaseApp);
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
document.getElementById("login-button").addEventListener("click", myFunction);
function myFunction() {
var x = document.getElementById("login-form");
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
var email = x.elements[0].value;
var password = x.elements[1].value;
console.log(email + password);
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
window.location.href = "/main.html";
}
Home Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="module" src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js"></script>
</head>
<body>
<script type="module" src="main-script.js"></script>
</body>
</html>
Home JS:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import { getAuth , signInWithEmailAndPassword, onAuthStateChanged, signOut, setPersistence, browserSessionPersistence } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";
const firebaseApp = initializeApp({
apiKey: "...",
authDomain: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
})
const auth = getAuth(firebaseApp);
auth.onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user.uid;
console.log(user);
// ...
} else {
// User is signed out
// ...
window.location.href = "/index.html";
}
});
console.log(auth.currentUser);
Comments
Post a Comment