devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced the previous e-mail verification process for our own

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-22 09:38:29 +01:00
parent e10aebf4c0
commit faced0b20c
7 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/email/index.ts
View File

@@ -10,7 +10,7 @@ interface MailOptions {
context: object; context: object;
} }
export function prepareMailer(): nodemailer.Transporter { export function prepareMailer(template?: string): nodemailer.Transporter {
const transport = nodemailer.createTransport({ const transport = nodemailer.createTransport({
host: process.env.SMTP_HOST, host: process.env.SMTP_HOST,
auth: { auth: {
@@ -22,7 +22,7 @@ export function prepareMailer(): nodemailer.Transporter {
const handlebarOptions: hbs.NodemailerExpressHandlebarsOptions = { const handlebarOptions: hbs.NodemailerExpressHandlebarsOptions = {
viewEngine: { viewEngine: {
partialsDir: path.resolve("src/email/templates"), partialsDir: path.resolve("src/email/templates"),
defaultLayout: "src/email/templates/main", defaultLayout: `src/email/templates/${template || "main"}`,
}, },
viewPath: path.resolve("src/email/templates"), viewPath: path.resolve("src/email/templates"),
}; };

2
src/email/templates/main.handlebars
View File

@@ -7,7 +7,7 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head> </head>
<div style="background-color: #ffffff; color: #353338;" <div style="background-color: #ffffff; color: #353338;"
class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base" class="text-base"> class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
<img src="/logo_title.png" class="w-48 h-48 self-center" /> <img src="/logo_title.png" class="w-48 h-48 self-center" />
<div> <div>
<span>Hello future {{type}} of <b>EnCoach</b>,</span><br /> <span>Hello future {{type}} of <b>EnCoach</b>,</span><br />

22
src/email/templates/verification.handlebars Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<div>
<p>Hello {{name}},</p>
<br />
<p>Follow this link to verify your email address.</p>
<a href="https://platform.encoach.com/action?mode=signIn&continueUrl={{email}}&oobCode={{code}}">Verify account</a>
<br />
<br />
<p>If you didn’t ask to verify this address, you can ignore this email.</p>
<br />
<p>Thanks,</p>
<p>Your EnCoach team</p>
</div>
</html>

5
src/email/templates/verification.handlebars.json Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "Tiago Ribeiro",
"email": "tiago.ribeiro@ecrop.dev",
"code": "123"
}

28
src/pages/api/reset/sendVerification.ts
View File

@@ -4,21 +4,27 @@ import {getAuth as getAdminAuth, UserRecord} from "firebase-admin/auth";
import {app, adminApp} from "@/firebase"; import {app, adminApp} from "@/firebase";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {withIronSessionApiRoute} from "iron-session/next"; import {withIronSessionApiRoute} from "iron-session/next";
import {prepareMailer, prepareMailOptions} from "@/email";
const auth = getAuth(app); import ShortUniqueId from "short-unique-id";
export default withIronSessionApiRoute(sendVerification, sessionOptions); export default withIronSessionApiRoute(sendVerification, sessionOptions);
async function sendVerification(req: NextApiRequest, res: NextApiResponse) { async function sendVerification(req: NextApiRequest, res: NextApiResponse) {
const short = new ShortUniqueId();
if (req.session.user) { if (req.session.user) {
sendSignInLinkToEmail(auth, req.session.user.email, { const transport = prepareMailer("verification");
url: `https://platform.encoach.com/${req.session.user.email}`, const mailOptions = prepareMailOptions(
handleCodeInApp: true, {
}) name: req.session.user.name,
.then(() => res.status(200).json({ok: true})) code: short.randomUUID(6),
.catch((e) => { email: req.session.user.email,
console.log(e); },
res.status(404).json({ok: false}); [req.session.user.email],
}); "EnCoach Verification",
"verification",
);
await transport.sendMail(mailOptions);
} }
} }

3
src/pages/login.tsx
View File

@@ -72,6 +72,9 @@ export default function Login() {
setIsLoading(true); setIsLoading(true);
axios axios
.post<{ok: boolean}>("/api/reset/sendVerification", {}) .post<{ok: boolean}>("/api/reset/sendVerification", {})
.then(() => {
toast.success("An e-mail has been sent, please make sure to check your spam folder!");
})
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"}); toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});

3
src/pages/register.tsx
View File

@@ -79,6 +79,9 @@ export default function Register({code: queryCode}: {code: string}) {
setIsLoading(true); setIsLoading(true);
axios axios
.post<{ok: boolean}>("/api/reset/sendVerification", {}) .post<{ok: boolean}>("/api/reset/sendVerification", {})
.then(() => {
toast.success("An e-mail has been sent, please make sure to check your spam folder!");
})
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"}); toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});