BUG: Accessing Microsoft Graph API using the accessToken provided by the Azure AD B2C Provider

[willdspd]

Provider type

Azure Active Directory B2C

Environment

System:
OS: macOS 12.3.1
CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
Memory: 747.95 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 16.9.1 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 7.21.1 - /usr/local/bin/npm
Browsers:
Chrome: 106.0.5249.91
Firefox: 98.0.2
Safari: 15.4
npmPackages:
next: 12.2.2 => 12.2.2
next-auth: ^4.10.3 => 4.12.2
react: 18.2.0 => 18.2.0

Reproduction URL

https://github.com/nextauthjs/next-auth-example

Describe the issue

I'm using the Azure AD B2C provider and have followed the docs to set everything up. 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). After setting this up, 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, using the idp_access_token in the decoded accessToken on my accounts db table (above) doesn't seem to work. I'm assuming I'm doing this correctly, which means this may be a bug of some sort?

My auth options:

{
  adapter: PrismaAdapter(prisma),
  providers: [
    NextAuthAzureProvider({
      tenantId: process.env.AZURE_TENANT_NAME,
      clientId: process.env.AZURE_CLIENT_ID as string,
      clientSecret: process.env.AZURE_CLIENT_SECRET as string,
      primaryUserFlow: process.env.AZURE_PRIMARY_USER_FLOW,
      authorization: {
        params: {
          scope: `offline_access openid https://${process.env.AZURE_TENANT_NAME}.onmicrosoft.com/api/mail.send`,
        },
      },
    }),
  ],
}

How to reproduce

Follow the Azure AD b2c docs and use my code above

Expected behavior

I should be able to use the access_token on the accounts table to access to Microsoft Graph API on behalf of the user. At the very least there should be some documentation about how to properly set this up.

[NjengaFelix]

Hello, Sir, I am currently using Microsoft Entra Id external to authentication and manage my customers.
Next-Auth has not yet created a provider that supports Microsoft Entra Id external (CIAM).

By default, Microsoft Entra Id external uses Microsoft API, did you get a solution in regards to setting up Azure AD B2C provider with Microsoft Graph API