SharePoint  

Send Email in SPFx Using Microsoft Graph API

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"
  }
]

📌 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 Personalized Email

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

const email = {
  message: {
    subject: emailSubject || `Message from Advisor`,
    body: {
      contentType: "HTML",
      content:
        emailBody ||
        `Dear,<br><br>This is a message from your Advisor.`,
    },
    toRecipients: [
      {
        emailAddress: {
          address: [email protected],
        },
      },
    ],
  },
  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 organizational integrity and traceability.

Membership not found