18-React Firebase: Email Verification

Author: rwieruch

src/components/Account/index.js

@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
+import { compose } from 'recompose';
 
-import { AuthUserContext, withAuthorization } from '../Session';
+import {
+  AuthUserContext,
+  withAuthorization,
+  withEmailVerification,
+} from '../Session';
 import { withFirebase } from '../Firebase';
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
@@ -220,4 +225,7 @@ const LoginManagement = withFirebase(LoginManagementBase);
 
 const condition = authUser => !!authUser;
 
-export default withAuthorization(condition)(AccountPage);
+export default compose(
+  withEmailVerification,
+  withAuthorization(condition),
+)(AccountPage);

src/components/Admin/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { compose } from 'recompose';
 
 import { withFirebase } from '../Firebase';
-import { withAuthorization } from '../Session';
+import { withAuthorization, withEmailVerification } from '../Session';
 import * as ROLES from '../../constants/roles';
 
 class AdminPage extends Component {
@@ -77,6 +77,7 @@ const condition = authUser =>
   authUser && authUser.roles.includes(ROLES.ADMIN);
 
 export default compose(
+  withEmailVerification,
   withAuthorization(condition),
   withFirebase,
 )(AdminPage);

src/components/Firebase/firebase.js

@@ -45,6 +45,11 @@ class Firebase {
 
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
 
+  doSendEmailVerification = () =>
+    this.auth.currentUser.sendEmailVerification({
+      url: process.env.REACT_APP_CONFIRMATION_EMAIL_REDIRECT,
+    });
+
   doPasswordUpdate = password =>
     this.auth.currentUser.updatePassword(password);
 
@@ -67,6 +72,8 @@ class Firebase {
             authUser = {
               uid: authUser.uid,
               email: authUser.email,
+              emailVerified: authUser.emailVerified,
+              providerData: authUser.providerData,
               ...dbUser,
             };
 

src/components/Home/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { compose } from 'recompose';
 
-import { withAuthorization } from '../Session';
+import { withAuthorization, withEmailVerification } from '../Session';
 
 const HomePage = () => (
   <div>
@@ -11,4 +12,7 @@ const HomePage = () => (
 
 const condition = authUser => !!authUser;
 
-export default withAuthorization(condition)(HomePage);
+export default compose(
+  withEmailVerification,
+  withAuthorization(condition),
+)(HomePage);

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,
+};

src/components/Session/withEmailVerification.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import AuthUserContext from './context';
+import { withFirebase } from '../Firebase';
+
+const needsEmailVerification = authUser =>
+  authUser &&
+  !authUser.emailVerified &&
+  authUser.providerData
+    .map(provider => provider.providerId)
+    .includes('password');
+
+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);
+};
+
+export default withEmailVerification;

src/components/SignUp/index.js

@@ -56,6 +56,9 @@ class SignUpFormBase extends Component {
           roles,
         });
       })
+      .then(() => {
+        return this.props.firebase.doSendEmailVerification();
+      })
       .then(() => {
         this.setState({ ...INITIAL_STATE });
         this.props.history.push(ROUTES.HOME);