feat: 🎸 custom signin email (#172)

gmpetrov · Oct 9, 2023 · 1bfa260 · 1bfa260 · vercel · Oct 9, 2023
1 parent b264d35
commit 1bfa260
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 0 deletions.
diff --git a/packages/emails/src/SignIn.tsx b/packages/emails/src/SignIn.tsx
@@ -0,0 +1,80 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+import * as React from 'react';
+
+interface Props {
+  url: string;
+  host: string;
+}
+
+export const SignIn = ({ url, host }: Props) => {
+  const previewText = `Sign in to Chaindesk`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto font-sans bg-white">
+          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px]">
+            <Section className="mt-[32px]">
+              <Img
+                src={`https://www.chaindesk.ai/app-logo-icon.png`}
+                width="60"
+                height="57"
+                alt="Your App Name"
+                className="mx-auto my-0"
+              />
+            </Section>
+            <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
+              Sign in to <strong>Chaindesk</strong>
+            </Heading>
+            <Text className="text-black text-[14px] text-center leading-[24px]">
+              Click the button below to sign in and continue enjoying our
+              services.
+            </Text>
+            <Section className="text-center mt-[32px] mb-[32px]">
+              <Button
+                pX={20}
+                pY={12}
+                className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center"
+                href={url}
+              >
+                Sign In
+              </Button>
+            </Section>
+            <Text className="text-[#666666] text-[12px] leading-[24px] mt-4">
+              If you have any issues with signing in, feel free to
+              <Link href="https://www.chaindesk.ai/help" className="underline">
+                {' '}
+                contact us
+              </Link>
+              .
+            </Text>
+            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+            <Text className="text-[#666666] text-[12px] leading-[24px]">
+              If you were not expecting this sign-in link, you can ignore this
+              email. If you are concerned about your account s safety, please
+              reply to this email to get in touch with us.
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default SignIn;
diff --git a/packages/emails/src/index.ts b/packages/emails/src/index.ts
@@ -4,3 +4,4 @@ export { default as DailyLeads } from './DailyLeads';
 export { default as HelpRequest } from './HelpRequest';
 export { default as InviteUser } from './InviteUser';
 export { default as NewConversation } from './NewConversation';
+export { default as SignIn } from './SignIn';
diff --git a/packages/lib/auth.ts b/packages/lib/auth.ts
@@ -22,6 +22,8 @@ import {
 } from '@chaindesk/prisma';
 import { prisma } from '@chaindesk/prisma/client';
 
+import sendVerificationRequest from './verification-sender';
+
 const CustomPrismaProvider = (p: PrismaClient) => {
   return {
     ...PrismaAdapter(p),
@@ -108,6 +110,7 @@ export const authOptions = {
     EmailProvider({
       server: process.env.EMAIL_SERVER,
       from: process.env.EMAIL_FROM,
+      sendVerificationRequest: sendVerificationRequest,
     }),
     GithubProvider({
       clientId: process.env.GITHUB_ID!,

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -11,6 +11,7 @@
     "@axiomhq/pino": "^0.1.3",
     "@chaindesk/prisma": "workspace:*",
     "@chaindesk/tsconfig": "workspace:*",
+    "@chaindesk/emails": "workspace:*",
     "@slack/web-api": "^6.8.1",
     "@xmldom/xmldom": "^0.8.7",
     "aws-sdk": "^2.1343.0",
@@ -33,6 +34,7 @@
     "mime-types": "^2.1.35",
     "msgpackr": "^1.9.3",
     "nanoid": "^4.0.2",
+    "nodemailer": "^6.9.1",
     "next-connect": "^0.13.0",
     "p-map": "^5.5.0",
     "p-retry": "^5.1.2",
@@ -42,6 +44,7 @@
     "pino": "^8.15.0",
     "pino-pretty": "^10.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-dom": "18.2.0",
     "rxjs": "^7.8.1",
     "stripe": "^11.17.0",
     "uuid": "^9.0.0",
@@ -54,6 +57,7 @@
     "@types/node": "18.15.10",
     "@types/nodemailer": "^6.4.7",
     "@types/react": "18.0.29",
+    "@types/react-dom": "18.0.11",
     "@types/uuid": "^9.0.1"
   },
   "peerDependencies": {

diff --git a/packages/lib/verification-sender.tsx b/packages/lib/verification-sender.tsx
@@ -0,0 +1,26 @@
+import { Theme } from 'next-auth';
+import { SendVerificationRequestParams } from 'next-auth/providers';
+import { createTransport, SentMessageInfo, TransportOptions } from 'nodemailer';
+
+import { render, SignIn } from '@chaindesk/emails';
+
+async function sendVerificationRequest(params: SendVerificationRequestParams) {
+  const { identifier, url, provider, theme } = params;
+  const { host } = new URL(url);
+  const transport = createTransport(provider.server);
+  const result: SentMessageInfo = await transport.sendMail({
+    to: identifier,
+    from: provider.from,
+    subject: `Sign in to ${host}`,
+    html: render(<SignIn host={host} url={url} />),
+    text: render(<SignIn host={host} url={url} />, {
+      plainText: true,
+    }),
+  });
+  const failed = result?.rejected?.concat(result?.pending)?.filter(Boolean);
+  if (failed?.length) {
+    throw new Error(`Email(s) (${failed.join(', ')}) could not be sent`);
+  }
+}
+
+export default sendVerificationRequest;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml