feat: added email verification check

src/components/App.js

@@ -69,30 +69,37 @@ class App extends Component {
                 <Router style={{ height: "100%" }}>
                   <PrivateRoute
                     authed={authed}
+                    authUser={propAuthUser}
                     path="/app/:year"
                     component={Year}
                     exact
                   />
                   <PrivateRoute
                     authed={authed}
+                    authUser={propAuthUser}
                     path="/app/:year/:month"
                     component={Month}
                     exact
                   />
                   <PrivateRoute
                     authed={authed}
+                    authUser={propAuthUser}
+                    emailVerificationUnnecessary={false}
                     path="/app/:year/:month/:day"
                     component={Day}
                     exact
                   />
                   <PrivateRoute
                     authed={authed}
+                    authUser={propAuthUser}
+                    emailVerificationUnnecessary={false}
                     path="/app/search"
                     component={Search}
                     exact
                   />
                   <PrivateRoute
                     authed={authed}
+                    authUser={propAuthUser}
                     path="/app/user"
                     component={User}
                     exact

src/components/PrivateRoute.js

@@ -1,13 +1,23 @@
 import React from "react"
 import { Redirect, Location } from "@reach/router"
-
+import ResendNotice from "components/ResendNotice"
 // when a user isn't logged in, force a redirect
-const PrivateRoute = ({ component: Component, authed, ...rest }) => {
+const PrivateRoute = ({
+  component: Component,
+  authed,
+  authUser,
+  emailVerificationUnnecessary = true,
+  ...rest
+}) => {
   return (
     <Location>
       {({ location }) =>
         authed === true ? (
+          emailVerificationUnnecessary || authUser.emailVerified ? (
             <Component {...rest} />
+          ) : (
+            <ResendNotice />
+          )
         ) : (
           <Redirect to="/login" from={location.pathname} />
         )

src/components/ResendNotice.js

@@ -0,0 +1,43 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
+import { compose } from "recompose"
+
+import { withFirebase } from "components/firebase"
+import { Button } from "components/elements"
+import Logo from "components/Logo"
+
+const NoticeBlock = styled.footer`
+  margin-top: 30px;
+  padding: 30px 0px;
+  text-align: center;
+  color: ${props => props.theme.colors.secondary};
+`
+
+const ResendNotice = ({ theme, firebase }) => (
+  <NoticeBlock>
+    <div>
+      <Logo color={theme.colors.secondary} />
+    </div>
+    <div>
+      Looks like you haven't verified your email, please verify before using the
+      app
+    </div>
+    <div style={{ marginTop: 15 }}>
+      <Button
+        colors={theme.colors}
+        onClick={() => {
+          firebase.resendVerification()
+        }}
+        fontSize="small"
+      >
+        Resend Verification?
+      </Button>
+    </div>
+  </NoticeBlock>
+)
+
+export default compose(
+  withFirebase,
+  withTheme
+)(ResendNotice)

src/components/firebase/fire.js

@@ -53,6 +53,9 @@ class Firebase {
     window.location.replace("/login")
   }
 
+  // send email reset to email provided
+  resendVerification = () => this.auth.currentUser.sendEmailVerification()
+
   // send email reset to email provided
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email)
 

src/routes/User.js

@@ -94,9 +94,21 @@ class User extends React.Component {
             User: <ProfileSectionText>{authUser.email}</ProfileSectionText>
             <div>
               <ProfileSectionText style={{ fontWeight: 400 }}>
-                {authUser.emailVerified
+                {authUser.emailVerified ? (
-                  ? "Email has been verified"
+                  "Email has been verified"
-                  : "Email not verified"}
+                ) : (
+                  <span>
+                    Email not verified{" "}
+                    <span
+                      onClick={() => {
+                        console.log("resent!")
+                        firebase.resendVerification(authUser.email)
+                      }}
+                    >
+                      Resend?
+                    </span>
+                  </span>
+                )}
               </ProfileSectionText>
             </div>
           </ProfileSectionHeader>