Authenticate Using Microsoft with JavaScript

You can let your users authenticate with Firebase using OAuth providers like Microsoft Azure Active Directory by integrating generic OAuth Login into your app using the Firebase SDK to carry out the end to end sign-in flow.

Before you begin

To sign in users using Microsoft accounts (Azure Active Directory and personal Microsoft accounts), you must first enable Microsoft as a sign-in provider for your Firebase project:

  1. Add Firebase to your JavaScript project.
  2. In the Firebase console, open the Auth section.
  3. On the Sign in method tab, enable the Microsoft provider.
  4. Add the Client ID and Client Secret from that provider's developer console to the provider configuration:
    1. To register a Microsoft OAuth client, follow the instructions in Quickstart: Register an app with the Azure Active Directory v2.0 endpoint. Note that this endpoint supports sign-in using Microsoft personal accounts as well as Azure Active Directory accounts. Learn more about Azure Active Directory v2.0.
    2. When registering apps with these providers, be sure to register the *.firebaseapp.com domain for your project as the redirect domain for your app.
  5. Click Save.

Handle the sign-in flow with the Firebase SDK

If you are building a web app, the easiest way to authenticate your users with Firebase using their Microsoft accounts is to handle the entire sign-in flow with the Firebase JavaScript SDK.

To handle the sign-in flow with the Firebase JavaScript SDK, follow these steps:

  1. Create an instance of an OAuthProvider using the provider ID microsoft.com.

    Web modular API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Optional: Specify additional custom OAuth parameters that you want to send with the OAuth request.

    Web modular API

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    For the parameters Microsoft supports, see the Microsoft OAuth documentation. Note that you can't pass Firebase-required parameters with setCustomParameters(). These parameters are client_id, response_type, redirect_uri, state, scope and response_mode.

    To allow only users from a particular Azure AD tenant to sign into the application, either the friendly domain name of the Azure AD tenant or the tenant's GUID identifier can be used. This can be done by specifying the "tenant" field in the custom parameters object.

    Web modular API

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. Optional: Specify additional OAuth 2.0 scopes beyond basic profile that you want to request from the authentication provider.

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    To learn more, refer to the Microsoft permissions and consent documentation.

  4. Authenticate with Firebase using the OAuth provider object. You can prompt your users to sign in with their Microsoft Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

    • To sign in with a pop-up window, call signInWithPopup:

    Web modular API

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Web namespaced API

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    • To sign in by redirecting to the sign-in page, call signInWithRedirect:

    Follow the best practices when using signInWithRedirect, linkWithRedirect, or reauthenticateWithRedirect.

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    After the user completes sign-in and returns to the page, you can obtain the sign-in result by calling getRedirectResult.

    Web modular API

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Web namespaced API

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    On successful completion, the OAuth access token associated with the provider can be retrieved from the firebase.auth.UserCredential object returned.

    Using the OAuth access token, you can call the Microsoft Graph API.

    For example, to get the basic profile information, the following REST API can be called:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
    

    Unlike other providers supported by Firebase Auth, Microsoft does not provide a photo URL and instead, the binary data for a profile photo has to be requested via Microsoft Graph API.

    In addition to the OAuth access token, the user's OAuth ID token can also be retrieved from the firebase.auth.UserCredential object. The sub claim in the ID token is app-specific and will not match the federated user identifier used by Firebase Auth and accessible via user.providerData[0].uid. The oid claim field should be used instead. When using a Azure AD tenant to sign-in, the oid claim will be an exact match. However for the non-tenant case, the oid field is padded. For a federated ID 4b2eabcdefghijkl, the oid will have have a form 00000000-0000-0000-4b2e-abcdefghijkl.

  5. While the above examples focus on sign-in flows, you also have the ability to link a Microsoft provider to an existing user using linkWithPopup/linkWithRedirect. For example, you can link multiple providers to the same user allowing them to sign in with either.

    Web modular API

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. The same pattern can be used with reauthenticateWithPopup/reauthenticateWithRedirect which can be used to retrieve fresh credentials for sensitive operations that require recent login.

    Web modular API

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Authenticate with Firebase in a Chrome extension

If you are building a Chrome extension app, see the Offscreen Documents guide.

Next steps

After a user signs in for the first time, a new user account is created and linked to the credentials—that is, the user name and password, phone number, or auth provider information—the user signed in with. This new account is stored as part of your Firebase project, and can be used to identify a user across every app in your project, regardless of how the user signs in.

  • In your apps, the recommended way to know the auth status of your user is to set an observer on the Auth object. You can then get the user's basic profile information from the User object. See Manage Users.

  • In your Firebase Realtime Database and Cloud Storage Security Rules, you can get the signed-in user's unique user ID from the auth variable, and use it to control what data a user can access.

You can allow users to sign in to your app using multiple authentication providers by linking auth provider credentials to an existing user account.

To sign out a user, call signOut:

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});