next-auth x Microsoft Graph API: Where to get the accessToken

Question

I'm building an email marketing automation tool using NextJS, next-auth and Microsoft Graph API. I'm using next-auth's Azure AD B2C provider to authenticate users, and I've been following their docs.

Within the Configuration (Advanced) section of the docs, I've followed the steps to setup an Azure AD api app to communicate with the Microsoft Graph API (to send email on our user's behalf). Now, when a user signs up, an access_token (jwt) is added to my accounts db table. Here it is decoded:

{
  "iss": "https://something.b2clogin.com/b03...f94/v2.0/",
  "exp": 1664588154,
  "nbf": 1664584554,
  "aud": "6eb...c5b",
  "idp_access_token": "EwB...QI=",
  "idp": "live.com",
  "name": "Will Despard",
  "sub": "1f7...d6c",
  "emails": [
    "[email protected]"
  ],
  "tfp": "B2C_1_signupsignin",
  "scp": "mail.send",
  "azp": "ff8...f5d",
  "ver": "1.0",
  "iat": 1664584554
}

The problem is, there is no example of how to setup the Microsoft Graph JS Client with next-auth. For example, according to Microsoft, to create a Microsoft Graph API client, you must do the following:

import { Client } from '@microsoft/microsoft-graph-client';

const client = Client.init({
      authProvider: (done) =>
        done(
          null,
          accessToken // WHERE DO WE GET THIS FROM?
        ),
    });

const sendMail = {
      message: {
        subject: 'Meet for lunch?',
        body: { contentType: 'Text', content: 'The new cafeteria is open.' },
        toRecipients: [
          { emailAddress: { address: '[email protected]' } },
        ],
      },
    };

const userDetails = await client.api('/me/sendMail').post(sendMail);

However, the following is unclear:

1. Where are we meant to get the accessToken used in this example from? I've tried using the idp_access_token in the decoded accessToken on my accounts db table (above), but this doesn't seem to work.

2. I'm assuming the accessToken we use to communicate with Microsoft Graph API is going to expire after a short amount of time. How do we handle getting a new token?

Help/code examples would be much appreciated!

Answer 1

I would try it like this. First, it looks that for graph access you should be looking for Azure AD provider, not Azure AD B2C that is a service that provides identity providers. I.e. looks like you need this one: https://next-auth.js.org/providers/azure-ad

To use Microsoft Graph to send mail you'll also need to request a non-default scope with "Send Mail" grant from your user. Means, when authorizing your app the user will be asked to consent that your app will send emails on behalf of him. Also you'll need to save the graph access token you get from the authentication flow. Something like this:

import AzureADProvider from "next-auth/providers/azure-ad"

export const authOptions: NextAuthOptions = {
  providers: [
    ....
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      authorization: {
        params: {
          scope:
            "openid email profile Mail.Send",
        },
      },
      // tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token
    },

Please note that if you do not specify tenantId that would mean that your application will be available for users from any tenant, but that in turn would mean that you must be a verified publisher (i.e. must have a valid MPN ID associated with your app). If you do specify a tenantId, then your app will only work for users from that specified tenant.

Later on, you could just use the token from the API:

import { getToken } from 'next-auth/jwt';
import { Client } from '@microsoft/microsoft-graph-client';

// some API function
export default async function handler(req, res) {

  const token = await getToken({ req })

  if (token) {

    const accessToken = token.accessToken;

    const client = Client.init({
      authProvider: (done) =>
        done(null, accessToken)
    });

    const sendMail = {
      message: {
        subject: 'Meet for lunch?',
        body: { contentType: 'Text', content: 'The new cafeteria is open.' },
        toRecipients: [
          { emailAddress: { address: '[email protected]' } },
        ],
      },
    };
  
    const userDetails = await client.api('/me/sendMail').post(sendMail);
...