Add email verification

src/components/Auth/Login.tsx

@@ -17,6 +17,7 @@ import {
 import { useAuth } from '../../contexts/AuthContext';
 import { Routes } from '../../routes';
 import validateMessages from './validateMessages';
+import emailNotVerifiedWarning from './emailNotVerifiedWarning';
 
 const { Item } = Form;
 
@@ -29,12 +30,16 @@ const Login = () => {
   const onFinish = async ({ email, password }: { form: any, email: string, password: string }) => {
     setIsLoading(true);
     try {
-      await login(email, password);
+      const userCredentials = await login(email, password);
       notification.success({
         message: 'Login successful',
         description: 'Welcome back!',
       });
-      setIsLoading(false);
+
+      if (!userCredentials.user.emailVerified) {
+        emailNotVerifiedWarning();
+      }
+
       history.push(Routes.ROOT);
     } catch (err) {
       form.resetFields();
@@ -43,8 +48,8 @@ const Login = () => {
         message: 'Login failed',
         description: (err as Error).message,
       });
+      setIsLoading(false);
     }
-    setIsLoading(false);
   };
 
   return (

src/components/Auth/SignUp.tsx

@@ -17,10 +17,11 @@ import {
 import { useAuth } from '../../contexts/AuthContext';
 import { Routes } from '../../routes';
 import validateMessages from './validateMessages';
+import emailNotVerifiedWarning from './emailNotVerifiedWarning';
 
 const { Item } = Form;
 
-const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/;
+const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/;
 
 const SignUp = () => {
   const [form] = Form.useForm();
@@ -36,7 +37,8 @@ const SignUp = () => {
         message: 'Sign Up successful',
         description: 'Welcome on board!',
       });
-      setIsLoading(false);
+      emailNotVerifiedWarning();
+
       history.push(Routes.ROOT);
     } catch (err) {
       form.resetFields();
@@ -45,8 +47,8 @@ const SignUp = () => {
         message: 'Failed to create an account',
         description: (err as Error).message,
       });
+      setIsLoading(false);
     }
-    setIsLoading(false);
   };
 
   return (
@@ -77,7 +79,7 @@ const SignUp = () => {
           name="password"
           rules={[
             { required: true },
-            { pattern: strongPassword, message: 'Password is too weak!' },
+            { pattern: passwordPattern, message: 'Password is too weak!' },
           ]}
           hasFeedback
         >

src/components/Auth/emailNotVerifiedWarning.ts

@@ -0,0 +1,8 @@
+import { notification } from 'antd';
+
+const emailNotVerifiedWarning = () => notification.warn({
+  message: 'Check your email',
+  description: 'Your email address has to be verified before you can upload files!',
+});
+
+export default emailNotVerifiedWarning;

src/contexts/AuthContext.tsx

@@ -11,6 +11,7 @@ import {
   auth,
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
+  sendEmailVerification,
   signOut,
 } from '../firebase';
 
@@ -32,7 +33,8 @@ const AuthProvider = (props: { children: ReactNode }) => {
 
   const value = useMemo(() => ({
     currentUser,
-    signUp: (email: string, password: string) => createUserWithEmailAndPassword(auth, email, password),
+    signUp: (email: string, password: string) => createUserWithEmailAndPassword(auth, email, password)
+      .then((userCredential) => sendEmailVerification(userCredential.user)),
     login: (email: string, password: string) => signInWithEmailAndPassword(auth, email, password),
     logout: () => signOut(auth),
   }), [currentUser]);

src/firebase.ts

@@ -4,6 +4,7 @@ import {
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
   signOut,
+  sendEmailVerification,
 } from 'firebase/auth';
 import { getAnalytics } from 'firebase/analytics';
 
@@ -26,5 +27,6 @@ export {
   analytics,
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
+  sendEmailVerification,
   signOut,
 };