Introduction

Sending emails directly from a SharePoint Framework (SPFx) solution enhances user interaction by enabling automated communication, such as alerts, reminders, or advisor messages. Microsoft Graph makes it easy to send emails on behalf of the currently signed-in user with full compliance to Microsoft 365 standards.

In this article, you'll learn:

How to configure SPFx for sending emails via Microsoft Graph
How to build and send a personalized email using Graph API
Best practices and security considerations

Microsoft Graph Setup in SPFx

Step 1: Declare Permissions

To send mail, add the required permission to your package-solution.json file:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Mail.Send"
  }
]

💡 Tip: 📌 After deployment, go to SharePoint Admin Center → API Access and approve the Mail.Send permission.

Step 2: Get Graph Client

In your React or TypeScript component, use msGraphClientFactory to obtain an authenticated client:

const client = await context.msGraphClientFactory.getClient("3");

Sending a Personalised Email

The following code sends an email to a user (e.g., a student) with a personalised subject and message body:

const email = {
  message: {
    subject: emailSubject || `Message from Advisor`,
    body: {
      contentType: "HTML",
      content:
        emailBody ||
        `Dear, This is a message from your Advisor.`,
    },
    toRecipients: [
      {
        emailAddress: {
          address: student@gmail.com,
        },
      },
    ],
  },
  saveToSentItems: true,
};

await client.api("/me/sendMail").post(email);

Breakdown of Email Payload

subject: The subject line of the email. You can customize or fallback to a default.
body: The main content of the email. HTML formatting is supported.
toRecipients: An array of recipients. In this case, sending to one student.
saveToSentItems: Set to true so the email appears in the sender's Sent Items folder.

Security and Best Practices

Always validate and sanitize dynamic content in the subject and body to avoid injection issues.
Use conditional logic to ensure emails are not sent to invalid or missing email addresses.
Avoid mass mailing from loops in the frontend; instead, queue and process in batches (Power Automate or Azure Function).
Do not expose sensitive messaging logic on the client-side.

Use Cases

Faculty sending direct messages to students
Workflow notifications (task assignments, deadline alerts)
Event confirmations or reminders
Feedback acknowledgments

Conclusion

With Microsoft Graph, sending emails from an SPFx solution is powerful and straightforward. By using /me/sendMail, emails are sent on behalf of the logged-in user, maintaining organisational integrity and traceability.

Send Email in SPFx Using Microsoft Graph API