feat: add email verification based on spf/dkim/dmarc/logo verification (#1622)

Co-authored-by: Ahmet Kilinc <akx9@icloud.com>

Author: retrogtx

apps/mail/components/mail/email-verification-badge.tsx

@@ -0,0 +1,46 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { useTRPC } from '@/providers/query-provider';
+import { useQuery } from '@tanstack/react-query';
+import { CircleCheck } from '../icons/icons';
+import React from 'react';
+
+interface EmailVerificationBadgeProps {
+  messageId: string | undefined;
+}
+
+export const EmailVerificationBadge: React.FC<EmailVerificationBadgeProps> = ({ messageId }) => {
+  const trpc = useTRPC();
+
+  const {
+    data: verificationResult,
+    isLoading,
+    isError,
+  } = useQuery({
+    ...trpc.mail.verifyEmail.queryOptions({ id: messageId || '' }),
+    enabled: !!messageId,
+    staleTime: 5 * 60 * 1000,
+    retry: 1,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+
+  if (!verificationResult?.isVerified || isLoading || isError) {
+    return null;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="flex items-center">
+          <CircleCheck className="h-4 w-4 fill-blue-600 text-blue-600 dark:fill-blue-500 dark:text-blue-500" />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p className="text-sm">
+          Verified sender - This email passed email authentication (SPF/DKIM/DMARC) and BIMI
+          validation
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

apps/mail/components/mail/mail-display.tsx

@@ -35,6 +35,7 @@ import { Dialog, DialogTitle, DialogHeader, DialogContent } from '../ui/dialog';
 import { memo, useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { EmailVerificationBadge } from './email-verification-badge';
 import type { Sender, ParsedMessage, Attachment } from '@/types';
 import { useActiveConnection } from '@/hooks/use-connections';
 import { useAttachments } from '@/hooks/use-attachments';
@@ -1327,20 +1328,23 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
                     <div className="flex w-full flex-col">
                       <div className="flex w-full items-center justify-between">
                         <div className="flex items-center gap-1">
-                          <span
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              e.preventDefault();
-                              setResearchSender({
-                                name: emailData?.sender?.name || '',
-                                email: emailData?.sender?.email || '',
-                                //   extra: emailData?.sender?.extra || '',
-                              });
-                            }}
-                            className="hover:bg-muted max-w-36 truncate whitespace-nowrap font-semibold md:max-w-none"
-                          >
-                            {cleanNameDisplay(emailData?.sender?.name)}
-                          </span>
+                          <div className="flex items-center gap-2">
+                            <span
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setResearchSender({
+                                  name: emailData?.sender?.name || '',
+                                  email: emailData?.sender?.email || '',
+                                  //   extra: emailData?.sender?.extra || '',
+                                });
+                              }}
+                              className="hover:bg-muted font-semibold"
+                            >
+                              {cleanNameDisplay(emailData?.sender?.name)}
+                            </span>
+                            <EmailVerificationBadge messageId={emailData?.id} />
+                          </div>
 
                           <Popover open={openDetailsPopover} onOpenChange={handlePopoverChange}>
                             <PopoverTrigger asChild>

apps/server/src/lib/driver/google.ts

@@ -913,6 +913,28 @@ export class GoogleMailManager implements MailManager {
     );
   }
 
+  public getRawEmail(messageId: string) {
+    return this.withErrorHandler(
+      'getRawEmail',
+      async () => {
+        const res = await this.gmail.users.messages.get({
+          userId: 'me',
+          id: messageId,
+          format: 'raw',
+          quotaUser: this.config.auth?.email,
+        });
+
+        if (!res.data.raw) {
+          throw new Error('No raw email data found');
+        }
+
+        const rawEmail = Buffer.from(res.data.raw, 'base64').toString('utf-8');
+        return rawEmail;
+      },
+      { messageId, email: this.config.auth?.email },
+    );
+  }
+
   private async getThreadMetadata(threadId: string) {
     return this.withErrorHandler(
       'getThreadMetadata',

apps/server/src/lib/driver/types.ts

@@ -116,6 +116,7 @@ export interface MailManager {
   getEmailAliases(): Promise<{ email: string; name?: string; primary?: boolean }[]>;
   revokeToken(token: string): Promise<boolean>;
   deleteAllSpam(): Promise<DeleteAllSpamResponse>;
+  getRawEmail(id: string): Promise<string>;
 }
 
 export interface IGetThreadsResponse {