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 thehtml
parameter you will pass the custom template like below:
JavaScript1export async function onSuccess({ params, record, logger, api, emails }) {2 if (3 !record.emailVerified &&4 record.emailVerificationToken &&5 params.user?.emailVerificationCode6 ) {7 const url = new URL("/verify-email", Config.appUrl);8 url.searchParams.append("code", params.user?.emailVerificationCode);910 // create your custom email template11 const CustomTemplate = `12 <!DOCTYPE html>13 <html lang="en">14 <head>15 <meta charset="UTF-8">16 <meta name="viewport" content="width=device-width, initial-scale=1.0">17 <title>Email Verification</title>18 </head>19 <body style="font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 50px;">20 <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">21 <h1 style="font-size: 24px; margin-bottom: 20px;">Email Verification</h1>22 <p>Click the button below to verify your email:</p>23 <a href="<%= url %>" style="color: #ffffff; background-color: #3498db;">Click to Verify Email</a>24 </div>25 </body>26 </html>`;2728 await emails.sendMail({29 to: record.email,30 subject: `Verify your email with ${Config.appName}`,31 // Pass your custom template32 // The default template is an EJS string33 html: DefaultEmailTemplates.renderEmailTemplate(CustomTemplate, {34 url: url.toString(),35 }),36 });37 }38}
Important to note when passing the CustomTemplate
through emails.sendMail()
:
- There is no
text
parameter to pass as that is replaced by the content within yourCustomTemplate
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 howcreateTransport()
operatesThe 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:
JavaScript1import { Server, emails } from "gadget-server";2// import emails within the file34// Create the transporter object5const transporter = {6 host: "smtp.mandrillapp.com",7 port: 587,8 auth: {9 user: "YOUR_MANDRILL_USERNAME",10 pass: "YOUR_MANDRILL_API_KEY",11 },12};1314// Set the transporter to the new configuration15emails.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 thetransport
value.