Building with email/password authentication

Although Gadget provides a default email/password authentication method, there is a lot of flexibility to configure or build on top of the user emails sent through emails in the action context.

Custom email templates

Whether you want to customize the copy and style of the emails you send on the sendVerifyEmail/sendResetPassword action or send any other transactional/marketing emails within your app, you can easily do so.

Create a constant value representing the desired custom email template (CustomTemplate) and declare an expression containing an HTML 5 document.
Structure this document however you want your email copy and style to be.
Now to render your custom template, when sending an email (via emails.sendMail()) within the html parameter you will pass the custom template like below:

api/actions/sendVerifyEmail.js

JavaScript

1export const onSuccess: ActionOnSuccess = async ({
2  params,
3  record,
4  logger,
5  api,
6  emails,
7}) => {
8  if (
9    !record.emailVerified &&
10    record.emailVerificationToken &&
11    params.user?.emailVerificationCode
12  ) {
13    const url = new URL("/verify-email", Config.appUrl);
14    url.searchParams.append("code", params.user?.emailVerificationCode);
15
16    // create your custom email template
17    const CustomTemplate = `
18     <!DOCTYPE html>
19      <html lang="en">
20       <head>
21        <meta charset="UTF-8">
22        <meta name="viewport" content="width=device-width, initial-scale=1.0">
23        <title>Email Verification</title>
24       </head>
25       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
26        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
27         <h1 style="font-size: 24px; margin-bottom: 20px;">Email Verification</h1>
28          <p>Click the button below to verify your email:</p>
29          <a href="<%= url %>" style="color: #ffffff; background-color: #3498db;">Click to Verify Email</a>
30        </div>
31       </body>
32      </html>`;
33
34    await emails.sendMail({
35      to: record.email,
36      subject: `Verify your email with ${Config.appName}`,
37      // Pass your custom template
38      // The default template is an EJS string
39      html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {
40        url: url.toString(),
41      }),
42    });
43  }
44};

1export const onSuccess: ActionOnSuccess = async ({
2  params,
3  record,
4  logger,
5  api,
6  emails,
7}) => {
8  if (
9    !record.emailVerified &&
10    record.emailVerificationToken &&
11    params.user?.emailVerificationCode
12  ) {
13    const url = new URL("/verify-email", Config.appUrl);
14    url.searchParams.append("code", params.user?.emailVerificationCode);
15
16    // create your custom email template
17    const CustomTemplate = `
18     <!DOCTYPE html>
19      <html lang="en">
20       <head>
21        <meta charset="UTF-8">
22        <meta name="viewport" content="width=device-width, initial-scale=1.0">
23        <title>Email Verification</title>
24       </head>
25       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
26        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
27         <h1 style="font-size: 24px; margin-bottom: 20px;">Email Verification</h1>
28          <p>Click the button below to verify your email:</p>
29          <a href="<%= url %>" style="color: #ffffff; background-color: #3498db;">Click to Verify Email</a>
30        </div>
31       </body>
32      </html>`;
33
34    await emails.sendMail({
35      to: record.email,
36      subject: `Verify your email with ${Config.appName}`,
37      // Pass your custom template
38      // The default template is an EJS string
39      html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {
40        url: url.toString(),
41      }),
42    });
43  }
44};

When passing the CustomTemplate through emails.sendMail(), note that there is no text parameter to pass as that is replaced by the content within your CustomTemplate.

Email parameters

The sendMail function takes in a MailData object. The MailData object has the following params:

Name	Type	Description
`to`	`string` \| `Address` \| `Address[]`	The address(es) that the email will be sent to. The `to` param can be an email address or `Address` object, or an array of either. For example: `[email protected]` or `{ address: "[email protected]", name: "John Smith" }`
`from`	`string` \| `Address`	The `from` address displayed to users as to who the email came from. This param is optional. If not provided, the `from` address will be set to `noreply@{your-app-slug}.gadget.app`.
`sender`	`string` \| `Address`	The `sender` address used to identify the agent responsible for the actual transmission of the email. Can only be set when using a custom transport.
`html`	`string`	The HTML body of the email.
`attachments`	`Attachment[]`	An array of files to be attached to the email. The `attachment` is an object with either a `path` param which represents the `string` path to the file, or a `content` param which represents the `Buffer` or `string` raw data of the file, and an optional `filename` param which represents the name of the file. If a filename is not provided, the original name of the file will be used.

When using GadgetMailer, users are restricted from sending emails from anything other than their app's approved subdomain such as: { anything }@your-app-slug.gadget.app. No restrictions are set when users are using their own custom transport.

Adding attachments to emails with GadgetMailer

Let's say we have a model called csvFile with a field link which is a file type and we want to dynamically create files to store in our model. To attach a generated csv file to an email we can do the following:

example of sending an email with an attachment in an action

JavaScript

1import { Base64 } from "base64-string";
2import { DefaultEmailTemplates } from "gadget-server";
3
4export const onSuccess: ActionOnSuccess = async ({ api, emails }) => {
5  // 1. Create CSV content
6  const csvContent = "name,age\njohn,32";
7
8  // 2. Encode the CSV content
9  const enc = new Base64();
10  const b64 = enc.urlEncode(csvContent);
11
12  // 3. Set the file name
13  const csvFileName = `test.csv`;
14
15  // 4. Create the file
16  const file = await api.csvFile.create({
17    link: {
18      base64: b64,
19      fileName: csvFileName,
20    },
21  });
22
23  const CustomTemplate = `
24     <!DOCTYPE html>
25      <html lang="en">
26       <head>
27        <meta charset="UTF-8">
28        <meta name="viewport" content="width=device-width, initial-scale=1.0">
29        <title>Email with CSV</title>
30       </head>
31       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
32        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
33         <h1 style="font-size: 24px; margin-bottom: 20px;">Sending a CSV</h1>
34         <p>See attachment</p>
35        </div>
36       </body>
37      </html>`;
38
39  // 5. Send the email with the attachment
40  await emails.sendMail({
41    to: "[email protected]",
42    subject: `Welcome`,
43    html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {}),
44    attachments: [
45      {
46        filename: csvFileName,
47        path: file.link?.url,
48      },
49    ],
50  });
51};

1import { Base64 } from "base64-string";
2import { DefaultEmailTemplates } from "gadget-server";
3
4export const onSuccess: ActionOnSuccess = async ({ api, emails }) => {
5  // 1. Create CSV content
6  const csvContent = "name,age\njohn,32";
7
8  // 2. Encode the CSV content
9  const enc = new Base64();
10  const b64 = enc.urlEncode(csvContent);
11
12  // 3. Set the file name
13  const csvFileName = `test.csv`;
14
15  // 4. Create the file
16  const file = await api.csvFile.create({
17    link: {
18      base64: b64,
19      fileName: csvFileName,
20    },
21  });
22
23  const CustomTemplate = `
24     <!DOCTYPE html>
25      <html lang="en">
26       <head>
27        <meta charset="UTF-8">
28        <meta name="viewport" content="width=device-width, initial-scale=1.0">
29        <title>Email with CSV</title>
30       </head>
31       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
32        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
33         <h1 style="font-size: 24px; margin-bottom: 20px;">Sending a CSV</h1>
34         <p>See attachment</p>
35        </div>
36       </body>
37      </html>`;
38
39  // 5. Send the email with the attachment
40  await emails.sendMail({
41    to: "[email protected]",
42    subject: `Welcome`,
43    html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {}),
44    attachments: [
45      {
46        filename: csvFileName,
47        path: file.link?.url,
48      },
49    ],
50  });
51};

We can also fetch the file from a URL and pass it in as an attachment:

example of sending an email with attachment content in an action

JavaScript

1import pdf from "pdf-parse";
2import { DefaultEmailTemplates } from "gadget-server";
3
4const getPdfBuffer = async (url: string) => {
5  try {
6    const response = await fetch(url);
7    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
8    const arrayBuffer = await response.arrayBuffer();
9    return Buffer.from(arrayBuffer);
10  } catch (error) {
11    console.error("Error fetching PDF:", error);
12    throw error;
13  }
14};
15
16export const onSuccess: ActionOnSuccess = async ({ emails }) => {
17  // 1. Fetch the PDF file from a URL
18  const url = "https://example.com/example.pdf";
19  const pdfBuffer = await getPdfBuffer(url);
20
21  const CustomTemplate = `
22     <!DOCTYPE html>
23      <html lang="en">
24       <head>
25        <meta charset="UTF-8">
26        <meta name="viewport" content="width=device-width, initial-scale=1.0">
27        <title>Email with PDF</title>
28       </head>
29       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
30        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
31         <h1 style="font-size: 24px; margin-bottom: 20px;">Sending a PDF</h1>
32         <p>See attachment</p>
33        </div>
34       </body>
35      </html>`;
36
37  // 2. Send the email with the attachment
38  await emails.sendMail({
39    to: "[email protected]",
40    subject: `Welcome`,
41    html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {}),
42    attachments: [
43      {
44        filename: "myPdf.pdf",
45        content: pdfBuffer,
46      },
47    ],
48  });
49};

1import pdf from "pdf-parse";
2import { DefaultEmailTemplates } from "gadget-server";
3
4const getPdfBuffer = async (url: string) => {
5  try {
6    const response = await fetch(url);
7    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
8    const arrayBuffer = await response.arrayBuffer();
9    return Buffer.from(arrayBuffer);
10  } catch (error) {
11    console.error("Error fetching PDF:", error);
12    throw error;
13  }
14};
15
16export const onSuccess: ActionOnSuccess = async ({ emails }) => {
17  // 1. Fetch the PDF file from a URL
18  const url = "https://example.com/example.pdf";
19  const pdfBuffer = await getPdfBuffer(url);
20
21  const CustomTemplate = `
22     <!DOCTYPE html>
23      <html lang="en">
24       <head>
25        <meta charset="UTF-8">
26        <meta name="viewport" content="width=device-width, initial-scale=1.0">
27        <title>Email with PDF</title>
28       </head>
29       <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">
30        <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
31         <h1 style="font-size: 24px; margin-bottom: 20px;">Sending a PDF</h1>
32         <p>See attachment</p>
33        </div>
34       </body>
35      </html>`;
36
37  // 2. Send the email with the attachment
38  await emails.sendMail({
39    to: "[email protected]",
40    subject: `Welcome`,
41    html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {}),
42    attachments: [
43      {
44        filename: "myPdf.pdf",
45        content: pdfBuffer,
46      },
47    ],
48  });
49};

Setting up an external transporter

If you decide to use an external email transport like Amazon SES, SendGrid, etc, you do have the ability to configure that within Gadget.

Create a boot file and declare a value representing the new transport. With this value you'll run emails.setTransport(), for those familiar with Nodemailer this is exactly how createTransport() operates
The parameters passed through setTransport() will be entirely dependent upon the type of transport you wish to use with your app. Refer to the Nodemailer or external transport service documentation for more details on parameters passed.
For example if we wanted to use Mandrill (Mailchimp's transactional email service) as our email transporter we would do the following below:

JavaScript

1// import emails within the file
2import { emails } from "gadget-server";
3
4// Create the transporter object
5const transporter = {
6  host: "smtp.mandrillapp.com",
7  port: 587,
8  auth: {
9    user: "YOUR_MANDRILL_USERNAME",
10    pass: "YOUR_MANDRILL_API_KEY",
11  },
12};
13
14// Set the transporter to the new configuration
15emails.setTransport(transporter);

1// import emails within the file
2import { emails } from "gadget-server";
3
4// Create the transporter object
5const transporter = {
6  host: "smtp.mandrillapp.com",
7  port: 587,
8  auth: {
9    user: "YOUR_MANDRILL_USERNAME",
10    pass: "YOUR_MANDRILL_API_KEY",
11  },
12};
13
14// Set the transporter to the new configuration
15emails.setTransport(transporter);

In summary to configure an external transporter:

Create a boot file
Declare the transporter (transport) along with any parameters in a separate code file or within the action.
Use emails.setTransport() and pass the transport value.

Building with email/password authentication

Custom email templates

Email parameters

Adding attachments to emails with GadgetMailer

Setting up an external transporter

Was this page helpful?