Firebase Login - email verification needed

Feature requests
#1

I was trying to add user login via email - it worked fine. However, there is no email verification which makes the process unusable in the real world.

The problem is with the current implementation of Firebase Login - Email within React Studio: anyone can type in any fake email address to create an account and access areas within Login Gate.

There needs to be an email verification step in place to make sure the user indeed has control of his / her email address - some kind of activation link or code inside a template email to be sent to the user.

Thanks!

#2

If you use phone number as the login instead of email - it makes them 2FA through a confirmed text code. That’s the model I am moving to for most of my apps with React Studio. I think it’s a better user experience to do verification through an SMS code as opposed to an email. Like this:

Screen Shot 2020-12-11 at 5.08.05 PM
Screen Shot 2020-12-11 at 5.08.05 PM2492Ă—1322 411 KB

#3

You should tag this as “site feedback” though so it gets categorized in the right place.

#4

Thanks for the comment. I thought of going with SMS and I might give it a try.

I think SMS makes sense especially for a mobile app. Mine will be a web application initially, and email for signup / sign-in is still the norm …

I also updated my post as Feature Requests … I’m really hoping the team can spare some time toward a small enhancement :slight_smile:

1 Like
#5

That’s a good point. Right now the average traffic most e-commerce sites get across mobile and desktop devices is about 50/50. Also - it’s the norm as you say. Good feature request.

Although - from what I can tell - the React Studio team is pretty busy right now. You could go down the plugin route and edit the Firebase login plugin to do this I suppose if you wanted to try something out quicker.

#6

I’m working on something similar but different in this thread. You can see how you edit a plugin from this one. Data Sheet Script Filtering Help

#7

Cool. The plugin edit capability seems to start AFTER the user authentication process - which is what you needed for your scenario.

In my case, the Firebase login documentation mentions “createUserWithEmailAndPassword” as a js method to invoke after the user enters email and password - which React Studio calls. This method is not exposed in the Plugin Manager or anywhere else. So I’m not sure if I can actually customize it myself …

#8

I cobbled something together in the plugin manager after all. Thanks @ousooners2834 for pointing me in the right direction.

I added a new method sendVerifyEmail() just above saveCurrentUserDataInApp() in the code, and called sendVerifyEmail() inside componentDidMount() instead of saveCurrentUserDataInApp() if the user’s emailVerified status is false and the sign-in method is email.

sendVerifyEmail() {
var user = firebase.auth().currentUser;

user.sendEmailVerification().then(function() {
}).catch(function(error) {
	    console.log("Error happened : ", error);
});

}

componentDidMount() {
this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(
(user) => {
this.setState({isSignedIn: !!user});
if (user != null) {
if ( (user.Sb.emailVerified == false) && (user.providerData[0].providerId == “password”) ) {

  			// Send a verification email. No login.
		this.sendVerifyEmail();
    	}
        else {
    		// Verification email clicked on. Login success
    		this.saveCurrentUserDataInApp();
        	        this.loginSuccess(); // not currently used
    	}
       }
    }
);

}

I also customized the esm.js file to let users know to expect a verification email. esm.js is in:

  • works in progress/node_modules/firebaseui/dist/