Listen to user.emailVerified state in firebase with React Native(Expo)

Question

Note: This question was marked as duplicate and there was three questions linked, but they are not similar to my question. My question is how can I take a certain action when the email of the user gets verified in Firebase with React Native. The questions that were linked doesn't answer my question, one of them are for flutter (yet it doesn't show how to resolve my issue), the other two show that user.emailVerified is still false even after the user clicks the verification link in their email, which is definitely not my problem.

Now let me tell you what I want to do, in my App I want to implement a sign up system with email/password. Whenever the user creates an account, I am sending a verification email containing a verification link to their email using firebase like the following:

sendEmailVerification(user);

Right after that, I am redirecting the user to another screen which says that the user should verify their email. In the new screen I have a few functionalities like, change email address and resend verification email. Whenever the user verifies their email by clicking the verification link in the email, I want to navigate to the home page. But my issue is, I do not know when the user clicks the verification email.

Here's what I have tried Some people have suggested me to use user.reload() after a certain time period. But here is a con, Imagine I am calling user.reload() after every 20 seconds. But, if the user clicks the verification link after 21 seconds then the user will have to wait 19 seconds for the app to know that their email was verified. The user is most unlikely to wait that time period and they might end up uninstalling the app.

So, I will be grateful if you show me a code example about how can I achieve this or you can show me a sample source code in GitHub which does something similar to me.

Answer 1

Whenever the user clicks on the verification link, I want the app to navigate to the next screen.

The emailVerified property will be set to true only if the user clicks the link that is received in the email. The problem is that there is no callback for that, so you'll have to wait until the user clicks the link in the email, and right after that refresh their sign-in credentials. You can achieve this either by signing in again or calling the reload() method. These are the only options that you have in order to set the emailVerified property to true.

Besides that, onAuthStateChanged is not triggered when the emailVerified property turns to true