feat: verify users email (#215)

* worked on the email verification

* worked on the email verification

* fixed the emailing issue and the supabase updating issue

* chore: add timer to resend, add supabase.server, enforce unique email

* chore: remove nodemailer logger

* remove async

* remove disposable email verification

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Modal/index.svelte

@@ -9,6 +9,7 @@
   export let maxWidth = '';
   export let containerClass = '';
   export let size = '';
+  export let isCloseable = true;
 
   afterUpdate(() => {
     if (open) {
@@ -39,9 +40,11 @@
         <p class="dark:text-white text-md font-medium m-0">
           {modalHeading}
         </p>
-        <div class="rounded-full">
-          <CloseButton onClick={onClose} contained={true} size="small" />
-        </div>
+        {#if isCloseable}
+          <div class="rounded-full">
+            <CloseButton onClick={onClose} contained={true} size="small" />
+          </div>
+        {/if}
       </div>
 
       <div class="body p-1 h-4/5 overflow-y-auto {containerClass}">

apps/dashboard/src/lib/components/Org/VerifyEmail/VerifyEmailModal.svelte

@@ -0,0 +1,84 @@
+<script>
+  {
+  }
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { profile } from '$lib/utils/store/user';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
+  import { currentOrg } from '$lib/utils/store/org';
+
+  const WAIT_SEC = 120;
+  const WAIT_TIME = WAIT_SEC * 1000;
+
+  let loading = false;
+  let isSent = false;
+
+  let interval;
+  let countDown = WAIT_SEC;
+
+  const resendVerificationCode = async () => {
+    loading = true;
+
+    try {
+      triggerSendEmail(NOTIFICATION_NAME.VERIFY_EMAIL, {
+        to: $profile.email,
+        profileId: $profile.id,
+        orgSiteName: $currentOrg.siteName
+      });
+
+      isSent = true;
+    } catch (error) {
+      snackbar.error('error while sending code');
+    } finally {
+      loading = false;
+    }
+
+    interval = setInterval(() => {
+      countDown = countDown - 1;
+    }, 1000);
+
+    setTimeout(() => {
+      isSent = false;
+
+      clearInterval(interval);
+    }, WAIT_TIME);
+  };
+</script>
+
+<Modal
+  open={!$profile.is_email_verified}
+  isCloseable={false}
+  width="w-4/5"
+  maxWidth="w-[500px]"
+  containerClass="p-4"
+>
+  <div class="flex flex-col items-center space-y-6 text-center">
+    <img src="/verify-email.svg" alt="email verification" />
+    <p class="font-bold text-xl">Verify your Email</p>
+    <p class="text-sm w-[70%] text-gray-700">
+      We've sent a verification email to {$profile.email} to confirm the validity of the email provided.
+      Kindly verify your email to continue using ClassroomIO.
+    </p>
+
+    <div class="flex items-center flex-col">
+      <PrimaryButton
+        isDisabled={loading || isSent}
+        className="font-normal"
+        onClick={resendVerificationCode}
+      >
+        {#if loading}
+          Loading...
+        {:else}
+          Resend Verification Code
+        {/if}
+      </PrimaryButton>
+      {#if isSent}
+        <p class="text-xs text-gray-700">Resend verification in {countDown} seconds</p>
+      {/if}
+    </div>
+  </div>
+</Modal>

apps/dashboard/src/lib/components/WelcomeModal/WelcomeModal.svelte

@@ -1,21 +1,31 @@
 <script>
   import Modal from '../Modal/index.svelte';
-  import { writable } from 'svelte/store';
-  import { onMount, onDestroy } from 'svelte';
-  import { welcomeModalStore } from './store';
+  import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { currentOrgPath } from '$lib/utils/store/org';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
+  import { profile } from '$lib/utils/store/user';
+
+  let query = new URLSearchParams($page.url.search);
+  let welcomePopup = query.get('welcomePopup');
 
   const closeModal = () => {
-    $welcomeModalStore.open = false;
+    triggerSendEmail(NOTIFICATION_NAME.WELCOME_TO_APP, {
+      to: $profile.email,
+      name: $profile.fullname
+    });
     goto($currentOrgPath + '/courses?create=true');
   };
 </script>
 
 <Modal
   onClose={closeModal}
-  bind:open={$welcomeModalStore.open}
+  open={welcomePopup === 'true'}
   width="w-9/12"
+  maxWidth="w-[800px]"
   modalHeading="Welcome"
 >
   <p class="text-black dark:text-white text-sm md:text-base lg:text-lg">

apps/dashboard/src/lib/utils/functions/supabase.server.ts

@@ -0,0 +1,24 @@
+import { PUBLIC_SUPABASE_URL } from '$env/static/public';
+import { PRIVATE_SUPABASE_SERVICE_ROLE } from '$env/static/private';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+
+export let supabase: SupabaseClient;
+
+/**
+ * Should only be called on server files
+ *
+ * @returns supabase
+ */
+export const getServerSupabase = () => {
+  if (supabase) return supabase;
+
+  supabase = createClient(PUBLIC_SUPABASE_URL, PRIVATE_SUPABASE_SERVICE_ROLE, {
+    auth: {
+      persistSession: false,
+      autoRefreshToken: false,
+      detectSessionInUrl: false
+    }
+  });
+
+  return supabase;
+};

apps/dashboard/src/lib/utils/services/notification/notification.ts

@@ -2,6 +2,7 @@ import { supabase } from '$lib/utils/functions/supabase';
 
 export const NOTIFICATION_NAME = {
   WELCOME_TO_APP: 'WELCOME TO APP',
+  VERIFY_EMAIL: 'VERFIY_EMAIL',
   INVITE_TEACHER: 'INVITE TEACHER',
   WELCOME_TEACHER_TO_COURSE: 'WELCOME TEACHER TO COURSE',
   SEND_TEACHER_STUDENT_BUY_REQUEST: 'SEND TEACHER STUDENT BUY REQUEST',
@@ -15,6 +16,7 @@ export const NOTIFICATION_NAME = {
 
 const NAME_TO_PATH = {
   [NOTIFICATION_NAME.WELCOME_TO_APP]: '/api/email/welcome',
+  [NOTIFICATION_NAME.VERIFY_EMAIL]: '/api/email/verify_email',
   [NOTIFICATION_NAME.INVITE_TEACHER]: '/api/email/invite',
   [NOTIFICATION_NAME.WELCOME_TEACHER_TO_COURSE]: '/api/email/course/teacher_welcome',
   [NOTIFICATION_NAME.SEND_TEACHER_STUDENT_BUY_REQUEST]:

apps/dashboard/src/lib/utils/services/notification/send.ts

@@ -1,6 +1,7 @@
 import nodemailer from 'nodemailer';
 import {
   SMTP_HOST,
+  SMTP_PORT,
   SMTP_USER,
   SMTP_PASSWORD,
   SMTP_USER_NOTIFY,
@@ -24,7 +25,7 @@ export const getTransporter = async (
 
     transporter = nodemailer.createTransport({
       host: SMTP_HOST,
-      port: 465,
+      port: parseInt(SMTP_PORT),
       secure: true,
       auth: {
         user: isPersonal ? SMTP_USER : SMTP_USER_NOTIFY,

apps/dashboard/src/lib/utils/store/user.ts

@@ -21,6 +21,8 @@ interface ProfileStore {
   goal: string;
   source: string;
   telegram_chat_id: number | null;
+  is_email_verified: boolean;
+  verified_at: string;
 }
 
 export const defaultUserState: UserStore = {
@@ -41,7 +43,9 @@ export const defaultProfileState: ProfileStore = {
   role: '',
   goal: '',
   source: '',
-  telegram_chat_id: null
+  telegram_chat_id: null,
+  is_email_verified: false,
+  verified_at: ''
 };
 
 export const user = writable<UserStore>(defaultUserState);

apps/dashboard/src/routes/+layout.svelte

@@ -22,7 +22,7 @@
   import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
   import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
   import { user, profile } from '$lib/utils/store/user';
-  import { getSupabase, isSupabaseTokenInLocalStorage } from '$lib/utils/functions/supabase';
+  import { getSupabase } from '$lib/utils/functions/supabase';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { ROUTE } from '$lib/utils/constants/routes';
   import { getOrganizations } from '$lib/utils/services/org';
@@ -41,6 +41,7 @@
 
   let supabase = getSupabase();
   let path = $page.url?.pathname?.replace('/', '');
+  let queryParam = $page.url?.search;
   let carbonTheme: CarbonTheme = 'white';
 
   const delayedPreloading = derived(navigating, (currentPreloading, set) => {
@@ -82,7 +83,7 @@
     console.log('Get user', authUser);
 
     if (!authUser && !isPublicRoute($page.url?.pathname)) {
-      return goto('/login?redirect=/' + path);
+      return goto('/login?redirect=/' + path + queryParam);
     }
 
     // Skip refetching profile, if already in store

apps/dashboard/src/routes/api/email/verify_email/+server.js

@@ -0,0 +1,55 @@
+import { json } from '@sveltejs/kit';
+import { getSupabase } from '$lib/utils/functions/supabase';
+import sendEmail from '$defer/sendEmail';
+
+const supabase = getSupabase();
+
+export async function POST({ request }) {
+  const { to, profileId, orgSiteName } = await request.json();
+  const accessToken = request.headers.get('Authorization');
+  console.log('/POST api/email/verify_email', to, profileId);
+
+  if (!to || !profileId || !accessToken) {
+    return json({ success: false, message: 'Name and To are required fields' }, { status: 400 });
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  const origin = request.headers.get('origin');
+  const verificationData = JSON.stringify({
+    profileId,
+    orgSiteName
+  });
+
+  const verificationLink = `${origin}/api/verify?data=${encodeURIComponent(
+    btoa(verificationData)
+  )}`;
+
+  await sendEmail({
+    to,
+    subject: '[ClassroomIO]: Verify your email',
+    content: `
+    <p>Thank you for signing up</p>
+    <p>To verify your email, please click the <strong>Verify</strong> button below /p>
+    <div>
+    <a class="button" href="${verificationLink}">Verify</a>
+  </div>
+    `,
+    isPersonalEmail: true
+  });
+
+  return json({
+    success: true,
+    message: `Email sent ${verificationLink}`
+  });
+}

apps/dashboard/src/routes/api/verify/+server.js

@@ -0,0 +1,29 @@
+import { redirect, json } from '@sveltejs/kit';
+import { getServerSupabase } from '$lib/utils/functions/supabase.server';
+
+export const GET = async ({ url }) => {
+  const supabase = getServerSupabase();
+
+  const data = url.searchParams.get('data');
+  if (!data) return json({ message: 'data is not found' }, { status: 404 });
+
+  const hashData = decodeURIComponent(data);
+  console.log('hashData', hashData);
+
+  const decodedData = atob(hashData);
+  console.log('decodedData', decodedData);
+
+  const { profileId, orgSiteName } = JSON.parse(decodedData);
+
+  const { error } = await supabase
+    .from('profile')
+    .update({ is_email_verified: true, verified_at: new Date().toDateString() })
+    .match({ id: profileId });
+
+  if (error) {
+    console.log('profile not found', error);
+    throw redirect(307, '/404');
+  }
+
+  throw redirect(307, `/org/${orgSiteName}?welcomePopup=true`);
+};

apps/dashboard/src/routes/onboarding/+page.svelte

@@ -9,7 +9,6 @@
   import { onboardingValidation } from '$lib/utils/functions/validator';
   import { supabase } from '$lib/utils/functions/supabase';
   import { blockedSubdomain } from '$lib/utils/constants/app';
-  import { welcomeModalStore } from '$lib/components/WelcomeModal/store';
   import { getOrganizations } from '$lib/utils/services/org';
   import { generateSitename } from '$lib/utils/functions/org';
   import {
@@ -181,16 +180,13 @@
 
       if (fields.fullname) {
         $profile.fullname = fields.fullname;
-
-        triggerSendEmail(NOTIFICATION_NAME.WELCOME_TO_APP, {
-          to: $profile.email,
-          name: fields.fullname
-        });
       }
+      triggerSendEmail(NOTIFICATION_NAME.VERIFY_EMAIL, {
+        to: $profile.email,
+        profileId: $profile.id,
+        orgSiteName: fields.siteName
+      });
 
-      console.log('data', data);
-      console.log('error', error);
-      $welcomeModalStore.open = true;
       return goto(`/org/${fields.siteName}`);
     }
 

apps/dashboard/src/routes/org/[slug]/+layout.svelte

@@ -3,10 +3,11 @@
   import AddOrgModal from '$lib/components/Org/AddOrgModal/AddOrgModal.svelte';
   import { isQuizPage } from '$lib/utils/functions/app';
   import OrgSideBar from '$lib/components/Org/SideBar.svelte';
+  import VerifyEmailModal from '$lib/components/Org/VerifyEmail/VerifyEmailModal.svelte';
 </script>
 
 <AddOrgModal />
-
+<VerifyEmailModal />
 <div class="org-root w-full flex items-center justify-between">
   {#if !isQuizPage($page.url?.pathname)}
     <OrgSideBar />

apps/dashboard/src/routes/signup/+page.svelte

@@ -14,7 +14,6 @@
   import { profile } from '$lib/utils/store/user';
   import { currentOrg } from '$lib/utils/store/org';
   import { capturePosthogEvent } from '$lib/utils/services/posthog';
-  import { snackbar } from '$lib/components/Snackbar/store';
 
   let supabase = getSupabase();
   let fields = Object.assign({}, SIGNUP_FIELDS);
@@ -44,21 +43,6 @@
     try {
       loading = true;
 
-      // Check if the email address is disposable
-      const emailCheck = await fetch('https://is-disposable-email.ephraimduncan68.workers.dev/', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ email: fields.email })
-      });
-      const emailCheckResponse = await emailCheck.json();
-
-      if (emailCheckResponse.isDisposable === true) {
-        snackbar.error('The email you provided is disposable');
-        return;
-      }
-
       const {
         data: { session },
         error