I want to get registered user details from firestore into html page. When user clicks my profile page it navigate to next html page with fields like first name and last name etc.. . This fields are already entered at the time of signup page. so i want get those details from firestore into next html page. But i got the error like "Cannot read property 'uid' of null ". How to resolve that problem this is my html page :
<!doctype html>
<html lang="en">
<head>
<title> deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src=".6.2/firebase-app.js"></script>
<script src=".6.2/firebase-auth.js"></script>
<script src=".2.1.slim.min.js"></script>
<script src=".js/1.12.6/umd/popper.min.js"></script>
<script src=".0.0-beta.2/js/bootstrap.min.js"></script>
<script src=".6.2/firebase-firestore.js"></script>
<link rel="stylesheet" href=".0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script>
var config = {
apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw",
authDomain: "websignin-79fec.firebaseapp",
databaseURL: "",
projectId: "websignin-79fec",
storageBucket: "",
messagingSenderId: "480214472501"
};
firebase.initializeApp(config);
</script>
<script src=".6.2/firebase-firestore.js"></script>
<link rel="stylesheet" href=".0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
// css goes here..
</style>
<script type="text/javascript">
function myProfile() {
var user = firebase.auth().currentUser.uid;
var db = firebase.firestore();
var docRef = db.collection("deyaPayusers").doc(user);
docRef.get().then(function(doc) {
if(doc && doc.exists) {
const myData = doc.data();
const ffname = myData.FirstName;
const llname = myData.LastName;
const phonen = myData.PhoneNumber;
document.getElementById("fname").value = ffname;
document.getElementById("lname").value = llname;
document.getElementById("phone").value = phonen;
}
}).catch(function(error) {
console.log("Got an error: ",error);
});
}
</script>
</head>
<body onload='myProfile()'>
<div class= "login-form">
<form method="post">
<h2>Profile</h2>
<div class="form-group">
<input type="text" name="firstname" id="fnmae" placeholder="FirstName" class="form-control" >
</div>
<div class="form-group">
<input type="text" name="lastname" id="lnmae" placeholder="LastName" class="form-control" >
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" placeholder="PhoneNumber" class="form-control" >
</div>
</form>
</div>
</body>
</html>
I want to get registered user details from firestore into html page. When user clicks my profile page it navigate to next html page with fields like first name and last name etc.. . This fields are already entered at the time of signup page. so i want get those details from firestore into next html page. But i got the error like "Cannot read property 'uid' of null ". How to resolve that problem this is my html page :
<!doctype html>
<html lang="en">
<head>
<title> deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.gstatic./firebasejs/4.6.2/firebase-app.js"></script>
<script src="https://www.gstatic./firebasejs/4.6.2/firebase-auth.js"></script>
<script src="https://code.jquery./jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://www.gstatic./firebasejs/4.6.2/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script>
var config = {
apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw",
authDomain: "websignin-79fec.firebaseapp.",
databaseURL: "https://websignin-79fec.firebaseio.",
projectId: "websignin-79fec",
storageBucket: "",
messagingSenderId: "480214472501"
};
firebase.initializeApp(config);
</script>
<script src="https://www.gstatic./firebasejs/4.6.2/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
// css goes here..
</style>
<script type="text/javascript">
function myProfile() {
var user = firebase.auth().currentUser.uid;
var db = firebase.firestore();
var docRef = db.collection("deyaPayusers").doc(user);
docRef.get().then(function(doc) {
if(doc && doc.exists) {
const myData = doc.data();
const ffname = myData.FirstName;
const llname = myData.LastName;
const phonen = myData.PhoneNumber;
document.getElementById("fname").value = ffname;
document.getElementById("lname").value = llname;
document.getElementById("phone").value = phonen;
}
}).catch(function(error) {
console.log("Got an error: ",error);
});
}
</script>
</head>
<body onload='myProfile()'>
<div class= "login-form">
<form method="post">
<h2>Profile</h2>
<div class="form-group">
<input type="text" name="firstname" id="fnmae" placeholder="FirstName" class="form-control" >
</div>
<div class="form-group">
<input type="text" name="lastname" id="lnmae" placeholder="LastName" class="form-control" >
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" placeholder="PhoneNumber" class="form-control" >
</div>
</form>
</div>
</body>
</html>
-
before getting user data do a check for
userobject. currentUser will be null if not logged in. – Hareesh Commented Feb 1, 2018 at 5:39 - user logged and his details are stored under his authentication id. But the details are not retriving. – Lahari Areti Commented Feb 1, 2018 at 5:52
1 Answer
Reset to default 7Your error says Cannot read property 'uid' of null. which means you are loading myProfile() this function on page load, by that time user may be null. There will be a lag to fetch auth details from firebase. Try this way
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var db = firebase.firestore();
var docRef = db.collection("deyaPayusers").doc(user.uid);
docRef.get().then(function(doc) {
if(doc && doc.exists) {
const myData = doc.data();
const ffname = myData.FirstName;
const llname = myData.LastName;
const phonen = myData.PhoneNumber;
document.getElementById("fname").value = ffname;
document.getElementById("lname").value = llname;
document.getElementById("phone").value = phonen;
}
}).catch(function(error) {
console.log("Got an error: ",error);
});
} else {
// No user is signed in.
}
});