Add Email Verification

Author: bongjunj

frontend/src/components/Account/index.js

@@ -4,7 +4,8 @@ import { Header } from "semantic-ui-react";
 
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
-import { withAuthorization, AuthUserContext } from '../Session';
+import { withAuthorization, AuthUserContext, withEmailVerification } from '../Session';
+import { compose } from 'recompose';
 
 const AccountPage = () => (
     <AuthUserContext.Consumer>
@@ -25,4 +26,7 @@ const AccountPage = () => (
 
 const condition = authUser => authUser != null;
 
-export default withAuthorization(condition)(AccountPage);
+export default compose(
+    withEmailVerification,
+    withAuthorization(condition),
+)(AccountPage);

frontend/src/components/Firebase/firebase.js

@@ -26,7 +26,39 @@ class Firebase {
 
     doSignInWithEmailAndPassword = (email, password) => 
         this.auth.signInWithEmailAndPassword(email, password);
+
+    doSendEmailVerification = () =>
+        this.auth.currentUser.sendEmailVerification();
 
+    onAuthUserListener = (next, fallback) =>
+    this.auth.onAuthStateChanged(authUser => {
+        if (authUser) {
+        this.user(authUser.uid)
+            .once('value')
+            .then(snapshot => {
+            const dbUser = snapshot.val();
+
+            // default empty roles
+            if (!dbUser.roles) {
+                dbUser.roles = {};
+            }
+
+            // merge auth and db user
+            authUser = {
+                uid: authUser.uid,
+                email: authUser.email,
+                emailVerified: authUser.emailVerified,
+                providerData: authUser.providerData,
+                ...dbUser,
+            };
+
+            next(authUser);
+            });
+        } else {
+        fallback();
+        }
+    });
+
 
     doSignOut = () => this.auth.signOut();
 

frontend/src/components/Session/index.js

@@ -1,5 +1,11 @@
 import AuthUserContext from './context';
 import withAuthentication from "./withAuthentication";
 import withAuthorization from "./withAuthorization";
+import withEmailVerification from './withEmailVerification';
 
-export { AuthUserContext, withAuthentication, withAuthorization };
+export {
+    AuthUserContext,
+    withAuthentication,
+    withAuthorization,
+    withEmailVerification,
+};

frontend/src/components/Session/withEmailVerification.js

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import AuthUserContext from './context';
+import { withFirebase } from '../Firebase';
+
+const withEmailVerification = Component => {
+    class WithEmailVerification extends React.Component {
+        constructor(props) {
+            super(props);
+
+            this.state = {
+                isSent: false,
+            }
+        }
+        onSendEmailVerification = () => {
+            this.props.firebase
+                .doSendEmailVerification()
+                .then(() => this.setState({
+                    isSent: true,
+                }));
+        }
+        render() {
+        return (
+            <AuthUserContext.Consumer>
+                {authUser =>
+                    needsEmailVerification(authUser) ? (
+                        <div>
+                            {this.state.isSent ? (
+                                <p>
+                                E-Mail confirmation sent: Check you E-Mails (Spam
+                                folder included) for a confirmation E-Mail.
+                                Refresh this page once you confirmed your E-Mail.
+                                </p>
+                            ) : (
+                                <p>
+                                Verify your E-Mail: Check you E-Mails (Spam folder
+                                included) for a confirmation E-Mail or send
+                                another confirmation E-Mail.
+                                </p>
+                            )}
+                            <button
+                                type="button"
+                                onClick={this.onSendEmailVerification}
+                                disabled={this.state.isSent} >
+                                Send confirmation E-Mail
+                            </button>
+                        </div>
+                    ) : (
+                <Component {...this.props} />
+                )}
+            </AuthUserContext.Consumer>
+        );
+        }
+    }
+
+    return withFirebase(WithEmailVerification);
+    };
+
+const needsEmailVerification = authUser =>
+  authUser &&
+  !authUser.emailVerified &&
+  authUser.providerData
+    .map(provider => provider.providerId)
+    .includes('password');
+
+export default withEmailVerification;

frontend/src/components/SignUp/index.js

@@ -41,13 +41,16 @@ class SignUpFormBase extends React.Component {
                     email,
                 });
             })
+            .then(() => {
+                return this.props.firebase.doSendEmailVerification();
+            })
             .then(authUser => {
                 this.setState({ ...INITIAL_STATE });
                 this.props.history.push(ROUTES.HOME);
-                alert(authUser);
             })
             .catch(error => {
-                alert(error.message);
+                if (error != undefined)
+                    alert(error.message);
                 this.setState({ error });
             });
 
@@ -82,7 +85,7 @@ class SignUpFormBase extends React.Component {
                 value={username}
                 onChange={this.onChange}
                 type="text"
-                placeholder="Full Name"
+                placeholder="User Name"
                 />
                 <input
                 name="email"