I am working on a web app with an existing user base. Email verification was not initially implemented in the sign in flow.
I have successfully added code for sending verification email for all new sign ups but I also wanted to make a small page (or modal) where current users would be shown a button that would send the verification link to their inbox
The current sign up flow where I created the user with createUserWithEmailAndPassword I was able to get access to the user.user.sendEmailVerification method to do so, but cannot find any way to access this method to implement the feature for existing users.
Is there a way to access the sendEmailVerification method after the user has been created?
I am assuming that it would be available within the onAuthStateChange trigger but implementing that would lead to a bad UX (as I do not want to prompt the users everytime they login)
Edit:
I know the documentation states that we can use the firebase.auth().currentUser to get the current user but that, for some reason did not work.
Also, I found references online suggesting to no longer use that method and they mentioned to use the onAuthStateChange method instead, which is why I was looking into that approach
You can try this method:
const btnVerifyEmail = document.getElementById("btn-verify-id")
btnVerifyEmail.onclick = function () {
const user = firebase.auth().currentUser;
user.sendEmailVerification().then(function() {
// Email sent.
console.log("Email Sent")
}).catch(function(error) {
// An error happened.
console.log(error)
});
}
It's mentioned in the documentation right here
The sendEmailVerification() should not be called in the onAuthStateChanged event because it would blast out an email on every page load if the user's email isn't verified.
You should instead display a notification on the page if User.emailVerified is false that contains a link to send the user an email.
Here's a working example:
// On page load watch for auth state changes
firebase.auth().onAuthStateChanged(function(user) {
// If the user is logged in
if (user) {
// If the user's email isn't verified
if (!user.emailVerified) {
// Show the notification bar that informs the user that they need to validate
// their email by clicking a link. Let's pretend the link looks like this:
// Send me a verification email
showNotification();
}
}
});
// Function attached to your link's onclick event
function sendEmailVerification() {
// Retrieve the current user
const user = firebase.auth().currentUser;
// If user's email is already verified, exit
if (user.emailVerified) {
return;
}
// Tell Firebase to send the verification email and discard the promise
user.sendEmailVerification().then().catch();
}
Dharmaraj's answer is good but this is a full example.
Related
I'm building a flutter app with firebase auth dealing with users. My goal is to streamline the user onboarding experience by allowing email sign up and verification without forcing the user to sign out and sign in again to use the full features. Before testing with real users, this is exactly what I had configured but the overwhelming feedback is that it interrupts and may even cause the user to abandon the authentication flow altogether; the app should simply detect this change in verification status without having to log out.
WHAT I'VE TRIED
I'm using the following in main.dart to provide auth state throughout the app:
StreamProvider < FirebaseUser > .value(
value: FirebaseAuth.instance.onAuthStateChanged,
),
I extract it with
user1 = Provider.of<FirebaseUser>(context, listen: true);
in the individual pages and access different properties like user1.isEmailVerified in ternary expressions to determine what is displayed to the user.
I know that onAuthStateChanged doesn't get called for changes in email verification, only for user sign in and sign out as explained in the accepted answer for this question, but I still need to update the user value that determines the UI shown when a user verifies their email. I have chosen to use a button "complete email verification" which will manually trigger the check and reload of the user profile with the new value once verified. This is the code for that button:
() async {
// 1
FirebaseUser user =
await _firebaseAuth.currentUser();
print(user.isEmailVerified); // returns false
// 2
await user.getIdToken();
print(user.isEmailVerified);// returns false
// 3
await user.reload();
print(user.isEmailVerified);// returns false
//4
user = await _firebaseAuth.currentUser();
print(user.isEmailVerified);// this finally returns true
}
where final _firebaseAuth = FirebaseAuth.instance;
I've noticed that calling .currentUser() twice (before and after reload()) is the only way to actually return true for the .isEmailVerified property without logging out and back in. This is an answer I found in this GitHub thread.
If I press the button again, all the print statements above return true.
THE PROBLEM
That's great, but the problem is the user1 variable that stores the FirebaseUser stream does not change or update even after this, so the UI remains the same despite the user email being verified. I know this because I've placed the following checks in the code:
print('this one is from the stream:');
print(user1.isEmailVerified);
It still returns false even when in the button function body, the user.isEmailVerified returns true.
I've tried calling set state within the button like this:
setState(() {user1 = user; });
But it seems that the value of user1 still remains the same and still returns false for the user1.isEmailVerified, even though I'm trying to set it to the new value derived from the button's function!
This is really frustrating as I feel I'm very close but I just don't know how to refresh the value of the user1 (firebase user stream) throughout the app or even just on that one screen. This should be more straightforward.
I've noticed that pressing hot reload after verifying the email and pressing the button above will automatically show the updated .isEmailVerified value throughout the app while debugging on flutter. Is there a way to programmatically trigger the same kind of rebuild that hot reload uses that will also refresh the firebase user stream data WITHOUT having to log out and sign back in? Maybe this is where the answer lies, but I don't know how to proceed with that.
Any help would be appreciated.
Instead of onAuthStateChanged, you can use userChanges stream which
provides events on all user changes, such as when credentials are linked, unlinked and when updates to the user profile are made. The purpose of this Stream is to for listening to realtime updates to the user without manually having to call [reload]
see https://firebase.flutter.dev/docs/auth/usage/#authentication-state
I was also facing this problem and get fixed with the help of:
await user.reload();
user = await _auth.currentUser();
user.isEmailVerified => now it is true
I came across your question while trying to figure out why user.reload() wasn't updating the email verification status of my user. Thank you for suggesting getting currentUser again, which works.
To answer your question, I use a BehaviorSubject from rxdart to store my FirebaseUser, so I can get notifications of the user changing from anywhere in the app with a StreamBuilder:
final BehaviorSubject<FirebaseUser> firebaseUser = new BehaviorSubject<FirebaseUser>();
userListener = FirebaseAuth.instance.onAuthStateChanged.listen((user) {
if (user == null) {
userSignedOut();
}
else if (currentFirebaseUser == null || user.uid != currentFirebaseUser.uid) {
processNewUser(user);
}
firebaseUser.add(user);
});
Auth state change listener didn't work for me. Field isEmailVerified remains false even after user verifies his email.
My workaround:
Started from the assumption that user leaves the app to verify his email (which mean app is paused), and he returns to the app after verifying it (app resumes).
What I did was attach a WidgetsBinding to a relevant stateful widget where I wanted to display if email was verified (but can be done elsewhere). This involves two steps.
First step is to attach the binding:
#override
void initState() {
WidgetsBinding.instance.addObserver(this);
super.initState();
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
Second step is to override the didChangeAppLifecycleState to reload the user. I created a function that does the reload and sets a new firebaseUser object
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed && !firebaseUser.isEmailVerified)
refreshFirebaseUser().then((value) => setState(() {}));
super.didChangeAppLifecycleState(state);
}
Future<void> refreshFirebaseUser() async {
await firebaseUser.reload();
firebaseUser = FirebaseAuth.instance.currentUser;
}
So what this is basically doing is to reload firebase user object everytime the user returns to the app, while its email is not verified. This seems cleaner than the best workaround that I've found in SO which consisted in setting and cancelling a recurrent action through a timer.
The FirebaseAuth Flutter plugin provides a Stream with
onAuthStateChanged, which is useful for getting updates when a user
signs-in or signs-out, but it fails to provide an update when the user
data itself changes. A common problem is when we want to detect if the
user has just verified his e-mail address, in other words get if
FirebaseUser.isEmailVerified changed its value, as this is updated
server-side and not pushed to the app.
FirebaseAuth.currentUser() will only detect changes made locally to
the user, but if any changes are made server-side, it won't detect,
unless FirebaseUser.reload() is called first and then we need to call
FirebaseAuth.currentUser() again to get the reloaded user, but still
this user won't be emitted by onAuthStateChanged.
This can help you:
https://pub.dev/packages/firebase_user_stream
You will find a manual solution or you can use the package.
My use case is that I want to ask newly signed up users to enrich basic info like their names.
So I was hoping to do it like:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
if (some indicator tells me it is newly signed up user)
{redirect to a form to fill in more info}
} else {
// No user is signed in.
}
});
I checked the doc, and could not find anything related to this...
Thanks for the help in advance.
Since version 4.6.0: https://firebase.google.com/support/release-notes/js#4.6.0
You can get if a user is new or existing in 2 ways:
If you are getting back a UserCredential result, check result.additionalUserInfo.isNewUser
Check firebase.auth().currentUser.metadata.creationTime === firebase.auth().currentUser.metadata.lastSignInTime
Previously you had to do that on your own and keep track of the user using Firebase Realtime Database. When a user signs in, you check if a user with the specified uid exists in the database or not. If the user was not found, it is a new user, you can then add the user to the database. If the user is already in the database then this is a returning existing user. Here is an example in iOS.
Handing Firebase + Facebook login process
Example for using result.additionalUserInfo.isNewUser:
firebase.auth().signInWithPopup(provider).then((result) => {
console.log(result.additionalUserInfo.isNewUser);
});
One thing you can do is do things in the callback function of the signup function, the signup function do return a promise. You can do something like this:
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function(user) {
//I believe the user variable here is the same as firebase.auth().currentUser
//take the user to some form you want them to fill
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
However, I don't really recommend doing it this way because the client side code can be unreliable. Think about what if a user suddenly disconnect before they can fill the form. Their data will be incomplete in your database. So if you do it this way, do set a flag in your user's profile when they submit the form so that you know who filled detailed information and who didn't.
Another better way to do this is using firebase cloud functions. You can have code like this in your cloud functions. Cloud functions are written in node.js so you don't need to spend time on another language.
exports.someoneSignedUp = functions.auth.user().onCreate(event => {
// you can send them a cloud function to lead them to the detail information form
//or you can send them an welcome email which will also lead them to where you want them to fill detailed information
});
This way is much better because you can safely assume that your cloud functions server will never be down or compromised. For more information about cloud functions you can refer to their doc: https://firebase.google.com/docs/functions/auth-events
You can check the sign-in methods the user has (if any). If there are none, it is a new user.
// Fetch sign in methods (if any)
Auth.auth().fetchSignInMethods(forEmail: userEmail!) { [self] signInMethodsArray, error in
// Check for error and alert user accordingly
if let error = error {
// handle errors
}
// Email accepted.
// Check if new or returning user.
else {
if (signInMethodsArray == nil) {
// New User
}
else {
// Returning User
}
}
}
This is Swift (iOS) code, but the concept is the same across languages.
My use case is that I want to ask newly signed up users to enrich basic info like their names.
So I was hoping to do it like:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
if (some indicator tells me it is newly signed up user)
{redirect to a form to fill in more info}
} else {
// No user is signed in.
}
});
I checked the doc, and could not find anything related to this...
Thanks for the help in advance.
Since version 4.6.0: https://firebase.google.com/support/release-notes/js#4.6.0
You can get if a user is new or existing in 2 ways:
If you are getting back a UserCredential result, check result.additionalUserInfo.isNewUser
Check firebase.auth().currentUser.metadata.creationTime === firebase.auth().currentUser.metadata.lastSignInTime
Previously you had to do that on your own and keep track of the user using Firebase Realtime Database. When a user signs in, you check if a user with the specified uid exists in the database or not. If the user was not found, it is a new user, you can then add the user to the database. If the user is already in the database then this is a returning existing user. Here is an example in iOS.
Handing Firebase + Facebook login process
Example for using result.additionalUserInfo.isNewUser:
firebase.auth().signInWithPopup(provider).then((result) => {
console.log(result.additionalUserInfo.isNewUser);
});
One thing you can do is do things in the callback function of the signup function, the signup function do return a promise. You can do something like this:
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function(user) {
//I believe the user variable here is the same as firebase.auth().currentUser
//take the user to some form you want them to fill
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
However, I don't really recommend doing it this way because the client side code can be unreliable. Think about what if a user suddenly disconnect before they can fill the form. Their data will be incomplete in your database. So if you do it this way, do set a flag in your user's profile when they submit the form so that you know who filled detailed information and who didn't.
Another better way to do this is using firebase cloud functions. You can have code like this in your cloud functions. Cloud functions are written in node.js so you don't need to spend time on another language.
exports.someoneSignedUp = functions.auth.user().onCreate(event => {
// you can send them a cloud function to lead them to the detail information form
//or you can send them an welcome email which will also lead them to where you want them to fill detailed information
});
This way is much better because you can safely assume that your cloud functions server will never be down or compromised. For more information about cloud functions you can refer to their doc: https://firebase.google.com/docs/functions/auth-events
You can check the sign-in methods the user has (if any). If there are none, it is a new user.
// Fetch sign in methods (if any)
Auth.auth().fetchSignInMethods(forEmail: userEmail!) { [self] signInMethodsArray, error in
// Check for error and alert user accordingly
if let error = error {
// handle errors
}
// Email accepted.
// Check if new or returning user.
else {
if (signInMethodsArray == nil) {
// New User
}
else {
// Returning User
}
}
}
This is Swift (iOS) code, but the concept is the same across languages.
Assuming I want to create users upon authorizing the app, how would I grab their email during the onAuth callback...? Looks like the callback assumes the user is already logged in. Am I thinking about it correctly?
I noticed when installing the Fishbowl Prizes app, after auth I can click on the accounts tab and see that all my account info is pre-populated from my shopify store account (name, email, address, etc).
I'm not sure if I should go by the title or the content of the post in terms of answering your question, so I'll provide a very simple example of how to get the info from the API and do something with it here.
I have provided a more in depth answer related specifically to grabbing the details from the API for user account creation here: https://github.com/froatsnook/meteor-shopify/issues/15#issuecomment-177413630
Looks like the callback assumes the user is already logged in.
The userId param is undefined if there is no user. If your onAuth operations don't need to do anything with the user, you can just leave it out of the params. In your case you'll just want to handle it conditionally using an if/else block:
if(!userId){
// do stuff
} else {
// do other stuff
}
On to the example of grabbing those details from the API:
All the prepopulated information you are seeing is available from the Shopify API in the shop object. You already have the access token when onAuth callbacks are fired, so you can just grab it from the API immediately after you have inserted the shop's Keyset.
For the sake of simplicity, in this example we'll assume the user already exists and is logged in. In your server-side onAuth callback (after you have inserted the keyset) you can do something like this to add those fields to the user's profile object:
Shopify.onAuth(function(access_token, authConfig, userId) {
var shopUUID = uuid.new(); // Not secure to name keyset same as the shop!
Shopify.addKeyset(shopUUID, {
access_token: access_token
});
var api = new Shopify.API({
shop: authConfig.shop,
keyset: shopUUID
});
// get the Shop object from the API
var shopObj = api.getShop();
var userInfo = {
'profile.name': shopObj.shop_owner,
'profile.email': shopObj.email,
'profile.phone': shopObj.phone,
'profile.shopName': shopObj.name
};
Meteor.users.update({_id: userId}, {$set: userInfo})
});
Then you can use them in templates like this:
{{currentUser.profile.name}} or {{currentUser.profile.email}}
Or in functions like so:
var realName = Meteor.user().profile.name
or
var userEmail = Meteor.user().profile.email etc
For a more about using this data for user creation, see my explanation here:
https://github.com/froatsnook/meteor-shopify/issues/15#issuecomment-177413630
I am designing a math problem site using Firebase and I want to display a problem when someone logs in.
What I want in pseudo code is,
if user logged in
document.write([problem])
else
document.write(Please login to see the problem)
Any ideas?
When using Firebase Simple Login, upon instantiation of the FirebaseAuthClient you will define a callback function that is invoked any time the login state of the user changes.
From https://www.firebase.com/docs/security/simple-login-overview.html:
var chatRef = new Firebase('https://SampleChat.firebaseIO-demo.com');
var authClient = new FirebaseAuthClient(chatRef, function(error, user) {
if (user) {
// user authenticated with Firebase
} else if (error) {
// an error occurred authenticating the user
} else {
// user is logged out
}
});
For your case, if you have a user object, you can hide any login-related UI and show the problem, otherwise, hide the problem and show any login-related UI.
Then, to log users in, choose one or more of the Firebase Simple Login authentication providers, configure that provider in Forge (accessed via https://<your-firebase>.firebaseio.com) and attempt to authenticate the user via:
authClient.login(<provider>, <options>);
I hope that helps!