Firebase auth with Microsoft gives null user object

I am implementing user sign-in for web with Google Firebase. I have this working for Google and Facebook (I am getting a populated user object), but for Microsoft sign in I am getting null in the user object even after authorizing at the login screen.

My code:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import {
    getAuth,
    signInWithRedirect,
    getRedirectResult,
    signOut,
    GoogleAuthProvider,
    FacebookAuthProvider,
    OAuthProvider, // microsoft
    onAuthStateChanged
} from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

const firebaseConfig = { /* my settings */ };
const firebase = initializeApp(firebaseConfig);
const auth = getAuth(firebase);

document.querySelector('.login-with button.microsoft').addEventListener('click', microsoftSignIn, false);

function microsoftSignIn() {
    const provider = new OAuthProvider('microsoft.com');
    signInWithRedirect(auth, provider);
}

onAuthStateChanged(auth, user => {
    if (user) {
        console.log("user is logged in", user);
    } else {
        console.log("user is not logged in");
    }                                                                                                                                                                                                                
});

In Azure AD I have set the redirect URI to https://my-app.firebaseapp.com/__/auth/handler. I also threw in the localhost though I suspect it is not necessary:

I gave it permission to log users in:

And I have copied over the client ID and secret back to firebase auth.

When I test the login I get this:

Then after I accept I am redirected back to my site but the user object is null. How can I get a populated user object? Also note that even when using ngrok to host my site on a https URL the result is the same.

from Firebase auth with Microsoft gives null user object