Email verification before registration confirmation using Meteor and React

Question

Just learning Meteor and Reactjs by following this tutorial , which is very nice to work with. This is a registration page, by default this does not verify via email before registration is done. In a real life scenario i'll like to have the users verify their emails before registration can be concluded, as a newbie I'm poised with howto, kindly help.

Signupform = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        let data = {};
        data.currentUser = Meteor.user();
        return data;
    },
    getInitialState(){
        return {
            message: '',
            messageClass: 'hidden'
        }
    },
    displayError(message){
        this.setState({message: message, messageClass: 'alert alert-danger registerError'});
    },
    handleSubmit(e){
        e.preventDefault();
        this.setState({message: '', messageClass: 'hidden'});
        var that = this;
        var first_name = ReactDOM.findDOMNode(this.refs.first_name).value.trim();
        var last_name = ReactDOM.findDOMNode(this.refs.last_name).value.trim();
        var email = ReactDOM.findDOMNode(this.refs.email).value.trim();
        var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
        var user = {
            email: email,
            password: password,
            profile: {
                fullname: (first_name + last_name).toLowerCase(),
                firstname: first_name,
                lastname: last_name,
                avatar: 'http://placehold.it/150x150',
                friends: []
            }
        };
        Accounts.createUser(user, function (e) {

            if (e) {
                that.displayError(e.reason);
            } else {
                FlowRouter.go('/dashboard');
            }
        })


    },
    render(){
        return (
            <div className="row">
                <div className="signup">
                    <h1>Sign Up</h1>
                    <p className="text-muted">It's free and always will be.</p>
                </div>
                <form onSubmit={this.handleSubmit}>
                    <div className="col-sm-9">
                        <div className="row">
                            <div className="col-sm-6 form-group">
                                <input ref="first_name" type="text" placeholder="First name"
                                       className="form-control"/>
                            </div>
                            <div className="col-sm-6 form-group">
                                <input ref="last_name" type="text" placeholder="Last name"
                                       className="form-control"/>
                            </div>
                        </div>


                        <div className="form-group">
                            <input type="text" placeholder="Email or mobile number" ref="email"
                                   className="form-control"/>
                        </div>
                        <div className="form-group">
                            <input type="password" placeholder="New password" ref="password"
                                   className="form-control"/>
                        </div>
                        <button type="submit" className="btn btn-md btn-success">Sign Up</button>
                        <span className={this.state.messageClass}>{this.state.message}</span>

                    </div>
                </form>
            </div>
        )
    }
});

Answer 1

The Meteor accounts package has a function designed for verifying an email address, but this happens after the user has created an account. Accounts.sendVerificationEmail

Here is a link to the docs for it.

Alternatively you can use another Accounts function called Accounts.sendEnrollmentEmail which emails the user a link which then redirects them back to the application to set their password and access the application.

That way you know they are using a valid email before they can use your application.

Here is a link to the docs for that.

Answer 2

I am not sure what you mean by verifying email before registration. If you mean to validate the existence of the email, then follow the below step.

Once the user submits the registration form, you need to send an email to the email address with somekind of one time password(OTP) a random 4 or 6 digit number. Then on the UI ask the user to enter the OTP that they have received in the email. If it matches the one you sent, then you can register the user, if not throw an error and ask them to reconfirm the email and start the loop all over again.

Note: This is not related to react or meteor in any way. This is a logical question.