I'm wondering if it is possible to link a previously user created with email & password with Facebook login if the email is the same?
I've tested registering and logging in with Facebook and it works fine, same for email & password, but if I already have my facebook email registered then the Facebook log in button won't work and the accounts are not linked at all.
I don't think the code is necessary but either way I'm puting it below:
$(document).on('click', "#btn-login-fb", function (event) {
var provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('public_profile');
provider.addScope('email');
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
.then(function () {
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
});
firebase.auth().signInWithPopup(provider).then(function (result) {
var token = result.credential.accessToken;
var user = result.user;
if (result.additionalUserInfo.isNewUser) {
var SendData = {
uidAux: user.uid,
FotoPerfilAux: user.photoURL,
NomeCompleto: user.displayName,
Email: user.email,
FotoPerfilAux: user.photoURL,
Telefone: user.phoneNumber
};
$.ajax({
url: '#Url.Action("CadastraUsuarioFacebook", "Home")',
type: "POST",
data: JSON.stringify(SendData),
contentType: 'application/json'
}).always(function (data, status) {
if (status == "success") {
}
});
}
window.location.href = '/Portal/PortalCliente';
}).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
// ...
});
});
If you want to link a Firebase Auth account with an authentication provider such as Facebook, it's required to write code to link the other account with the Firebase account. It doesn't happen automatically.
Related
I am trying to update my firebase realtime database with user info when I am creating new user through firebase password authentication. And on successful sign in I am moving to another page. The problem is that my database is not getting updated in the above scenario however if stay in the login page and don't change to any other url; the database gets updated.
Here's my create user code
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
if (user !== null) {
const db = firebase.database();
db.ref("/").set({
uid: user.uid,
});
}
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage);
// ..
});
And here's where I'm switching to another page,
firebase.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);
//If I remove the below line, database is updated
window.location.href = "../html/home.html";
// ...
} else {
// User is signed out
// ...
console.log("not logged in");
}
});
This calls is asynchronous:
db.ref("/").set({
uid: user.uid,
});
That means that the code continues to run after the set() function returns, and asynchronously sends the data to the database. But when you change window.location, it interrupts this write operation. That's also why it works when you don't send the user to a new location: the write operation can then complete without interruption.
A quick simple fix is to flag when you're updating the database:
isCreatingUser = true; // 👈 Flag that we're creating a user
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
var user = userCredential.user;
if (user !== null) {
const db = firebase.database();
db.ref("/").set({
uid: user.uid,
}).then(() => {
isCreatingUser = false; // 👈 We're done
window.location.href = "../html/home.html"; // 👈 Navigate away
}).catch((e) => {
isCreatingUser = false; // 👈 We're done
throw e;
})
}
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage);
// ..
isCreatingUser = false; // 👈 We're done
});
And then:
firebase.auth().onAuthStateChanged((user) => {
if (user && !isCreatingUser) {
...
You'll probably need some more synchronization, but that's the gist of it.
I'm trying to add a login with social media on my website, but I got some errors because the case is returning first before my HTTP request (Firebase):
firebase.auth().signInWithPopup
How can I use the async function in some way to the case await until the request is complete?
Here is the code:
login(provider, info) {
switch (provider) {
case this.EMAIL:
return firebaseAuth().signInWithEmailAndPassword(
info.email,
info.password
);
break;
case this.EMAILREGISTER:
break;
case this.GOOGLE:
var providerr = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(providerr).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(result);
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
console.log(error);
// ...
});
//Right here I need to return the token and user async
break;
}
}
//here is the function who is calling:
handleLogin = () => {
const { email, password } = this.state;
if (!(email && password)) {
notification('error', 'Favor informar o email e senha');
return;
}
this.setState({
confirmLoading: true
});
const self = this;
let isError = false;
Firebase.login(Firebase.Google, '')
.catch(result => {
const message =
......
});
}
You can try using async/await so that it will wait till the data is returned. Something like this, just to get you started:
async login(provider, info) {
try {
switch (provider) {
case this.EMAIL:
return firebaseAuth().signInWithEmailAndPassword(
info.email,
info.password
);
break;
case this.EMAILREGISTER:
break;
case this.GOOGLE:
var providerr = new firebase.auth.GoogleAuthProvider();
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var result = await firebase.auth().signInWithPopup(providerr);
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(result);
// ...
break;
}
}
catch(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
console.log(error);
// ...
}
}
}
I'm new to Web Development, especially to Firebase.
I'm trying to check if there are no errors while creating a user in Firebase Authentication system, so I can put this user into Database.
Here's my code:
function register() {
var firebaseRef = firebase.database().ref();
var shaObj = new jsSHA("SHA-256", "TEXT")
shaObj.update(passwordField.value)
//console.log(hash)
var email = emailField.value
var password = shaObj.getHash("HEX")
if (isBarber != null) {
if (email != "" && password != "") {
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
$('#errorMsg').show();
$('#errorMsg').text(error.message);
if (error === null) {
var user = firebase.auth().currentUser;
var userID = user.uid;
firebase.database().ref('users/' + userID).set({
userEmail: email,
userPassword: password,
userIsBarber: isBarber
})
}
});
} else {
alert('Email or password fields are empty')
}
} else {
alert('Select your role')
}
}
createUserWithEmailAndPassword works properly and creates a user, but I don't know how to check if there are no errors so I could add this user to database.
Thanks a lot
You can use then() to action on a successful registration as follows:
firebase.auth().createUserWithEmailAndPassword(email, password).then(function(user) {
//Registration is successful
var user = firebase.auth().currentUser;
var userID = user.uid;
firebase.database().ref('users/' + userID).set({
userEmail: email,
userPassword: password,
userIsBarber: isBarber
})
}).catch(error) {
//Registration unsuccessful
$('#errorMsg').show();
$('#errorMsg').text(error.message);
});
I found a nice script via the Youtube tutorial of Firebase itself on how to upload a picture, however, the code works for an signed in user and I would like to do this on the sign up page.
I am under Ionic Framework so here is the code of the tutorial :
//Upload Profile Picture
//Altered code from: Firebase Youtube Channel.
//Get Elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
//Listen for file
fileButton.addEventListener('change', function(e){
//Get File
var file = e.target.files[0];
//Create a Storage Ref
var storageRef = firebase.storage().ref('profilePictures/' + file.name);
//Upload file
var task = storageRef.put(file);
var user = firebase.auth().currentUser;
//Update Progress Bar
task.on('state_changed',
function progress(snapshot){
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
uploader.value = percentage;
//if percentage = 100
//$(".overlay").hide();
},
function error(err){
},
function complete(){
}
);
});
//Display Profile Picture
function showUserDetails(){
var user = firebase.auth().currentUser;
var name, photoUrl;
if (user != null) {
name = user.displayName;
photoUrl = user.photoURL;
document.getElementById('dp').innerHTML=photoURL;
document.getElementById('username').innerHTML=name;
}}
And here is the code of my sign up controller :
.controller('signupController', ['$scope', '$state', '$document', '$firebaseArray', 'CONFIG', function($scope, $state, $document, $firebaseArray, CONFIG) {
$scope.doSignup = function(userSignup) {
//console.log(userSignup);
if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != ""){
firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {
// Sign-In successful.
//console.log("Signup successful");
var user = firebase.auth().currentUser;
var database = firebase.database();
//Upload Profile Picture
//Altered code from: Firebase Youtube Channel.
//Get Elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});
firebase.database().ref().child('/accounts/' + user.uid).set({
name: userSignup.displayname,
email: userSignup.cusername,
password: userSignup.cpassword,
description: "No description for this user",
facebook: "",
twitter: "",
}).then(function() {
// Update successful.
$state.go("login");
}, function(error) {
// An error happened.
console.log(error);
});
}, function(error) {
// An error happened.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
if (errorCode === 'auth/weak-password') {
alert('Password is weak, choose a strong password.');
return false;
}else if (errorCode === 'auth/email-already-in-use') {
alert('Email you entered is already in use.');
return false;
}
});
}else{
alert('Please enter email and password');
return false;
}//end check client username password
};// end $scope.doSignup()
}])
As you can see, I would like to integrate the first tutorial's code in the sign up and still attribute it to my user's storage with his UID but I can not find a way to do so... Any idea ?
// The code below has not been tested but it should work or at least give
//you an idea of how to approach your issue
.controller('signupController', ['$scope', '$state', '$document', '$firebaseArray', 'CONFIG', function($scope, $state, $document, $firebaseArray, CONFIG) {
$scope.doSignup = function(userSignup) {
//console.log(userSignup);
if($document[0].getElementById("cuser_name").value != "" && $document[0].getElementById("cuser_pass").value != "" && $document[0].getElementById("fileButton").value != ""){
firebase.auth().createUserWithEmailAndPassword(userSignup.cusername, userSignup.cpassword).then(function() {
// Sign-In successful.
//console.log("Signup successful");
var user = firebase.auth().currentUser;
var database = firebase.database();
//Upload Profile Picture
//Altered code from: Firebase Youtube Channel.
//Get Elements
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
user.sendEmailVerification().then(function(result) { console.log(result) },function(error){ console.log(error)});
//Get File
var file = fileButton.value; // or however way the file path can be obtained
var storageRef = firebase.storage().ref('profilePictures/' + file.name);
//Upload file
var task = storageRef.put(file);
var user = firebase.auth().currentUser;
//Update Progress Bar
task.on('state_changed',
function progress(snapshot){
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
uploader.value = percentage;
//if percentage = 100
//$(".overlay").hide();
},
function error(err){
},
function complete(){
//Obtain the URL for the uploaded photo
var photoURL = task.snapshot.downloadURL;
firebase.database().ref().child('/accounts/' + user.uid).set({
name: userSignup.displayname,
email: userSignup.cusername,
photoURL: photoURL //add a photoURL attribute and assign it to the URL of the newly uploaded file
password: userSignup.cpassword,
description: "No description for this user",
facebook: "",
twitter: "",
}).then(function() {
// Update successful.
$state.go("login");
}, function(error) {
// An error happened.
console.log(error);
});
}
);
});
}, function(error) {
// An error happened.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
if (errorCode === 'auth/weak-password') {
alert('Password is weak, choose a strong password.');
return false;
}else if (errorCode === 'auth/email-already-in-use') {
alert('Email you entered is already in use.');
return false;
}
});
}else{
alert('Please enter email and password');
return false;
}//end check client username password
};// end $scope.doSignup()
}])
So in my app I obviously want to provide the means for users to reset their passwords. The issue I'm having though is that the new documentation for User Pools is pretty ambiguous on this topic. Here is what they tell you to do for a Forgot Password flow, and the link you may find it at:
cognitoUser.forgotPassword({
onSuccess: function (result) {
console.log('call result: ' + result);
},
onFailure: function(err) {
alert(err);
},
inputVerificationCode() {
var verificationCode = prompt('Please input verification code ' ,'');
var newPassword = prompt('Enter new password ' ,'');
cognitoUser.confirmPassword(verificationCode, newPassword, this);
}
});
http://docs.aws.amazon.com/cognito/latest/developerguide/using-amazon-cognito-user-identity-pools-javascript-examples.html
However when I drop this code into my project where a cognitoUser is defined and signed in, nothing seems to happen. I understand I need to somehow integrate this code with sending a verification code to the user, and asking them for a new password, but can't find anything on how to do this. Thoughts?
Thanks
AWS' docs are terrible on this topic (Cognito). You basically need to setup cognitoUser, then call forgotPassword
export function resetPassword(username) {
// const poolData = { UserPoolId: xxxx, ClientId: xxxx };
// userPool is const userPool = new AWSCognito.CognitoUserPool(poolData);
// setup cognitoUser first
cognitoUser = new AWSCognito.CognitoUser({
Username: username,
Pool: userPool
});
// call forgotPassword on cognitoUser
cognitoUser.forgotPassword({
onSuccess: function(result) {
console.log('call result: ' + result);
},
onFailure: function(err) {
alert(err);
},
inputVerificationCode() { // this is optional, and likely won't be implemented as in AWS's example (i.e, prompt to get info)
var verificationCode = prompt('Please input verification code ', '');
var newPassword = prompt('Enter new password ', '');
cognitoUser.confirmPassword(verificationCode, newPassword, this);
}
});
}
// confirmPassword can be separately built out as follows...
export function confirmPassword(username, verificationCode, newPassword) {
cognitoUser = new AWSCognito.CognitoUser({
Username: username,
Pool: userPool
});
return new Promise((resolve, reject) => {
cognitoUser.confirmPassword(verificationCode, newPassword, {
onFailure(err) {
reject(err);
},
onSuccess() {
resolve();
},
});
});
}
Resetting the password with forgot password flow has two steps:
Start the process by requesting for a verification code from the service. A code will be delivered to the user's phone/email.
Set the new password using the delivered verification code.
Use these two functions to perform the above steps and reset the password:
cognitoUser.forgotPassword(): This will start the forgot password process flow. The service generates a verification code and sends it to the user. The "data", returned through callback.inputVerificationCode(data), indicates where the verification code was sent.
cognitoUser.confirmPassword(): Use the delivered verification code with this function to set a new password.
I had this same issue. Was able to work through it by using confirmPassword() in the following way.
//validation of input from form
req.checkBody('email', 'Username is required').notEmpty();
req.checkBody('password', 'Password is required').notEmpty();
req.checkBody('confirmationcode', 'Confirmation Code is required').notEmpty();
var confirmationCode = req.body.confirmationcode;
var password = req.body.password;
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username: req.body.email,
Pool: userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.confirmPassword(confirmationCode, password, {
onFailure(err) {
console.log(err);
},
onSuccess() {
console.log("Success");
},
});
If as me, you find how to handle this case with amplify
import { Auth } from 'aws-amplify';
// Send confirmation code to user's email
Auth.forgotPassword(username)
.then(data => console.log(data))
.catch(err => console.log(err));
// Collect confirmation code and new password, then
Auth.forgotPasswordSubmit(username, code, new_password)
.then(data => console.log(data))
.catch(err => console.log(err));
See https://docs.amplify.aws/lib/auth/manageusers/q/platform/js#forgot-password
So Even I faced a same issue, Even in AWS cognito documentation it was not clear, basically the process involves two steps.
call cognitoUser.forgotPassword() this will start forgot password process flow, and the user will receive a verification code.
then call cognitoUser.confirmPassword() which will reset the password verifying the code send to the email of user.
Below I have given a cognitoUserClass(Typescript) which has static methods forgotPassword() and confirmPassword() methods which implements those two steps.
import * as AmazonCognitoIdentity from 'amazon-cognito-identity-js'
class cognitoUserClass {
static cognitouser: AmazonCognitoIdentity.CognitoUser
static userPool = new AmazonCognitoIdentity.CognitoUserPool({
UserPoolId: 'your pool id',
ClientId: 'your client id',
})
static forgotPassword(userName: string): void {
const userData = {
Username: userName,
Pool: cognitoUserClass.userPool,
}
cognitoUserClass.cognitouser = new AmazonCognitoIdentity.CognitoUser(
userData
)
cognitoUserClass.cognitouser.forgotPassword({
onSuccess: (data) => {
console.log(data)
},
onFailure: (err) => {
console.log('ERR:', err)
},
})
}
static confirmPassword(
verificationCode: string,
newPassword: string
): void {
cognitoUserClass.cognitouser.confirmPassword(
verificationCode,
newPassword,
{
onFailure(err) {
console.log(err)
},
onSuccess(data) {
console.log(data)
},
}
)
}
}
export { cognitoUserClass }
After you've got the verification code, using aws-amplify it's as easy as follows
import { Auth } from "aws-amplify";
Auth.forgotPasswordSubmit(email, verificationCode, newPassword)
.then(() => {
//redirect to sign-in page
})
.catch(error => {
//error logic
})