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.

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

Security and Best Practices

Use Cases

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.