Menu
Thanks in advance and sorry if this question is being asked previously. I'm new to firebase and javascript, here I'm creating a sign up form for a user with the following fields:
UsernameCompany nameContact NoEmail addressPasswordI have gone through some of the tutorials and samples too but in those tutorials I found that there was only the fields of email and password which was being used in authentication, but in my case I want to sign up the user as well as to insert the user name, email adress, company name, contact no in the firebase database...
Can anyone please help me...below is my code
<!DOCTYPE html>
<html>
<head>
<!--Bootstrap CSS CDN-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!---jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
/**
* Handles the sign in button press.
*/
function toggleSignIn() {
if (firebase.auth().currentUser) {
// [START signout]
firebase.auth().signOut();
// [END signout]
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
// [END authwithemail]
window.location = '/1home.php'
}
document.getElementById('quickstart-sign-in').disabled = true;
}
/**
* Handles the sign up button press.
*/
function handleSignUp() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START createwithemail]
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
firebase.database().ref('users/' + user.uid).set({
email: email,
password: password
})
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
// [END createwithemail]
}
/**
* Sends an email verification to the user.
*/
function sendEmailVerification() {
// [START sendemailverification]
firebase.auth().currentUser.sendEmailVerification().then(function() {
// Email Verification sent!
// [START_EXCLUDE]
alert('Email Verification Sent!');
// [END_EXCLUDE]
});
// [END sendemailverification]
}
function sendPasswordReset() {
var email = document.getElementById('email').value;
// [START sendpasswordemail]
firebase.auth().sendPasswordResetEmail(email).then(function() {
// Password Reset Email Sent!
// [START_EXCLUDE]
alert('Password Reset Email Sent!');
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/invalid-email') {
alert(errorMessage);
} else if (errorCode == 'auth/user-not-found') {
alert(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
// [END sendpasswordemail];
}
/**
* Handles registering callbacks for the auth status.
*
* This method registers a listener with firebase.auth().onAuthStateChanged. This listener is called when
* the user is signed in or out, and that is where we update the UI.
*
* When signed in, we also authenticate to the Firebase Realtime Database.
*/
function initApp() {
// Listening for auth state changes.
// [START authstatelistener]
firebase.auth().onAuthStateChanged(function(user) {
// [START_EXCLUDE silent]
document.getElementById('quickstart-verify-email').disabled = true;
// [END_EXCLUDE]
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var refreshToken = user.refreshToken;
var providerData = user.providerData;
// [START_EXCLUDE silent]
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
document.getElementById('quickstart-sign-in').textContent = 'Sign out';
document.getElementById('quickstart-account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
photoURL: photoURL,
isAnonymous: isAnonymous,
uid: uid,
refreshToken: refreshToken,
providerData: providerData
}, null, ' ');
if (!emailVerified) {
document.getElementById('quickstart-verify-email').disabled = false;
}
// [END_EXCLUDE]
} else {
// User is signed out.
// [START_EXCLUDE silent]
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
document.getElementById('quickstart-sign-in').textContent = 'Sign in';
document.getElementById('quickstart-account-details').textContent = 'null';
// [END_EXCLUDE]
}
// [START_EXCLUDE silent]
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
// [END authstatelistener]
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
document.getElementById('quickstart-sign-up').addEventListener('click', handleSignUp, false);
document.getElementById('quickstart-verify-email').addEventListener('click', sendEmailVerification, false);
document.getElementById('quickstart-password-reset').addEventListener('click', sendPasswordReset, false);
}
window.onload = function() {
initApp();
};
</script>
</head>
<body>
<div class="jumbotron text-center">
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<!--<img src="" style="width:500px; height:340px">-->
</div>
<div class="col-md-6">
<!-- Container for the demo -->
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
<h2 class="mdl-card__title-text">Sign Up</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<p>Enter an email and password below and either sign in to an existing account or sign up</p>
<input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="text" name="text" placeholder="companyname" />
<br /><br />
<input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="text" name="text" placeholder="name" />
<br /><br />
<input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="email" name="email" placeholder="Email" />
<br /><br />
<input class="mdl-textfield__input" style="display:inline;width:auto;" type="password" id="password" name="password" placeholder="Password" />
<br/><br/>
<button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in" name="signin">Sign In</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-up" name="signup">Sign Up</button>
<button class="mdl-button mdl-js-button mdl-button--raised" disabled id="quickstart-verify-email" name="verify-email">Send Email Verification</button>
<button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-password-reset" name="verify-email">Send Password Reset Email</button>
<!-- Container where we'll display the user details -->
<div class="quickstart-user-details-container">
<!--Firebase-->sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
<div>
<!--Firebase-->auth <code>currentUser</code> object value:</div>
<pre><code id="quickstart-account-details">null</code></pre>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
<!--Bootstrap Js CDN-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Firebase Initialization-->
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
</script>
</body>
</html>
534
I believe there is no way doing this only using one firebase call. I think you have to create your user and then later do something like this:
firebase.database().ref('users/' + user.uid).set({
companyName: companyName,
contact: contact,
...
})
or like as described in the firebase documentation like this:
var user = firebase.auth().currentUser;
user.updateProfile({
displayName: "Jane Q. User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
// Update successful.
}, function(error) {
// An error happened.
});
Instead of displayName and photoUrl you are going to use your attributes.
EDITED
As you asked, I think you could do something like this:
firebase.auth().createUserWithEmailAndPassword(email, password).then(function(){
var user = firebase.auth().currentUser;
user.updateProfile({
displayName: "Jane Q. User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
// Update successful.
}, function(error) {
// An error happened.
});
})
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
