custom next auth pages

2022-04-19 12:24:34 +01:00
parent c8a2988556
commit 511a5ed98d
4 changed files with 322 additions and 9 deletions
@@ -1,8 +1,84 @@
 import NextAuth from "next-auth";
-import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter";
 import EmailProvider from "next-auth/providers/email";
-import * as entities from "../../../lib/entities";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { PrismaClient } from "@prisma/client";
+import nodemailer from "nodemailer";

+const prisma = new PrismaClient();
+
+// async function sendVerificationRequest({
+//     identifier: email,
+//     url,
+//     provider: { server, from },
+// }) {
+//     const { host } = new URL(url);
+//     const transport = nodemailer.createTransport(server);
+//     await transport.sendMail({
+//         to: email,
+//         from,
+//         subject: `Sign in to ${host}`,
+//         text: text({ url, host }),
+//         html: html({ url, host, email }),
+//     });
+// }
+// Email HTML body
+function html({ url, host, email }) {
+    // Insert invisible space into domains and email address to prevent both the
+    // email address and the domain from being turned into a hyperlink by email
+    // clients like Outlook and Apple mail, as this is confusing because it seems
+    // like they are supposed to click on their email address to sign in.
+    const escapedEmail = `${email.replace(/\./g, "&#8203;.")}`;
+    const escapedHost = `${host.replace(/\./g, "&#8203;.")}`;
+
+    // Some simple styling options
+    const backgroundColor = "#ffffff";
+    const textColor = "#444444";
+    const mainBackgroundColor = "#ffffff";
+    const buttonBackgroundColor = "#aa1111";
+    const buttonBorderColor = "#aa1111";
+    const buttonTextColor = "#ffffff";
+    const headerBackgroundColor = "#000000";
+
+    return `
+  <body style="background: ${backgroundColor};">
+    <table width="100%" border="0" cellspacing="0" cellpadding="0">
+      <tr>
+        <td align="center" style="padding: 10px 0px 20px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: #fff;background-color: ${headerBackgroundColor};border-bottom: 10px solid #ffd530;>
+       
+        <strong>PEDW - Planning Casework</strong>
+        </td>
+      </tr>
+    </table>
+    <table width="100%" border="0" cellspacing="20" cellpadding="0" style="background: ${mainBackgroundColor}; max-width: 600px; margin: auto; border-radius: 10px;">
+      <tr>
+        <td align="center" style="padding: 10px 0px 0px 0px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
+          Sign in as <strong>${escapedEmail}</strong>
+        </td>
+        <img src ="http://localhost:3000/assets/images/planning-casework-en.svg"/>
+      </tr>
+      <tr>
+        <td align="center" style="padding: 20px 0;">
+          <table border="0" cellspacing="0" cellpadding="0">
+            <tr>
+              <td align="center" style="border-radius: 5px;" bgcolor="${buttonBackgroundColor}"><a href="${url}" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${buttonTextColor}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${buttonBorderColor}; display: inline-block; font-weight: bold;">Sign in</a></td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td align="center" style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
+          If you did not request this email you can safely ignore it.
+        </td>
+      </tr>
+    </table>
+  </body>
+  `;
+}
+
+// Email Text body (fallback for email clients that don't render HTML, e.g. feature phones)
+function text({ url, host }) {
+    return `Sign in to PEDW - Planning Casework\n${url}\n\n`;
+}
 // For more information on each option (and a full list of options) go to
 // https://next-auth.js.org/configuration/options
 export default NextAuth({
@@ -19,19 +95,35 @@ export default NextAuth({
            },
            from: process.env.EMAIL_FROM,
            maxAge: 10 * 60, // Magic links are valid for 10 min only
+            async sendVerificationRequest({
+                identifier: email,
+                url,
+                provider: { server, from },
+            }) {
+                const { host } = new URL(url);
+                const transport = nodemailer.createTransport(server);
+                await transport.sendMail({
+                    to: email,
+                    from,
+                    subject: `Sign in to PEDW - Planning Casework`,
+                    text: text({ url, host }),
+                    html: html({ url, host, email }),
+                });
+            },
        }),
    ],
-    adapter: TypeORMLegacyAdapter({
-        type: "mysql",
-        database:
-            "mysql://nextAuthAdmin:!Sky9fish1972@77.68.17.157:3306/nextauthDB?synchronise=true",
-        synchronize: false,
-    }),
-    secret: "SuperSecret",
+    adapter: PrismaAdapter(prisma),
    session: {
        jwt: true,
        pages: {},
        theme: "dark",
        debug: true,
    },
+    pages: {
+        signIn: "/auth/signin",
+        //signOut: "/auth/signout",
+        error: "/auth/error", // Error code passed in query string as ?error=
+        verifyRequest: "/auth/verify-request", // (used for check email message)
+        // newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
+    },
 });