How to Get Currently Signed In User in Web and Firebase ?
Firebase is the most widely used Database and it has awesome features such as Authentication firestore, and Real-time database, given by firebase, We can integrate firebase into Web, Flutter, and Unity. But In this article, we are going to implement firebase on the web and get the current Signed In user.
A sample below give an idea of what we are going to implement:
Create a User using firebase Authentication: You create a new user in your Firebase project by calling the createUserWithEmailAndPassword method or by signing in a user for the first time using a federated identity provider, such as Google Sign-In or Facebook Login.
You can also create new password-authenticated users from the Authentication section of the Firebase console, You can follow this GFG article to implement the firebase on the web and User Authentication using Email and Password.
Hopefully, now you read the mentioned article, And now we are going to get the user signed in the state in firebase and web.
Get the currently signed-in user: The recommended way to get the current user is by setting an observer on the Auth object:
Javascript
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log( "User Signed In" );
var uid = user.uid;
} else {
console.log( "User Signed Out" );
}
});
|
Alternative way: You can also get the currently signed-in user by using the currentUser property. If a user isn’t signed in, currentUser is null:
Javascript
const user = firebase.auth().currentUser;
if (user) {
console.log( "User Signed In" );
} else {
console.log( "User Signed Out" );
}
|
Note: currentUser might also be null because the auth object has not finished initializing. You can handle this using observer.
Example: Below is the implementation to Get the currently Signed In user in web and Firebase:
- index.html: We have only three buttons in the body of the HTML file that calls the method signin, sign out and check respectively. The definition of above methods is defined in the JavaScript file.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >samplefirebaseforweb</ title >
< script src =
</ script >
</ head >
< body >
< script src = "/app.js" ></ script >
< button onclick = "signIn()" >signUp</ button >
< button onclick = "signOut()" >signOut</ button >
< button onclick = "Check()" >Check SignIn or Not</ button >
</ body >
</ html >
|
script.js: JavaScript file that adds the firebase to the web app and methods that are used to signed in the user, sign out the user, and check whether the user is signed in or not.
Javascript
const firebaseConfig = {
};
const app = firebase.initializeApp(firebaseConfig);
var email = "xyz12@gmail.com" ;
var password = "12345678" ;
function signIn() {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
var user = userCredential.user;
})
. catch ((error) => {
var errorCode = error.code;
var errorMessage = error.message;
});
}
function signOut() {
firebase
.auth()
.signOut()
.then(() => {
})
. catch ((error) => {
});
}
function Check() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log( "User Signed In!!" );
} else {
console.log( "User Signed out!!" );
}
});
}
|
Output:
Last Updated :
31 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...