Encountering an issue with Authentication using Firebase and JavaScript.
After following the guidelines provided at: https://firebase.google.com/docs/auth/web/password-auth everything seemed to work as expected.
My configuration is set up in a way that I have a main web page named M.html which requires authentication for access.
In addition, there's a login page called L.html which acts as a gateway to the main page.
Upon visiting the login page, users are prompted to enter credentials before proceeding. Once successfully logged in, they should be directed to the main page.
If a user tries to bypass the login page and goes directly to the main page, a check is performed to verify their login status. If logged in, access is granted; if not, they are redirected back to the login page.
The challenge arises when the main page fails to detect the user's logged-in status, consistently redirecting them back to the login page.
I am seeking assistance on the correct procedure to follow in order for the main page to recognize and acknowledge a successful login from the login page.
Despite multiple attempts to tweak the code, including exploring the use of firebase.auth().getRedirectResult().then..., the desired functionality remains elusive.
To provide clarity, simplified versions of both the main and login pages are presented below along with the respective code snippets. Hopefully, someone can identify where adjustments need to be made to achieve the intended behavior.
The M.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"></script>
</head>
<body>
<div id="mainPage"></div>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
</script>
<script>
function checkUser() {
let user = firebase.auth().currentUser;
if (user) {setMainPage();}
else {window.open("http://.../L.html",'_self');}
}
function setMainPage() {
let label = document.getElementById("mainPage");
label.innerHTML = "<h1>This is the main page!</h1><br/>";
label.innerHTML += "<h1>I can be here because I am logged in !!</h1>";
}
//setMainPage(); // This would show the contents without checking that a user is logged in.
checkUser();
</script>
</body>
</html>
The L.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"></script>
</head>
<body>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
</script>
<script>
firebase.auth().signOut().then(function() {
// Sign-out successful.
console.log("Sign-out successful.");
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
window.open("http://.../M.html",'_self');
}
});
}).catch(function(error) {
// An error happened.
console.log("Sign-out error.");
});
function LogInProcess() {
let theEmail = document.getElementById("EmlAdr").value.trim(),
thePassword = document.getElementById("PsWd").value;
firebase.auth().signInWithEmailAndPassword(theEmail,thePassword).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log("errorCode: " + errorCode);
console.log("errorMessage: " + errorMessage;
});
}
</script>
Email address: <input type='text' name='EmlAdr' id='EmlAdr' value=''><br/><br/>
Password: <input type='password' name='PsWd' id='PsWd' value=''><br/><br/>
<input type='button' id='LgIn' style='font-size:20px' value='Log In' onClick='LogInProcess()'><br/>
</body>
</html>