Add link in email for 2FA

In addition to entering code, users can click the link to open jetstream and auto-enter the code work towards #1076
jetstreamapp · Nov 17, 2024 · ebed60a · ebed60a
1 parent a5ae6d9
commit ebed60a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/libs/email/src/lib/components/EmailFooter.tsx b/libs/email/src/lib/components/EmailFooter.tsx
@@ -1,4 +1,4 @@
-import { Section, Text } from '@react-email/components';
+import { Link, Section, Text } from '@react-email/components';
 import * as React from 'react';
 
 export const EmailFooter = () => {
@@ -34,24 +34,25 @@ export const EmailFooter = () => {
                 fontSize: 12,
                 lineHeight: '18px',
                 fontWeight: 600,
-                color: 'rgb(107,114,128)',
+                color: '#6b7280',
                 textTransform: 'uppercase',
               }}
             >
               Whitefish, MT USA
             </Text>
-            <Text
+            <Link
+              href="mailto:[email protected]"
               style={{
                 marginTop: 0,
                 marginBottom: '0px',
                 fontSize: 12,
                 lineHeight: '18px',
                 fontWeight: 600,
-                color: 'rgb(107,114,128)',
+                color: '#009aff',
               }}
             >
               [email protected]
-            </Text>
+            </Link>
           </td>
         </tr>
       </table>

diff --git a/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx b/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx
@@ -1,15 +1,20 @@
-import { Body, Container, Head, Heading, Html, Preview, Section, Text } from '@react-email/components';
+import { Body, Container, Head, Heading, Html, Link, Preview, Section, Text } from '@react-email/components';
 import * as React from 'react';
 import { EmailFooter } from '../../components/EmailFooter';
 import { EmailLogo } from '../../components/EmailLogo';
 import { EMAIL_STYLES } from '../../shared-styles';
 
 interface TwoStepVerificationEmailProps {
+  baseUrl: string;
   validationCode: string;
   expMinutes: number;
 }
 
-export const TwoStepVerificationEmail = ({ validationCode, expMinutes }: TwoStepVerificationEmailProps) => (
+export const TwoStepVerificationEmail = ({
+  baseUrl = 'https://getjetstream.app',
+  validationCode,
+  expMinutes,
+}: TwoStepVerificationEmailProps) => (
   <Html>
     <Head />
     <Preview>Verify your identity with Jetstream - {validationCode}</Preview>
@@ -26,6 +31,12 @@ export const TwoStepVerificationEmail = ({ validationCode, expMinutes }: TwoStep
           <Heading style={EMAIL_STYLES.codeStyle}>{validationCode}</Heading>
         </Section>
 
+        <Section style={EMAIL_STYLES.buttonContainer}>
+          <Link href={`${baseUrl}/auth/verify?type=2fa-email&code=${validationCode}`} style={EMAIL_STYLES.link}>
+            Or click this link
+          </Link>
+        </Section>
+
         <Text style={EMAIL_STYLES.paragraphHeading}>Didn't request this?</Text>
         <Text style={EMAIL_STYLES.paragraph}>If you didn't make this request, you can safely ignore this email.</Text>
       </Container>

diff --git a/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx b/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx
@@ -5,7 +5,7 @@ import { EmailLogo } from '../../components/EmailLogo';
 import { EMAIL_STYLES } from '../../shared-styles';
 
 interface VerifyEmailProps {
-  baseUrl?: string;
+  baseUrl: string;
   validationCode: string;
   expHours: number;
 }

diff --git a/libs/email/src/lib/email.tsx b/libs/email/src/lib/email.tsx
@@ -114,7 +114,7 @@ export async function sendEmailVerification(emailAddress: string, code: string,
 }
 
 export async function sendVerificationCode(emailAddress: string, code: string, expMinutes: number) {
-  const component = <TwoStepVerificationEmail expMinutes={expMinutes} validationCode={code} />;
+  const component = <TwoStepVerificationEmail baseUrl={ENV.JETSTREAM_SERVER_URL} expMinutes={expMinutes} validationCode={code} />;
   const [html, text] = await renderComponent(component);
 
   await sendEmail({

diff --git a/libs/email/src/lib/shared-styles.ts b/libs/email/src/lib/shared-styles.ts
@@ -88,7 +88,7 @@ const paragraph: React.CSSProperties = {
 };
 
 const link: React.CSSProperties = {
-  color: '#444',
+  color: '#009aff',
   textDecoration: 'underline',
 };