From Azure AD Token to Microsoft Graph Token in Next-Auth (react)

Question

Hi Stackoverflow community, this is my first question here after not finding a solution to my problem.

To begin with, we are having an app registration on azure to our Azure Active Directory and configured our react-next-js project to authenticate with it.

export const authOptions: NextAuthOptions = {
  providers: [
    AzureADProvider({
      name: 'Azure Active Directory',
      clientId: process.env.AZURE_CLIENT_ID ?? 'undefined',
      clientSecret: process.env.AZURE_CLIENT_SECRET ?? 'undefined',
      tenantId: process.env.AZURE_TENANT_ID,
      authorization: {
        params: {
          scope: 'api://ownscope/general openid profile email user.read ',
        },
      },
    }),
  ],
  theme: {
    colorScheme: 'light',
  },
  callbacks: {
    /**
     * Controls
     * @param param{account, profile, user}
     * @returns True iff user is allowed to sign in
     */
    
    async signIn()
    {
      return true
    },
    // user, profile
    async jwt({ token, account }) {
      if (account) {
        token.access_token = account.access_token;
        try {
          const graphClient = getGraphClient(
            {access_token: account.access_token} as { access_token: string }
          )
          token.graphdata = await graphClient.api('/me').get()
        } catch (err) {
          console.error('Failed to load MS Graph data')
          console.error(err)
        }
      }
      return token
    },
    // , user
    async session({ session, token }) {
      // Transform graphdata to user model
      session.userdata = ToUser(token.graphdata)
      return session
    },
  },
  events: {
    async signIn(message) {
      console.log(
        'Logged in successfully: %s',
        JSON.stringify(message.user.name)
      )
    },
    async session(message) {
      console.log(
        'Session active: %s',
        JSON.stringify(message?.session?.user?.name)
      )
    },
  },
}

export default NextAuth(authOptions)

Which does work fine, the login screen is coming up and we can login with our user. The returned access_token is good and does have the 'aud' from our app registration: AAD_Token

We need this token to access our API which is protected with this app registration (Azure API Management). And this works too.

But as you can see in our next-auth code, we want to get further user informations from Microsoft Graph Endpoint (The used graph client is microsoft/microsoft-graph-client). We added the scopes for profile and user.read in our authentication request. And I tried to access the Graph endpoint with postman too. Which get's the response

{
    "error": {
        "code": "InvalidAuthenticationToken",
        "message": "Access token validation failure. Invalid audience.",
        "innerError": {
            "date": "2022-08-31T13:39:54",
            "request-id": "9e161f21-3eca-4b6e-8678-ab1edd803e13",
            "client-request-id": "9e161f21-3eca-4b6e-8678-ab1edd803e13"
        }
    }
}

Which does make sense since the checked audience is from our AAD and not the expected Microsoft Graph auth. Removing our own scope from the request results in a Microsoft graph access token, but we can't access our API with it: Graph Token

How can we get a valid Microsoft Graph token in next-auth after successfully login into our AAD account?