Is there signin in with microsoft instead of azure b2c?

[s-kris]

Is there support for simple sign in with microsoft directly?
Thank you.

[iaincollins]

As I understand it, it should be possible with the existing provider, but it's a horribly confusing topic and not really covered in the existing documentation for the provider.

Just how confusing it is came up recently on Twitter:
https://twitter.com/nextauthjs/status/1356002246509678593

It's a confusing as Microsoft have multiple APIs for sign in - including one that is OpenID Connect and one that is OAuth 2.0 (without OpenID Connect) and they have re-branded the service a few times and there are multiple historical variants that are slightly different.

It seems it has been known variously as "Sign in with Microsoft", "Microsoft Passport", "Windows Live", "Live Connect", "Messenger Connect", "Live Services" and a few other names.

Most recently it seems they are using the umbrella term "Microsoft identity platform", which can also be used with custom domains using the B2C endpoints.

I thin the current incarnation we would want is this:
https://developer.microsoft.com/en-us/identity/add-sign-in-with-microsoft

From there I found this guide that explains the options a bit more:
https://docs.microsoft.com/en-gb/azure/active-directory/develop/v2-oauth2-auth-code-flow

When I compare that doc and the existing Asure provider it looks like it's configured with the correct endpoints for either:
https://github.com/nextauthjs/next-auth/blob/main/src/providers/azure-ad-b2c.js

TL;DR I think they are actually the same thing and you can use the existing provider, it's just confusingly named.

The distinction seems actually to be between a value for tenant that is common (allows both Microsoft accounts and school/work accounts) or consumers (only allows Microsoft accounts) or organizations (only allows Active Directory accounts, e.g. school/work);
https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols#endpoints

The default in the provider we ship is 'common', which should work for everyone.

We should probably rename the the provider from "Azure Active Directory B2C" to something like "Microsoft identity platform" on the website (and use the name "Microsoft" in the provider so the default button text is "Sign in with Microsoft") and update our docs to reflect that it is actually the same provider for both Microsoft and Active Directory accounts.

[giubatt]

I managed to solve it with idTokens, I enabled idTokens in the azure console for the application, and configured the provider like this, if anyone is having the same issue:

  providers: [
    Providers.AzureADB2C({
      clientId: process.env.AZURE_CLIENT_ID,
      clientSecret: process.env.AZURE_CLIENT_SECRET,
      scope: `openid profile email ${process.env.AZURE_SCOPE}`,
      tenantId: process.env.AZURE_TENANT_ID,
      idToken: true,
      profile(profile) {
        return {
          id: profile.oid,
          name: profile.name,
          email: profile.email,
        }
      },
    }),
  ],

process.env.AZURE_SCOPE in this case is my custom application scope

[s-kris]

I was getting an error 'not found app with id:xxx'. So, I didn't integrate this.

[willdspd]

@giubatt I am currently struggling with using the accessToken to communicate with the Microsoft Graph API (check this out: #5477). Could you provide the full code that allowed you to do this, ideally including your Microsoft Client code? Thanks!

[MatejVykoukal]

@iaincollins Is there some follow-up on this?

[darklight9811]

Its been two years and I see the docs didn't change. Any follow-up?

[david-benes]

This is what I came up with using the original AzureAdProvider:

import type {
  OAuthConfig,
  OAuthProviderButtonStyles,
  OAuthUserConfig,
} from 'next-auth/providers';
import type { AzureADProfile } from 'next-auth/providers/azure-ad';
import AzureADProvider from 'next-auth/providers/azure-ad';

const microsoftLogo =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIH' +
  'dpZHRoPScyMScgaGVpZ2h0PScyMSc+PHBhdGggZmlsbD0nI2YyNTAyMicgZD0nTTEgMWg5djlIMXonLz' +
  '48cGF0aCBmaWxsPScjMDBhNGVmJyBkPSdNMSAxMWg5djlIMXonLz48cGF0aCBmaWxsPScjN2ZiYTAwJy' +
  'BkPSdNMTEgMWg5djloLTl6Jy8+PHBhdGggZmlsbD0nI2ZmYjkwMCcgZD0nTTExIDExaDl2OWgtOXonLz' +
  '48L3N2Zz4=';

export default function MicrosoftProvider<P extends AzureADProfile>(
  options: OAuthUserConfig<P> & {
    profilePhotoSize?: 48 | 64 | 96 | 120 | 240 | 360 | 432 | 504 | 648;
    tenantId?: string;
  }
): OAuthConfig<P> {
  const originalAzureADProvider = AzureADProvider(options);

  return {
    ...originalAzureADProvider,
    name: 'Microsoft Account',
    style: {
      ...originalAzureADProvider.style,
      text: 'black',
      textDark: 'white',
      logo: microsoftLogo,
      logoDark: microsoftLogo,
    } as OAuthProviderButtonStyles,
  } as OAuthConfig<P>;
}

[juliano988]

Based on @david-benes function, i've also created a MicrosoftProvider function:

function MicrosoftProvider(providerData: { clientId: string, clientSecret: string, tenantId: string }) {

  const AzureADProviderReturn = AzureADProvider({
    clientId: providerData.clientId,
    clientSecret: providerData.clientSecret,
    tenantId: providerData.tenantId,
  });

  return {
    ...AzureADProviderReturn,
    name: 'Microsoft',
    style: {
      logo: process.env.NEXTAUTH_URL + '/images/microsoft.png',
      logoDark: process.env.NEXTAUTH_URL + '/images/microsoft.png',
      bg: 'white',
      bgDark: 'black',
      text: 'back',
      textDark: 'white',
    }
  }

}

[Maozerhouni]

@david-benes @juliano988 Can you develop more on what you did ? I am relatively new to NextAuth and I have been struggling with the AzureADB2C provider for the past two weeks.
Where do you write this new function and how do you integrate it with the api\auth[...nextauth]\route.js we create ?

[david-benes]

You can put the code to src/auth/providers/microsoft.ts and then add the new provider to [...nextauth.ts]

export const authOptions: NextAuthOptions = {
  providers: [
    MicrosoftProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID as string,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET as string,
      tenantId: process.env.AZURE_AD_TENANT_ID as string,
    }),