1

I have a React web app which has Firebase Auth built in.

Upon a User signing in, I only want the request to successfully complete if the User's email is verified. If it isn't, I want it to error out.

I suspect this will be done through accessing this (taken from the Firebase docs):

var user = firebase.auth().currentUser;
var name, email, photoUrl, uid, emailVerified;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  emailVerified = user.emailVerified;
  uid = user.uid;  // The user's ID, unique to the Firebase project. Do NOT use
                   // this value to authenticate with your backend server, if
                   // you have one. Use User.getToken() instead.
}

However, I'm unsure if I can implement this in my sign-in flow, so the user doesn't get redirected to their dashboard, before the check is then done. I want it to happen upon submitting the request on the sign in page.

Can someone state how I can tweak this function to build in a check to see if the email is verified, before the user is signed in?

  onSubmit = (e) => {

    e.preventDefault()

    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
      .then(function(response) {
        console.log(response);
        console.log("Successfully logged in.")
      })
      .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage);
      });

      this.props.history.push("/dashboard")

  }

Or is it only possible to check once the user is signed in? Any help would be appreciated!

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
Jon Nicholson
  • 927
  • 1
  • 8
  • 29
  • 1
    All that signing in to Firebase Authentication does, is prove that you can enter the same credentials (email/password) as upon sign-up. There is no way to require the email address to be verified in order to allow signing in to Firebase Authentication. What you **can** do is prevent the user from navigating to the dshboard, and preventing them from accessing privileged resources on the server based on the status of the `emailVerified` property in their profile. – Frank van Puffelen Oct 28 '20 at 14:26
  • Thanks for the response - so would the best way for me to do this is to check if the user has their email verified within my componentDidMount on my dashboard? And then if they aren't, to redirect them to the sign-in page (or anywhere else I think is best)? – Jon Nicholson Oct 28 '20 at 14:35
  • Yup, that is common. If you want to secure data, you'll also want to add checks there. The links I provided have some examples of that too. – Frank van Puffelen Oct 28 '20 at 14:45

1 Answers1

0

You can only know if about the state of the emailVerified flag in your app after the user has signed in, since it's a property of the User object that results from a successful sign-in. What you should do is use this flag to determine where the user navigates within your app after that.

If you want to prevent the user from reading and writing data in your database, you will probably want to enforce that on your backend, or in security rules for Firebase databases.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441