I'm trying to write a function to reauthenticate a firebase user that is logged in with a facebook account. For the email I create the credentials from the email and password but with Facebook no password is stored for that user. I tried to find this in the docs but couldn't find
let user = firebase.auth().currentUser;
let credential = '';
//User created with Email
if(user.providerData[0].providerId === "password") {
credential = firebase.auth.EmailAuthProvider.credential(
user.email,
this.state.password
);
}
//User created with Facebook
if(user.providerData[0].providerId === "facebook.com") {
credential = firebase.auth.FacebookAuthProvider.credential(
? // <= User Email, Token
)
}
user.reauthenticateAndRetrieveDataWithCredential(credential).then(function(){
user.delete().then(function() {
}).catch(function(error) {
console.log(error)
}
}).catch((error) => {
console.log(error)
}
Based on the FacebookAuthProvider.credential() signature, you will need the OAuth token / accessToken to create the credential.
You can extract the accessToken when the user logs in:
firebase.auth().signInWithPopup(provider).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;
// ...
})
The example was extracted from https://firebase.google.com/docs/auth/web/facebook-login where you can find more info about this.
If you want to reauthenticate a Facebook user, simply use reauthenticateWithPopup or reauthenticateWithRedirect, assume you used signInWithPopup or signInWithRedirect to sign in the user with Facebook.
const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().currentUser.reauthenticateWithPopup(provider)
.then((userCredential) => {
// User successfully reauthenticated.
})
.catch((error) => {
// Error.
});
Related
Passwordless sign in is not working in Firebase. Email was sent successfully. But after clicking on the link provided in the email that link redirects to the website with api key, mode etc. But not signing in or saving the email in firebase.
Please help me!!
const handleContinueWithEmail = async (event: any) => {
event.preventDefault();
setSignInLoading(true);
if (isSignInWithEmailLink(auth, window.location.href)) {
setEmail(window.localStorage.getItem("emailForSignIn"));
if (!email) {
setEmail(window.prompt("Please provide your email for confirmation"));
}
signInWithEmailLink(auth, email, window.location.href)
.then((result) => {
window.localStorage.removeItem("emailForSignIn");
// You can access the new user via result.user
// Additional user info profile not available via:
// result.additionalUserInfo.profile == null
// You can check if the user is new or existing:
// result.additionalUserInfo.isNewUser
console.log(result.user);
})
.catch((error) => {
// Some error occurred, you can inspect the code: error.code
// Common errors could be invalid email and invalid or expired OTPs.
console.log(error);
});
} else {
sendSignInLinkToEmail(auth, email, {
url: location.origin,
handleCodeInApp: true,
})
.then(() => {
window.localStorage.setItem("emailForSignIn", email);
setSignInLoading(false);
setShowSuccessToast(true);
setSuccessText(
"Sign in email has been sent! Check spam folder if not found."
);
setTimeout(function () {
setShowSuccessToast(false);
}, 6000);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
setSignInLoading(false);
console.error(errorCode, errorMessage);
});
}
};
Successfully redirected with API key, mode, and more. But not sign in or saving email on Firebase.
I'm trying to add passwordless sign in using fireabase on my website. But it's not sign in or saving email to firebase user list. So, I need help to solve this problem.
I'm having a hard time getting the Firebase signInWithRedirect with google to work. Below is the doc I've been looking at: https://firebase.google.com/docs/auth/web/google-signin.
I have a login page which contains a button. When the button is clicked it take you to google sign in page. However every time I sign in with google it redirects me back to the login page of my app. Part of the code is shown below:
login() {
const auth = getAuth();
signInWithRedirect(auth, provider);
console.log("AAA")
auth.onAuthStateChanged((user) => {
console.log("BBB")
if (user) {
this.$router.push('home')
} else {
getRedirectResult(auth)
.then((result) => {
console.log("WIN0")
// This gives you a Google Access Token. You can use it to access Google APIs.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
console.log(token)
console.log(user)
console.log("WIN")
}).catch((error) => {
console.log("ERROR0")
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
console.log(errorCode)
console.log(errorMessage)
console.log(email)
console.log(credential)
console.log("ERROR")
// ...
});
}
})
From the console, I only ever see the log AAA, but I don't see any other logs at all. What am I missing? Thank you.
I should also mention that I'm doing this in vue js but I don't think it matters.
So the problem was that I have onAuthStateChanged within the login function. Since the SignInWithRedirect takes to a different page and then redirects back to the page where it was called, in vue I basically moved the onAuthStateChanged to the mounted lifecycle hook.
mounted() {
auth.onAuthStateChanged((user) => {
console.log("BBB")
if (user) {
this.$router.push('home')
} else {
getRedirectResult(auth)
.then((result) => {
console.log("WIN0")
// This gives you a Google Access Token. You can use it to access Google APIs.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
console.log(token)
console.log(user)
console.log("WIN")
}).catch((error) => {
console.log("ERROR0")
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
console.log(errorCode)
console.log(errorMessage)
console.log(email)
console.log(credential)
console.log("ERROR")
// ...
});
}
})
}
I'm trying to make just a simple authentication app with electron and firebase redirect, but if the user is already logged in and I use the firebase.auth().currentUser.getIdToken() to get the IdToken of that user, but when i try that token in
firebase.auth().signInWithCredential(credential) I get the error that says ERROR: auth/invalid-credential
Here is my code front-end
firebase.auth().onAuthStateChanged( async function (user) {
if (user) {
// User is signed in.
var user = await firebase.auth().currentUser;
if (user != null) {
await firebase.auth().currentUser.getIdToken().then(function(idToken) {
window.location.href = "electron://"+idToken;
}).catch(function(error) {
console.log(error)
});
}
} else {
// No user is signed in.
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
}
});
Here is my code back-end
app.on('second-instance', (event, commandLine, workingDirectory) => {
if (commandLine[2]) {
var url = commandLine[2].split('/')
var id_token = url[2]
console.log('id: ', id_token)
// Build Firebase credential with the Google ID token.
var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(credential)
.then((success)=>{
myWindow.loadFile('./scr/welcome.html')
console.log('RESULT: ',success)
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log('ERROR:', errorMessage)
// 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:', credential)
// ...
})
}
I'm missing something or doing something wrong?
That's not how ID tokens work. The purpose of an ID token is to pass to your backend, so that it can validate the identity of the signed in user, and perform some action on their behalf. It's not valid for signing in on the client again. You might want to review the documentation on use of ID tokens to learn how this works.
signInWithCredential only works with Google Auth when you correctly construct a GoogleAuthProvider credential. There is plenty of sample code in the API documentation for that.
I am a newbie to firebase. I need a way to verify an email address during the signup process. The user should NOT be automatically logged in without verification. What code can I add to allow me to check if the email is verified or not. If yes, the user can login. If not, they need to very first. Please see code below
async registerUser(customer: Customer, password: string) {
try {
const newUserCredential = await this.firebaseAuth.createUser(
customer.email,
password
);
// store user details in firestore
this.firebaseStore.storeUserDetails(newUserCredential, customer);
// send email verification
await newUserCredential.user.sendEmailVerification();
} catch (error) {
console.error(error);
throw new Error(error.message);
}
}
You just need to check the emailVerified property on the User object.
const {emailVerified} = this.firebaseAuth.currentUser
if (emailVerified) {
// Email is verified
} else {
console.log("Email is not verified")
// Alert user
}
I'm logging in users via firebase-auth and need to pass their user uid to the redirected page. How can the user-uid be passed?
I've tried using the docs on firebase auth but cant quite solve it
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = loginForm['email'].value;
const password = loginForm['password'].value;
console.log(email, password);
firebase.initializeApp(config);
firebase.auth().signInWithEmailAndPassword(email, password)
.then(cred => {
if(email ==='admin#mombasa.com' && password ==='adminMomb') {
window.location = './admin-map.php';
}
else if(email ==='admin#nairobi.com' && password ==='adminNai') {
window.location = './admin-map.php';
}
else if(email ==='admin#eldoret.com' && password ==='adminEld') {
window.location = './admin-map.php';
}
else firebase.auth().onAuthStateChanged(function(user) {
window.user = user;
console.log('logged in ', user);
window.location = './dailyreports.php';
console.log('logged in ', user);
});
}).catch(
function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
console.log(errorMessage, errorCode);
}
)
;
});
On navigation to the next page, I expected to see the user-uid output in the console but it returns blank
Instead of passing the UID, it's better to pick up the state in the next page with a so-called authentication state listener.
As shown in the documentation on getting the currently signed in user:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
There will be no delay in picking up the user account this way on the new page, as the Firebase SDK will be able to restore the state from the information it stored in local storage.